Merge pull request #359 from dfireBird/feature-page-navigation

Feature page navigation

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/components/PageNavigation/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface IPageNavigationPage {
+  relativePath: string
+  title: string
+}
+
+interface IPageContentProps {
+  next?: IPageNavigationPage
+  previous?: IPageNavigationPage
+}
+
+export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
+  return (
+    <SC.Content>
+      {previous ? (
+        <SC.PageContent>
+          <SC.Text>Previous</SC.Text>
+          <SC.NavLink to={`/resources/${previous.relativePath}`}>
+            <SC.PreviousArrow />
+            <SC.PageTitle>
+              {previous.title}
+            </SC.PageTitle>
+          </SC.NavLink>
+        </SC.PageContent>
+      ) : (
+        <div> </div>
+      )}
+      {next ? (
+        <SC.PageContent>
+          <SC.Text>Next</SC.Text>
+          <SC.NavLink to={`/resources/${next.relativePath}`}>
+            <SC.PageTitle>
+              {next.title}
+            </SC.PageTitle>
+            <SC.NextArrow />
+          </SC.NavLink>
+        </SC.PageContent>
+      ) : (
+        <div> </div>
+      )}
+    </SC.Content>
+  )
+}

src/components/PageNavigation/styles.tsx

@@ -0,0 +1,72 @@
+import styled from "styled-components"
+import { Link } from "gatsby"
+import fontFamily from "../../design/typography"
+import ArrowRight from "../../icons/arrow-right.svg"
+
+export const Content = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+`
+
+export const Text = styled.p`
+  font-family: ${fontFamily.body};
+  font-weight: 700;
+  font-size: 18px;
+  margin: 0 19px 7px 17px;
+`
+
+export const NavLink = styled(Link)`
+  display: flex;
+  text-decoration: none;
+  text-align: right;
+
+  & > svg ~ p {
+    text-align: left;
+  }
+
+  &:hover,
+  &:focus {
+    color: ${(props) => props.theme.main.foreground};
+    text-decoration: underline;
+  }
+`
+
+export const PageContent = styled.div`
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+
+  &:last-of-type {
+    align-items: flex-end;
+  }
+
+  & > div {
+    display: flex;
+    justify-content: start;
+  }
+`
+
+export const PageTitle = styled(Text)`
+  margin: 0 10px;
+  margin-bottom: 0;
+  background: -webkit-linear-gradient(91.81deg, #feaf6d 0%, #ff70a5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`
+
+export const NextArrow = styled(ArrowRight)`
+  width: 8px;
+  path {
+    fill: #ff74a2;
+  }
+`
+
+export const PreviousArrow = styled(ArrowRight)`
+  width: 8px;
+  transform: rotate(180deg);
+  path {
+    fill: #feac71;
+  }
+`

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
+            }
+          }
+        }
+      }
+    }
   }
 `