feat: implement page navigation in resource pages

gatsby-node.js

@@ -58,6 +58,7 @@ const createResources = async ({ createPage, graphql }) => {
           edges {
             node {
               relativePath
+              relativeDirectory
               sourceInstanceName
             }
           }
@@ -73,6 +74,7 @@ const createResources = async ({ createPage, graphql }) => {
           edges {
             node {
               relativePath
+              relativeDirectory
               sourceInstanceName
             }
           }
@@ -118,6 +120,7 @@ const createResources = async ({ createPage, graphql }) => {
         component: resourcePage,
         context: {
           file: node.relativePath,
+          directory: node.relativeDirectory,
           layout: LAYOUT_RESOURCES,
         },
       })

src/templates/resourcePage.tsx

@@ -1,10 +1,13 @@
 import { graphql } from "gatsby"
 import React, { FC, Fragment } from "react"
+import descend from "ramda/es/descend"
+import sortWith from "ramda/es/sortWith"
 
 import { Footer } from "../components/Footer"
 import { Header } from "../components/Header"
 import { Markdown } from "../components/Markdown"
 import { PageContent } from "../components/PageContent"
+import { PageNavigation } from "../components/PageNavigation"
 import { SEO } from "../components/SEO"
 import useSidebar from "../hooks/useSidebar"
 import { buildToc } from "../utils"
@@ -30,6 +33,29 @@ const ResourcePage: FC<any> = ({ data }) => {
       toc.length
   )
 
+  const pages = sortWith([
+    descend((f: any) => {
+      if (f.node.relativePath.includes("intro")) {
+        return 1;
+      }
+
+      return -1;
+    })
+  ], data.allFile.edges)
+  const currentIndex = pages.findIndex(
+    (x: any) => x.node.relativePath === relativePath
+  )
+
+  const nextPage = pages[currentIndex + 1] && {
+    title: pages[currentIndex + 1].node.title.frontmatter.title,
+    relativePath: pages[currentIndex + 1].node.relativePath,
+  }
+
+  const previousPage = pages[currentIndex - 1] && {
+    title: pages[currentIndex - 1].node.title.frontmatter.title,
+    relativePath: pages[currentIndex - 1].node.relativePath,
+  }
+
   return (
     <Fragment>
       <SEO
@@ -50,6 +76,7 @@ const ResourcePage: FC<any> = ({ data }) => {
         content={
           <>
             <Markdown content={body} />
+            <PageNavigation next={nextPage} previous={previousPage} />
             <Footer />
           </>
         }
@@ -64,7 +91,7 @@ const ResourcePage: FC<any> = ({ data }) => {
 export default ResourcePage
 
 export const query = graphql`
-  query ResourcePage($file: String!) {
+  query ResourcePage($file: String!, $directory: String!) {
     file(relativePath: { eq: $file }) {
       relativePath
       post: childMdx {
@@ -93,5 +120,20 @@ export const query = graphql`
         timeToRead
       }
     }
+    allFile(
+      filter: { relativeDirectory: { eq: $directory } }
+      sort: { fields: relativePath, order: ASC }
+    ) {
+      edges {
+        node {
+          relativePath
+          title: childMdx {
+            frontmatter {
+              title
+            }
+          }
+        }
+      }
+    }
   }
 `