prev/next post navigation

gatsby-node.js

@@ -25,8 +25,16 @@ exports.createPages = async ({ graphql, actions }) => {
 
   const result = await graphql(`
     {
-      posts: allMarkdownRemark {
+      posts: allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
         edges {
+          next {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+            }
+          }
           node {
             fields {
               slug
@@ -35,6 +43,14 @@ exports.createPages = async ({ graphql, actions }) => {
               tags
             }
           }
+          previous {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+            }
+          }
         }
       }
 
@@ -66,7 +82,7 @@ exports.onPostBuild = async ({ graphql }) => {
   // JSON Feed query
   const result = await graphql(`
     {
-      allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
+      allMarkdownRemark {
         edges {
           node {
             html

gatsby/createPages.js

@@ -32,7 +32,15 @@ exports.generatePostPages = (createPage, posts) => {
       path: `${post.node.fields.slug}`,
       component: postTemplate,
       context: {
-        slug: post.node.fields.slug
+        slug: post.node.fields.slug,
+        prev: post.previous && {
+          title: post.previous.frontmatter.title,
+          slug: post.previous.fields.slug
+        },
+        next: post.next && {
+          title: post.next.frontmatter.title,
+          slug: post.next.fields.slug
+        }
       }
     })
   })

src/components/molecules/Pagination.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import styles from './Pagination.module.scss'
+import shortid from 'shortid'
 
 const PageNumber = ({
   i,
@@ -65,7 +66,12 @@ export default function Pagination({
       <div>{!isFirst && <PrevNext prevPagePath={prevPagePath} />}</div>
       <div>
         {Array.from({ length: numPages }, (_, i) => (
-          <PageNumber i={i} slug={slug} current={currentPageNumber === i + 1} />
+          <PageNumber
+            key={shortid.generate()}
+            i={i}
+            slug={slug}
+            current={currentPageNumber === i + 1}
+          />
         ))}
       </div>
       <div>{!isLast && <PrevNext nextPagePath={nextPagePath} />}</div>

src/components/molecules/RelatedPosts.module.scss

@@ -3,12 +3,11 @@
 
 .title {
   font-size: $font-size-h3;
-  margin-bottom: $spacer * $line-height;
+  margin-bottom: $spacer;
 }
 
 .relatedPosts {
   margin-top: -($spacer * 2);
-  margin-bottom: $spacer;
 
   @media (min-width: $screen-md) {
     @include breakoutviewport;
@@ -65,7 +64,9 @@
 }
 
 .button {
-  margin: auto;
+  font-size: $font-size-mini;
-  display: block;
+  display: inline-block;
-  margin-top: $spacer * 2;
+  color: $brand-grey-light;
+  text-transform: uppercase;
+  margin-left: $spacer / 2;
 }

src/components/molecules/RelatedPosts.tsx

@@ -85,7 +85,12 @@ export default function RelatedPosts({
 
   return (
     <aside className={styles.relatedPosts}>
-      <h1 className={styles.title}>Related {photos ? 'Photos' : 'Posts'}</h1>
+      <h1 className={styles.title}>
+        Related {photos ? 'Photos' : 'Posts'}{' '}
+        <button className={styles.button} onClick={refreshPosts}>
+          Refresh
+        </button>
+      </h1>
       <ul>
         {filteredPosts
           .sort(() => 0.5 - Math.random())
@@ -96,9 +101,6 @@ export default function RelatedPosts({
             </li>
           ))}
       </ul>
-      <button className={`${styles.button} btn`} onClick={refreshPosts}>
-        Refresh Related {photos ? 'Photos' : 'Posts'}
-      </button>
     </aside>
   )
 }

src/styles/_mixins.scss

@@ -176,7 +176,8 @@
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;
   border-radius: $border-radius;
-  box-shadow: 0 1px 3px rgba($brand-grey, 0.2);
+  box-shadow: 0 3px 5px rgba($brand-grey, 0.2),
+    0 5px 16px rgba($brand-grey, 0.2);
 
   @media (min-width: $screen-sm) {
     border: 2px solid transparent;

src/styles/global.scss

@@ -160,6 +160,7 @@ h6 {
   margin-bottom: $spacer;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: color 0.2s $easing;
 
   // stylelint-disable no-descending-specificity
   &,
@@ -172,6 +173,13 @@ h6 {
   .dark & a {
     color: $color-headings--dark;
   }
+
+  a:hover &,
+  a:focus &,
+  .dark a:hover &,
+  .dark a:focus & {
+    color: $link-color;
+  }
 }
 
 // Responsive Media

src/templates/Post/PostTitle.module.scss

@@ -5,13 +5,8 @@
 /////////////////////////////////////
 
 .hentry__title {
-  color: $color-headings;
   margin-top: 0;
   margin-bottom: $spacer;
-
-  :global(.dark) & {
-    color: $color-headings--dark;
-  }
 }
 
 .hentry__title__link {

src/templates/Post/PrevNext.module.scss

@@ -0,0 +1,56 @@
+@import 'variables';
+@import 'mixins';
+
+.prevnext {
+  @include breakoutviewport;
+  @include divider-top;
+
+  margin-top: $spacer * 4;
+  padding-top: $spacer * 2;
+  display: grid;
+  gap: $spacer;
+  grid-template-columns: 1fr 1fr;
+
+  svg {
+    fill: $brand-grey-light;
+    margin-bottom: -0.1rem;
+    position: absolute;
+    left: 0.1rem;
+    top: $spacer * 1.1;
+  }
+
+  > div {
+    position: relative;
+
+    &:first-child {
+      padding-left: $spacer;
+    }
+
+    &:last-child {
+      padding-right: $spacer;
+      text-align: right;
+
+      svg {
+        right: 0.1rem;
+        left: auto;
+      }
+    }
+  }
+}
+
+.title {
+  font-size: $font-size-large;
+  margin: 0;
+  color: $brand-grey-light !important;
+
+  a:hover & {
+    color: $link-color !important;
+  }
+}
+
+.label {
+  margin-bottom: $spacer / 4;
+  font-size: $font-size-small;
+  color: $brand-grey-light;
+  opacity: 0.65;
+}

src/templates/Post/PrevNext.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import styles from './PrevNext.module.scss'
+import { ReactComponent as Right } from '../../images/chevron-right.svg'
+import { ReactComponent as Left } from '../../images/chevron-left.svg'
+
+interface Node {
+  title: string
+  slug: string
+}
+
+interface PrevNextProps {
+  prev: Node
+  next: Node
+}
+
+const PrevNext = ({ prev, next }: PrevNextProps) => (
+  <nav className={styles.prevnext}>
+    <div>
+      {prev && (
+        <Link to={prev.slug}>
+          <Left />
+          <p className={styles.label}>Older</p>
+          <h3 className={styles.title}>{prev.title}</h3>
+        </Link>
+      )}
+    </div>
+    <div>
+      {next && (
+        <Link to={next.slug}>
+          <p className={styles.label}>Newer</p>
+          <h3 className={styles.title}>{next.title}</h3>
+          <Right />
+        </Link>
+      )}
+    </div>
+  </nav>
+)
+
+export default PrevNext

src/templates/Post/index.tsx

@@ -12,15 +12,21 @@ import PostContent from './PostContent'
 import PostActions from './PostActions'
 import PostLinkActions from './PostLinkActions'
 import PostMeta from './PostMeta'
+import PrevNext from './PrevNext'
 import styles from './index.module.scss'
 import { Image } from '../../components/atoms/Image'
 
 export default function Post({
   data,
-  location
+  location,
+  pageContext: { next, prev }
 }: {
   data: { post: PostMetadata }
   location: Location
+  pageContext: {
+    next: { title: string; slug: string }
+    prev: { title: string; slug: string }
+  }
 }) {
   const { post } = data
   const { title, image, type, linkurl, style, tags } = post.frontmatter
@@ -63,6 +69,8 @@ export default function Post({
         {(type === 'post' || type === 'photo') && (
           <RelatedPosts photos={type === 'photo'} tags={tags} />
         )}
+
+        <PrevNext prev={prev} next={next} />
       </Layout>
     </>
   )