Make frontpage list more interesting

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues"
   },
   "dependencies": {
-    "gatsby": "^1.8.10",
+    "gatsby": "^1.8.11",
     "gatsby-link": "^1.6.7",
     "gatsby-plugin-google-analytics": "^1.0.3",
     "gatsby-plugin-manifest": "^1.0.3",

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

yarn.lock

@@ -3289,9 +3289,9 @@ gatsby-transformer-sharp@^1.6.0:
     fs-extra "^4.0.0"
     image-size "^0.6.0"
 
-gatsby@^1.8.10:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.8.10.tgz#7acd034ca9c3101cc51e8c7aaebe39c9cd315ce0"
+gatsby@^1.8.11:
+  version "1.8.11"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.8.11.tgz#1602d67163709a220dceb095a8e55ea4c45dc44a"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"