Add forward/back navigation to gallery

gatsby-node.js

@@ -119,7 +119,7 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
     const iptcData = iptc(file);
     const exifData = await read(parent.absolutePath);
     const vibrantData = await Vibrant.from(parent.absolutePath)
-      .quality(1)
+      .quality(2)
       .getPalette();
 
     createNodeField({
@@ -156,15 +156,24 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   }
   // Create pages for each markdown file.
   const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
-  galleryImages.data.allFile.edges.forEach(({ node }) => {
-    // const path = node.base
+  const edges = galleryImages.data.allFile.edges;
+
+  edges.forEach(({ node }, index) => {
+    const nextImage = index === edges.length - 1
+      ? null
+      : edges[index + 1].node.base;
+    const prevImage = index === 0
+      ? null
+      : edges[index - 1].node.base;
+    console.log('next', nextImage);
+
     createPage({
       path: `photogallery/${node.base}`,
       component: galleryImageTemplate,
-      // In your blog post template's graphql query, you can use pagePath
-      // as a GraphQL variable to query for data from the markdown file.
       context: {
         imageFilename: node.base,
+        nextImage,
+        prevImage,
       },
     });
   });

src/components/GalleryImage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { graphql, Link, navigate } from 'gatsby';
+import { graphql, navigate, Link } from 'gatsby';
 import {
   getAspectRatio,
   getMeta,
@@ -13,11 +13,11 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import { Helmet } from 'react-helmet';
 import classnames from 'classnames';
 
-const GalleryImage = ({ data }) => {
+const GalleryImage = ({ data, pageContext }) => {
   const image = data.allFile.edges[0].node;
   const ar = getAspectRatio(image);
 
-  // TODO: metadata icons
+  console.log(pageContext);
 
   const name = getName(image);
   const meta = getMeta(image);
@@ -39,12 +39,30 @@ const GalleryImage = ({ data }) => {
         style={getVibrantToHelmetSafeBodyStyle(vibrant)}
       />
     </Helmet>
+    <nav className="mt-0">
       <button
-      className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
+        className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
         onClick={() => navigate(-1)}
         type="button"
       >back</button>
-    <div className="min-h-screen pt-5 flex flex-col justify-center">
+      <Link
+        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+        to="/"
+      >home</Link>
+      <Link
+        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+        to="/photogallery/"
+      >gallery</Link>
+      {pageContext.prevImage && <Link
+        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+        to={`/photogallery/${pageContext.prevImage}/`}
+      >previous</Link>}
+      {pageContext.nextImage && <Link
+        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+        to={`/photogallery/${pageContext.nextImage}/`}
+      >next</Link>}
+    </nav>
+    <div className="min-h-screen flex flex-col justify-center">
       <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
           <GatsbyImage

src/pages/index.js

@@ -154,7 +154,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
               className={classnames(
                 'hover:underline inline-block p-3 px-5 my-3 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
                 isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} 
-              to="/photogallery"
+              to="/photogallery/"
             >
             Photography Gallery
             </Link>

src/pages/photogallery.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import { navigate } from 'gatsby';
 import { Helmet } from 'react-helmet';
 
@@ -19,13 +19,23 @@ const GalleryPage = ({ data }) => {
       <title>Photo Gallery | Chuck Dries</title>
       <body className="bg-black text-white" />
     </Helmet>
-    <div className="bg-black min-h-screen 2xl:container">
+    <nav className="mt-0 mb-4">
       <button
-        className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
+        className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
         onClick={() => navigate(-1)}
         type="button"
       >back</button>
-      <h1 className="text-5xl mt-3 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
+      <Link
+        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+        to="/"
+      >home</Link>
+      <Link
+        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+        to="/photogallery/"
+      >gallery</Link>
+    </nav>
+    <div className="bg-black min-h-screen 2xl:container">
+      <h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
       <div className="mx-auto">
         <MasonryGallery
           images={images}