Make frontpage list more interesting

src/pages/index.js

@@ -1,42 +1,46 @@
-import React from 'react'
-import Link from 'gatsby-link'
-import get from 'lodash/get'
-import Helmet from 'react-helmet'
+import React from "react"
+import Link from "gatsby-link"
+import get from "lodash/get"
+import Helmet from "react-helmet"
 
-import Bio from '../components/Bio'
-import { rhythm } from '../utils/typography'
+import Bio from "../components/Bio"
+import { rhythm } from "../utils/typography"
 
 class BlogIndex extends React.Component {
   render() {
-    // console.log("props", this.props)
-    const pageLinks = []
-    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
-    const posts = get(this, 'props.data.allMarkdownRemark.edges')
-    posts.forEach(post => {
-      if (post.node.path !== '/404/') {
-        const title = get(post, 'node.frontmatter.title') || post.node.path
-        pageLinks.push(
-          <li
-            key={post.node.frontmatter.path}
-            style={{
-              marginBottom: rhythm(1 / 4),
-            }}
-          >
-            <Link style={{ boxShadow: 'none' }} to={post.node.frontmatter.path}>
-              {post.node.frontmatter.title}
-            </Link>
-          </li>
-        )
-      }
-    })
+    const siteTitle = get(this, "props.data.site.siteMetadata.title")
+    const posts = get(this, "props.data.allMarkdownRemark.edges")
 
     return (
       <div>
-        <Helmet title={get(this, 'props.data.site.siteMetadata.title')} />
+        <Helmet title={get(this, "props.data.site.siteMetadata.title")} />
         <Bio />
-        <ul>
-          {pageLinks}
-        </ul>
+        {posts.map(post => {
+          if (post.node.path !== "/404/") {
+            const title = get(post, "node.frontmatter.title") || post.node.path
+            return (
+              <div>
+                <h3
+                  key={post.node.frontmatter.path}
+                  style={{
+                    marginBottom: rhythm(1 / 4),
+                  }}
+                >
+                  <Link
+                    style={{ boxShadow: "none" }}
+                    to={post.node.frontmatter.path}
+                  >
+                    {post.node.frontmatter.title}
+                  </Link>
+                </h3>
+                <small>
+                  {post.node.frontmatter.date}
+                </small>
+                <p dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />
+              </div>
+            )
+          }
+        })}
       </div>
     )
   }
@@ -58,8 +62,10 @@ export const pageQuery = graphql`
     allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
       edges {
         node {
+          excerpt
           frontmatter {
             path
+            date(formatString: "DD MMMM, YYYY")
           }
           frontmatter {
             title