chore(website): add simple pagination

.eslintrc

@@ -28,7 +28,7 @@
   },
   "overrides": [
     {
-      "files": ["docs/gatsby-*.js"],
+      "files": ["docs/*.js"],
       "rules": {
         "@typescript-eslint/no-var-requires": "off"
       }

docs/gatsby-node.js

@@ -1,5 +1,6 @@
 const path = require("path")
 const { createFilePath } = require("gatsby-source-filesystem")
+const { sortPostNodes } = require("./utils")
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
@@ -45,7 +46,13 @@ exports.createPages = async ({ graphql, actions }) => {
       {
         allMdx {
           nodes {
+            frontmatter {
+              title
+              order
+            }
+
             fields {
+              collection
               slug
             }
           }
@@ -54,7 +61,13 @@ exports.createPages = async ({ graphql, actions }) => {
     `,
   )
 
-  result.data.allMdx.nodes.forEach((node) => {
+  const { nodes } = result.data.allMdx
+  const sortedNodes = sortPostNodes(nodes)
+
+  sortedNodes.forEach((node, index) => {
+    const previous = index === 0 ? null : sortedNodes[index - 1]
+    const next =
+      index === sortedNodes.length - 1 ? null : sortedNodes[index + 1]
     const slug = node.fields.slug
     createPage({
       // we use the generated slug for the path
@@ -72,6 +85,10 @@ exports.createPages = async ({ graphql, actions }) => {
         // this is attached so `layout.js` knows to use the sidebar layout for
         // these pages
         layout: "docs",
+
+        // previous and next pages
+        previous,
+        next,
       },
     })
   })

docs/package.json

@@ -38,7 +38,7 @@
     "clean": "gatsby clean",
     "cleandev": "rm -rf node_modules .cache && yarn && gatsby develop",
     "format": "prettier --write \"src/**/*.js\"",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "devDependencies": {
     "prettier": "2.0.5"

docs/src/components/pagination.js

@@ -0,0 +1,26 @@
+import React from "react"
+import { Box, Link } from "@chakra-ui/core"
+import { Link as GatsbyLink } from "gatsby"
+
+export const Pagination = ({ previous, next }) => {
+  return (
+    <Box>
+      <ul>
+        {previous && (
+          <li>
+            <Link as={GatsbyLink} to={previous.fields.slug}>
+              {previous.frontmatter.title}
+            </Link>
+          </li>
+        )}
+        {next && (
+          <li>
+            <Link as={GatsbyLink} to={next.fields.slug}>
+              {next.frontmatter.title}
+            </Link>
+          </li>
+        )}
+      </ul>
+    </Box>
+  )
+}

docs/src/templates/docs.js

@@ -4,18 +4,24 @@ import { graphql } from "gatsby"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import SEO from "../components/seo"
 import { TableOfContents } from "../components/toc"
+import { Pagination } from "../components/pagination"
 
-const Docs = ({ data }) => {
+const Docs = ({ data, pageContext }) => {
+  const { previous, next } = pageContext
   const { body, frontmatter, fields, tableOfContents } = data.mdx
   const { title, description } = frontmatter
   const { slug } = fields
 
+  console.log("previous", previous)
+  console.log("next", next)
+
   return (
     <>
       <SEO title={title} description={description} slug={slug} />
       <Flex>
         <Box>
           <MDXRenderer>{body}</MDXRenderer>
+          <Pagination previous={previous} next={next} />
         </Box>
         <TableOfContents tableOfContents={tableOfContents} />
       </Flex>

docs/utils.js

@@ -0,0 +1,31 @@
+const _ = require("lodash/fp")
+
+const compareCollections = (
+  { fields: { collection: a } },
+  { fields: { collection: b } },
+) => {
+  // comparison when one or both are "main"
+  if (a === "main" && b === "main") return 0
+  if (a === "main" && b !== "main") return -1
+  if (a !== "main" && b === "main") return 1
+
+  // comparisons when neither are "main"
+  if (a < b) return -1
+  if (a > b) return 1
+  return 0
+}
+
+const groupByCollection = _.groupBy("fields.collection")
+const orderByOrderThenTitle = _.orderBy(
+  ["frontmatter.order", "frontmatter.title"],
+  ["asc", "asc"],
+)
+
+module.exports.sortPostNodes = nodes => {
+  const collections = groupByCollection(nodes)
+  const sortedCollectionNodes = _.values(collections).map(orderByOrderThenTitle)
+  const flattened = _.flatten(_.values(sortedCollectionNodes))
+  const allSorted = flattened.sort(compareCollections)
+
+  return allSorted
+}

docs/utils.spec.js

@@ -0,0 +1,31 @@
+const { sortPostNodes } = require("./utils")
+
+test("sortPostNodes", () => {
+  const nodes = [
+    { frontmatter: { title: "B" }, fields: { collection: "utilities" } },
+    {
+      frontmatter: { title: "A", order: 1 },
+      fields: { collection: "components" },
+    },
+    { frontmatter: { title: "B" }, fields: { collection: "components" } },
+    { frontmatter: { title: "C" }, fields: { collection: "components" } },
+    { frontmatter: { title: "B", order: 2 }, fields: { collection: "main" } },
+    { frontmatter: { title: "A" }, fields: { collection: "utilities" } },
+    { frontmatter: { title: "A", order: 1 }, fields: { collection: "main" } },
+  ]
+
+  const expected = [
+    { frontmatter: { title: "A", order: 1 }, fields: { collection: "main" } },
+    { frontmatter: { title: "B", order: 2 }, fields: { collection: "main" } },
+    {
+      frontmatter: { title: "A", order: 1 },
+      fields: { collection: "components" },
+    },
+    { frontmatter: { title: "B" }, fields: { collection: "components" } },
+    { frontmatter: { title: "C" }, fields: { collection: "components" } },
+    { frontmatter: { title: "A" }, fields: { collection: "utilities" } },
+    { frontmatter: { title: "B" }, fields: { collection: "utilities" } },
+  ]
+
+  expect(sortPostNodes(nodes)).toEqual(expected)
+})