style pagination controls

gatsby-node.js

@@ -4,34 +4,55 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions;
 
   const noteTemplate = path.resolve(`src/templates/note.tsx`);
-  const result = await graphql(`{
-    allMdx(
-      limit: 10,
-      filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}
-    ) {
-      edges {
-        node {
-          frontmatter {
-            path
+  const result = await graphql(`
+    {
+      allMdx(
+        limit: 10
+        filter: { fileAbsolutePath: { glob: "**/src/notes/*" } }
+      ) {
+        edges {
+          node {
+            frontmatter {
+              path
+            }
+            id
           }
-          id
         }
       }
     }
-  }`);
+  `);
 
   if (result.errors) {
     reporter.panicOnBuild(`Error while running GraphQL query.`);
     return;
   }
 
-  result.data.allMdx.edges.forEach(({ node }) => {
+  const posts = result.data.allMdx.edges;
+  const postsPerPage = 10;
+  const numPages = Math.ceil(posts.length / postsPerPage);
+  const rootPath = "/notes";
+
+  Array.from({ length: numPages }).forEach((_, i) => {
     createPage({
-      path: `/notes/${node.frontmatter.path}`,
+      path: rootPath + (i === 0 ? '' : `/${i + 1}`),
+      component: path.resolve("./src/templates/notes.tsx"),
+      context: {
+        limit: postsPerPage,
+        skip: i * postsPerPage,
+        numPages,
+        currentPage: i + 1,
+        rootPath,
+      },
+    })
+  });
+
+  posts.forEach(({ node }) => {
+    createPage({
+      path: `${rootPath}/${node.frontmatter.path}`,
       component: noteTemplate,
       context: {
         id: node.id,
-      }
+      },
     });
   });
-}
+}

src/pages/404.tsx

@@ -1,13 +1,17 @@
+import { PageProps } from 'gatsby';
 import React from 'react';
 import Navbar from "../components/navbar";
 
-export default ({ location }) => {
-  console.log(location);
-  return <>
-    <Navbar />
+export default ({ location }: PageProps): JSX.Element => {
+  const messages = [
     <p>
       In your attempt to search for <code>{location.pathname}</code>, you seem to
       have gotten lost instead. Fret not, for there is always a path <a href="/">home</a>.
-    </p>
+    </p>,
+    <p>Not all who wander are lost, but you seem to be. Go <a href="/">home</a>?</p>
+  ];
+  return <>
+    <Navbar />
+    {messages[Math.floor(Math.random() * messages.length)]}
   </>;
-};
+};

src/pages/notes.module.css

@@ -1,4 +0,0 @@
-.note-title {
-  display: flex;
-  justify-content: space-between;
-}

src/pages/notes.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import Navbar from "../components/navbar";
-import { graphql } from "gatsby";
-import style from "./notes.module.css";
-
-export default ({ data }) => {
-  console.log(data);
-  const posts = data.allMdx.edges;
-  return <>
-    <Navbar />
-    {
-      posts.map(({ node }) => {
-        return <article>
-          <div className={style.noteTitle}>
-            <h3><a href={`${node.frontmatter.path}`}>{node.frontmatter.title}</a></h3>
-            <time dateTime={node.frontmatter.date}>{node.frontmatter.date}</time>
-          </div>
-          <p>{node.excerpt}</p>
-        </article>;
-      })
-    }
-  </>;
-};
-
-export const query = graphql`
-query IndexQuery {
-  allMdx(sort: {order: ASC, fields: [fileAbsolutePath]}, filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}) {
-    edges {
-      node {
-        excerpt(pruneLength: 250)
-        frontmatter {
-          title
-          date(formatString: "YYYY-MM-DD")
-          path
-        }
-        id
-      }
-    }
-  }
-}
-`;

src/templates/notes.module.css

@@ -0,0 +1,12 @@
+.note-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.prev-page-link {
+  margin-right: 10px;
+}
+
+.next-page-link {
+  margin-left: 10px;
+}

src/templates/notes.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import Navbar from "../components/navbar";
+import { graphql, PageProps } from "gatsby";
+import style from "./notes.module.css";
+
+export default ({ data, pageContext }) => {
+  const posts = data.allMdx.edges;
+  const { currentPage, numPages, rootPath } = pageContext;
+  let prevPageLink = null;
+
+  if (currentPage === 2) {
+    prevPageLink = <a href={rootPath} className={style.prevPageLink}>&lt;&lt;</a>;
+  } else if (currentPage !== 1) {
+    prevPageLink = <a href={rootPath + '/' + (currentPage - 1)} className={style.prevPageLink}>&lt;&lt;</a>;
+  }
+
+  return (
+    <>
+      <Navbar />
+      {posts.map(({ node }) => {
+        const frontmatter = node.frontmatter
+        return (
+          <article key={frontmatter.title}>
+            <div className={style.noteTitle}>
+              <h3>
+                <a href={`${rootPath + '/' + frontmatter.path}`}>{frontmatter.title}</a>
+              </h3>
+              <time dateTime={frontmatter.date}>{frontmatter.date}</time>
+            </div>
+            <p>{node.excerpt}</p>
+          </article>
+        )
+      })}
+      <p className={style.paginationNav}>
+        {prevPageLink}
+        {currentPage}
+        {currentPage !== numPages && <a href={rootPath + '/' + (currentPage + 1)} className={style.nextPageLink}>&gt;&gt;</a>}
+      </p>
+    </>
+  )
+}
+
+export const query = graphql`
+  query IndexQuery($skip: Int!, $limit: Int!) {
+    allMdx(
+      sort: { order: DESC, fields: [frontmatter___date] }
+      filter: { fileAbsolutePath: { glob: "**/src/notes/*" } }
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          excerpt(pruneLength: 250)
+          frontmatter {
+            title
+            date(formatString: "YYYY-MM-DD")
+            path
+          }
+          id
+        }
+      }
+    }
+  }
+`