gatsby-node.js

@@ -4,11 +4,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions;
 
   const noteTemplate = path.resolve(`src/templates/note.tsx`);
-  const result = await graphql(`
-    {
+  const result = await graphql(`{
     allMdx(
-        limit: 10
-        filter: { fileAbsolutePath: { glob: "**/src/notes/*" } }
+      limit: 10,
+      filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}
     ) {
       edges {
         node {
@@ -19,40 +18,20 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         }
       }
     }
-    }
-  `);
+  }`);
 
   if (result.errors) {
     reporter.panicOnBuild(`Error while running GraphQL query.`);
     return;
   }
 
-  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) => {
+  result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
-      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}`,
+      path: `/notes/${node.frontmatter.path}`,
       component: noteTemplate,
       context: {
         id: node.id,
-      },
+      }
     });
   });
 }

src/pages/404.tsx

@@ -1,17 +1,13 @@
-import { PageProps } from 'gatsby';
 import React from 'react';
 import Navbar from "../components/navbar";
 
-export default ({ location }: PageProps): JSX.Element => {
-  const messages = [
+export default ({ location }) => {
+  console.log(location);
+  return <>
+    <Navbar />
     <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>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)]}
+    </p>
   </>;
 };

src/pages/notes.module.css

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

src/pages/notes.tsx

@@ -0,0 +1,41 @@
+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

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

src/templates/notes.tsx

@@ -1,64 +0,0 @@
-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
-        }
-      }
-    }
-  }
-`