Merge pull request #86 from marcobiedermann/feature/previous-next

Feature: Previous & Next Post

gatsby-node.js

@@ -12,12 +12,15 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
       graphql(
         `
           {
-            allMarkdownRemark(limit: 1000) {
+            allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, limit: 1000) {
               edges {
                 node {
                   fields {
                     slug
                   }
+                  frontmatter {
+                    title
+                  }
                 }
               }
             }
@@ -30,12 +33,19 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         }
 
         // Create blog posts pages.
-        _.each(result.data.allMarkdownRemark.edges, edge => {
+        const posts = result.data.allMarkdownRemark.edges;
+
+        _.each(posts, (post, index) => {
+          const previous = index === posts.length - 1 ? false : posts[index + 1].node;
+          const next = index === 0 ? false : posts[index - 1].node;
+
           createPage({
-            path: edge.node.fields.slug,
+            path: post.node.fields.slug,
             component: blogPost,
             context: {
-              slug: edge.node.fields.slug,
+              slug: post.node.fields.slug,
+              previous,
+              next,
             },
           })
         })

src/templates/blog-post.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Helmet from 'react-helmet'
+import Link from 'gatsby-link'
 import get from 'lodash/get'
 
 import Bio from '../components/Bio'
@@ -9,6 +10,7 @@ class BlogPostTemplate extends React.Component {
   render() {
     const post = this.props.data.markdownRemark
     const siteTitle = get(this.props, 'data.site.siteMetadata.title')
+    const { previous, next } = this.props.pathContext
 
     return (
       <div>
@@ -31,6 +33,32 @@ class BlogPostTemplate extends React.Component {
           }}
         />
         <Bio />
+
+        <ul
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            listStyle: 'none',
+            padding: 0,
+          }}
+        >
+          {previous && (
+            <li>
+              <Link to={previous.fields.slug} rel="prev">
+                ← {previous.frontmatter.title}
+              </Link>
+            </li>
+          )}
+
+          {next && (
+            <li>
+              <Link to={next.fields.slug} rel="next">
+                {next.frontmatter.title} →
+              </Link>
+            </li>
+          )}
+        </ul>
       </div>
     )
   }