index.js (3929B)
1 import React from 'react'; 2 3 import Layout from '../components/layout'; 4 import SEO from '../components/seo'; 5 import { graphql, Link } from 'gatsby'; 6 import moment from 'moment'; 7 8 require('prismjs/plugins/line-numbers/prism-line-numbers.css'); 9 export const query = graphql` 10 query BlogPostList { 11 site { 12 siteMetadata { 13 author 14 name 15 photo 16 } 17 } 18 allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) { 19 nodes { 20 timeToRead 21 } 22 edges { 23 node { 24 frontmatter { 25 cover 26 date 27 excerpt 28 path 29 tags 30 title 31 } 32 } 33 } 34 } 35 } 36 `; 37 38 export default function IndexPage(props) { 39 const edges = props.data.allMarkdownRemark.edges; 40 const nodes = props.data.allMarkdownRemark.nodes; 41 for (let index in edges) edges[index] = { ...edges[index], ...nodes[index] }; 42 const { author: twitterHandle, name, photo } = props.data.site.siteMetadata; 43 return ( 44 <Layout> 45 <SEO title="Home" /> 46 <div className={'inner'}> 47 <div className={'post-feed'}> 48 {edges.map((edge, index) => { 49 const { frontmatter } = edge.node; 50 const published = moment(frontmatter.date).fromNow(); 51 const cover = frontmatter.cover; 52 return ( 53 <article className={'post-card'} key={frontmatter.path}> 54 <Link to={frontmatter.path} className={'post-card-image-link'}> 55 <div 56 className={'post-card-image'} 57 style={{ 58 backgroundImage: `url("${cover}")`, 59 }} 60 ></div> 61 </Link> 62 <div className={'post-card-content'}> 63 <Link 64 to={frontmatter.path} 65 className={'post-card-content-link'} 66 > 67 <header className="postCardHeader"> 68 <span className={'post-card-tags'}> 69 {frontmatter.tags && frontmatter.tags[0].length 70 ? frontmatter.tags[0] + ` • ` 71 : ``}{' '} 72 {published} 73 </span> 74 <h2 className={'post-card-title'}>{frontmatter.title}</h2> 75 </header> 76 <section className="postCardExcerpt"> 77 <p className={'excerpt'}> 78 {edges[index].node.frontmatter.excerpt} 79 </p> 80 </section> 81 </Link> 82 <footer className={'post-card-meta'}> 83 <ul className={'author-list'}> 84 <li className={'author-list-item'}> 85 <div className={'author-name-tooltip'}>{name}</div> 86 {/* <a 87 href={`https://www.twitter.com/${twitterHandle}`} 88 className={'static-avatar'} 89 > 90 <img 91 src={photo} 92 className={'avatar-wrapper'} 93 alt={name} 94 /> 95 </a> */} 96 <a className={'static-avatar'}> 97 <img 98 src={photo} 99 className={'avatar-wrapper'} 100 alt={name} 101 /> 102 </a> 103 </li> 104 </ul> 105 <span className={'reading-time'}> 106 {edges[index].timeToRead} min read 107 </span> 108 </footer> 109 </div> 110 </article> 111 ); 112 })} 113 </div> 114 </div> 115 </Layout> 116 ); 117 }