paginate projects

.eslintrc.js

@@ -1,14 +1,9 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: [
-    '@typescript-eslint',
-  ],
+  plugins: ['@typescript-eslint'],
   globals: {
     __PATH_PREFIX__: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
-};
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+};

.prettierrc

@@ -1,4 +1,4 @@
 {
-  "arrowParens": "avoid",
-  "semi": false
+  "singleQuote": true,
+  "jsxSingleQuote": true,
 }

README.md

@@ -1,45 +1,3 @@
-<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
-<p align="center">
-  <a href="https://www.gatsbyjs.com">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby's hello-world starter
-</h1>
-
-Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
-
-_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
-
-## 🚀 Quick start
-
-1.  **Create a Gatsby site.**
-
-    Use the Gatsby CLI to create a new site, specifying the hello-world starter.
-
-    ```shell
-    # create a new Gatsby site using the hello-world starter
-    gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
-    ```
-
-1.  **Start developing.**
-
-    Navigate into your new site’s directory and start it up.
-
-    ```shell
-    cd my-hello-world-starter/
-    gatsby develop
-    ```
-
-1.  **Open the source code and start editing!**
-
-    Your site is now running at `http://localhost:8000`!
-
-    _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._
-
-    Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
-
 ## 🧐 What's inside?
 
 A quick look at the top-level files and directories you'll see in a Gatsby project.
@@ -74,26 +32,4 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
 
 8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
 
-9.  **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
-
-10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
-
-11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-12. **`README.md`**: A text file containing useful reference information about your project.
-
-## 🎓 Learning Gatsby
-
-Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
-
-- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
-
-- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
-
-## 💫 Deploy
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world)
-
-<!-- AUTO-GENERATED-CONTENT:END -->
+9.  **`README.md`**: A text file containing useful reference information about your project.

gatsby-config.js

@@ -1,8 +1,4 @@
-/**
- * Configure your Gatsby site with this file.
- *
- * See: https://www.gatsbyjs.com/docs/gatsby-config/
- */
+/* eslint-env node */
 
 module.exports = {
   plugins: [
@@ -21,6 +17,13 @@ module.exports = {
         path: `${__dirname}/src/notes`,
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'notes',
+        path: `${__dirname}/src/projects`,
+      },
+    },
     {
       resolve: 'gatsby-plugin-typography',
       options: {
@@ -41,7 +44,7 @@ module.exports = {
               // you may use this to prevent Prism from re-processing syntax.
               // This is an uncommon use-case though;
               // If you're unsure, it's best to use the default value.
-              classPrefix: "language-",
+              classPrefix: 'language-',
               // This is used to allow setting a language for inline code
               // (i.e. single backticks) by creating a separator.
               // This separator is a string and will do no white-space
@@ -71,8 +74,8 @@ module.exports = {
               // existing language" below.
               languageExtensions: [
                 {
-                  language: "superscript",
-                  extend: "javascript",
+                  language: 'superscript',
+                  extend: 'javascript',
                   definition: {
                     superscript_types: /(SuperType)/,
                   },
@@ -86,8 +89,8 @@ module.exports = {
               // Customize the prompt used in shell output
               // Values below are default
               prompt: {
-                user: "root",
-                host: "localhost",
+                user: 'root',
+                host: 'localhost',
                 global: false,
               },
               // By default the HTML entities <>&'" are escaped.
@@ -100,13 +103,13 @@ module.exports = {
             resolve: 'gatsby-remark-smartypants',
             options: {
               dashes: 'oldschool',
-            }
+            },
           },
-        ]
-      }
+        ],
+      },
     },
     {
-      resolve: 'gatsby-plugin-mdx-frontmatter'
+      resolve: 'gatsby-plugin-mdx-frontmatter',
     },
   ],
 };

gatsby-node.js

@@ -1,14 +1,36 @@
-const path = require("path");
+/* eslint-env node */
+const path = require('path');
 
-exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions;
-
-  const noteTemplate = path.resolve(`src/templates/note.tsx`);
+/**
+ * Generates a set of pages that are blog-like, where there should be an
+ * "landing page" that needs to be paginated followed by individual items.
+ *
+ * This function does two essential features:
+ *  1. renders individual pages
+ *  2. renders index pages with context needed for pagination
+ *
+ * @param {function} createPage Gatsby createPage function
+ * @param {function} graphql Gatsby graphql function
+ * @param {object} reporter Gatbsy reporter object
+ * @param {string} queryAbsolutePathGlob The source code glob to find the pages
+ * for rendering
+ * @param {string} siteRootPath The public root path to generate the pages under
+ * @param {string} indexFilePath The source code path to the index template file
+ * @param {string} itemFilePath The source code path to the item template file
+ */
+async function generatePages(
+  createPage,
+  graphql,
+  reporter,
+  queryAbsolutePathGlob,
+  siteRootPath,
+  indexFilePath,
+  itemFilePath
+) {
   const result = await graphql(`
     {
       allMdx(
-        limit: 10
-        filter: { fileAbsolutePath: { glob: "**/src/notes/*" } }
+        filter: { fileAbsolutePath: { glob: "${queryAbsolutePathGlob}" } }
       ) {
         edges {
           node {
@@ -28,37 +50,61 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return;
   }
 
-  const posts = result.data.allMdx.edges.filter(({ node }) => !node.frontmatter.hidden);
+  const posts = result.data.allMdx.edges.filter(
+    ({ node }) => !node.frontmatter.hidden
+  );
   const postsPerPage = 10;
   const numPages = Math.ceil(posts.length / postsPerPage);
-  const rootPath = "/notes";
 
   Array.from({ length: numPages }).forEach((_, i) => {
     createPage({
-      path: rootPath + (i === 0 ? '' : `/${i + 1}`),
-      component: path.resolve("./src/templates/notes.tsx"),
+      path: siteRootPath + (i === 0 ? '' : `/${i + 1}`),
+      component: path.resolve(indexFilePath),
       context: {
         limit: postsPerPage,
         skip: i * postsPerPage,
         numPages,
         currentPage: i + 1,
-        rootPath,
+        rootPath: siteRootPath,
       },
-    })
+    });
   });
 
   // Must decouple to ensure hidden pages are still rendered, just excluded from
   // notes mapping
   result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
-      path: `${rootPath}/${node.frontmatter.path}`,
-      component: noteTemplate,
+      path: `${siteRootPath}/${node.frontmatter.path}`,
+      component: path.resolve(itemFilePath),
       context: {
         id: node.id,
       },
     });
   });
 }
+
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions;
+  await generatePages(
+    createPage,
+    graphql,
+    reporter,
+    '**/src/notes/*',
+    '/notes',
+    './src/templates/notes.tsx',
+    './src/templates/note.tsx'
+  );
+  await generatePages(
+    createPage,
+    graphql,
+    reporter,
+    '**/src/projects/*',
+    '/projects',
+    './src/templates/projects.tsx',
+    './src/templates/note.tsx'
+  );
+};
+
 exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
   createTypes(`
     type Mdx implements Node {

src/components/item.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import style from "./item.module.css";
-import { Link } from "gatsby";
+import React from 'react';
+import style from './item.module.css';
+import { Link } from 'gatsby';
 
 export default (props) => (
   <Link to={props.to} className={style.projectItem}>
     <h3 className={style.projectTitle}>{props.title}</h3>
     <p className={style.projectSubtitle}>{props.subtitle}</p>
   </Link>
-);
+);

src/components/navbar.tsx

@@ -1,20 +1,31 @@
 import React from 'react';
-import { Link } from "gatsby";
+import { Link } from 'gatsby';
 
-const ExactLink = (props) => <Link
-  to={props.to}
-  style={{ textDecoration: "none" }}
-  activeStyle={{ color: "red" }}
-  partiallyActive={!props.home}>
-  {props.children}
-</Link >;
+const ExactLink = (props) => (
+  <Link
+    to={props.to}
+    style={{ textDecoration: 'none' }}
+    activeStyle={{ color: 'red' }}
+    partiallyActive={!props.home}
+  >
+    {props.children}
+  </Link>
+);
 
 export default function Navbar() {
   return (
     <nav>
-      <h1><ExactLink to="/" home={true}>Edward Shen</ExactLink></h1>
-      <h3><ExactLink to="/projects">Projects</ExactLink></h3>
-      <h3><ExactLink to="/notes">Notes</ExactLink></h3>
-    </nav >
+      <h1>
+        <ExactLink to='/' home={true}>
+          Edward Shen
+        </ExactLink>
+      </h1>
+      <h3>
+        <ExactLink to='/projects'>Projects</ExactLink>
+      </h3>
+      <h3>
+        <ExactLink to='/notes'>Notes</ExactLink>
+      </h3>
+    </nav>
   );
-};
+}

src/components/pagination.module.css

@@ -0,0 +1,7 @@
+.prev-page-link {
+  margin-right: 10px;
+}
+
+.next-page-link {
+  margin-left: 10px;
+}

src/components/pagination.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import style from './pagination.module.css';
+
+interface Pagination {
+  currentPage: number;
+  numPages: number;
+  rootPath: string;
+}
+
+export default ({
+  currentPage,
+  numPages,
+  rootPath,
+}: Pagination): JSX.Element => {
+  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>
+    );
+  }
+
+  if (numPages !== 1) {
+    return (
+      <p className={style.paginationNav}>
+        {prevPageLink}
+        {currentPage}
+        {currentPage !== numPages && (
+          <a
+            href={rootPath + '/' + (currentPage + 1)}
+            className={style.nextPageLink}
+          >
+            &gt;&gt;
+          </a>
+        )}
+      </p>
+    );
+  }
+
+  return null;
+};

src/notes/2020-01-01-lorem-ipsum.mdx

@@ -99,7 +99,7 @@ Indented code
 
 Block code "fences"
 
-```
+```markdown
 Sample text here...
 ```
 

src/pages/404.tsx

@@ -1,17 +1,22 @@
 import { PageProps } from 'gatsby';
 import React from 'react';
-import Navbar from "../components/navbar";
+import Navbar from '../components/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>.
+      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>,
-    <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)]}
-  </>;
+  return (
+    <>
+      <Navbar />
+      {messages[Math.floor(Math.random() * messages.length)]}
+    </>
+  );
 };

src/pages/projects/index.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import Navbar from '../../components/navbar';
-import Item from "../../components/item";
-
-export default (): JSX.Element => (
-  <>
-    <Navbar />
-    <Item
-      title="Shlink"
-      subtitle="subtitle"
-      to="test"
-    />
-    <Item
-      title="hello world"
-      subtitle="subtitle"
-    />
-    <Item
-      title="hello world"
-      subtitle="subtitle"
-    />
-  </>
-);

src/projects/shlink.mdx

@@ -0,0 +1,7 @@
+---
+path: "shlink"
+date: 2020-01-01
+title: "Shlink"
+---
+
+Hello world

src/templates/note.tsx

@@ -1,27 +1,30 @@
-import React from "react";
+import React from 'react';
 import Navbar from '../components/navbar';
-import { graphql } from "gatsby";
+import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 export default ({ data }) => {
   const { frontmatter, body } = data.mdx;
 
-  return <>
-    <Navbar />
-    <main>
-      <h1>{frontmatter.title}</h1>
-      <MDXRenderer>{body}</MDXRenderer>
-    </main>
-  </>;
+  return (
+    <>
+      <Navbar />
+      <main>
+        <h1>{frontmatter.title}</h1>
+        <MDXRenderer>{body}</MDXRenderer>
+      </main>
+    </>
+  );
 };
 
 export const query = graphql`
-query NotesIndexQuery($id: String!) {
-  mdx(id: {eq: $id}) {
-    frontmatter {
-      title
+  query NotesItemQuery($id: String!) {
+    mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+      }
+      tableOfContents
+      body
     }
-    tableOfContents
-    body
   }
-}`;
+`;

src/templates/notes.module.css

@@ -2,11 +2,3 @@
   display: flex;
   justify-content: space-between;
 }
-
-.prev-page-link {
-  margin-right: 10px;
-}
-
-.next-page-link {
-  margin-left: 10px;
-}

src/templates/notes.tsx

@@ -3,63 +3,52 @@
  * See note.tsx for rendering a single note.
  */
 
-import React from "react";
-import Navbar from "../components/navbar";
-import { graphql } from "gatsby";
-import style from "./notes.module.css";
+import Navbar from '../components/navbar';
+import PaginationNav from '../components/pagination';
+import React from 'react';
+import { graphql } from 'gatsby';
+import style from './notes.module.css';
 
 export default ({ data, pageContext }): JSX.Element => {
   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>;
-  }
-
-  const shouldDisplayNav = numPages !== 1;
 
   return (
     <>
       <Navbar />
       {posts.map(({ node }) => {
-        const frontmatter = node.frontmatter
+        const frontmatter = node.frontmatter;
         return (
           <article key={frontmatter.title}>
             <div className={style.noteTitle}>
               <h3>
-                <a href={`${rootPath + '/' + frontmatter.path}`}>{frontmatter.title}</a>
+                <a href={`${rootPath + '/' + frontmatter.path}`}>
+                  {frontmatter.title}
+                </a>
               </h3>
               <time dateTime={frontmatter.date}>{frontmatter.date}</time>
             </div>
             <p>{node.excerpt}</p>
           </article>
-        )
+        );
       })}
-      {shouldDisplayNav &&
-        <p className={style.paginationNav}>
-          {prevPageLink}
-          {currentPage}
-          {currentPage !== numPages &&
-            <a
-              href={rootPath + '/' + (currentPage + 1)}
-              className={style.nextPageLink}>
-              &gt;&gt;
-            </a>
-          }
-        </p>
-      }
+      <PaginationNav
+        currentPage={currentPage}
+        numPages={numPages}
+        rootPath={rootPath}
+      />
     </>
-  )
-}
+  );
+};
 
 export const query = graphql`
-  query IndexQuery($skip: Int!, $limit: Int!) {
+  query NotesIndexQuery($skip: Int!, $limit: Int!) {
     allMdx(
       sort: { order: DESC, fields: [frontmatter___date] }
-      filter: { fileAbsolutePath: { glob: "**/src/notes/*" }, frontmatter: {hidden: {ne: true}} }
+      filter: {
+        fileAbsolutePath: { glob: "**/src/notes/*" }
+        frontmatter: { hidden: { ne: true } }
+      }
       limit: $limit
       skip: $skip
     ) {
@@ -76,4 +65,4 @@ export const query = graphql`
       }
     }
   }
-`
+`;

src/templates/projects.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import Navbar from '../components/navbar';
+import PaginationNav from '../components/pagination';
+import Item from '../components/item';
+import { graphql } from 'gatsby';
+
+export default ({ data, pageContext }): JSX.Element => {
+  const posts = data.allMdx.edges;
+  const { currentPage, numPages, rootPath } = pageContext;
+
+  return (
+    <>
+      <Navbar />
+      {posts.map(({ node }) => {
+        const frontmatter = node.frontmatter;
+        return (
+          <Item
+            title={frontmatter.title}
+            to={rootPath + '/' + frontmatter.path}
+          ></Item>
+        );
+      })}
+      <PaginationNav
+        currentPage={currentPage}
+        numPages={numPages}
+        rootPath={rootPath}
+      />
+    </>
+  );
+};
+
+export const query = graphql`
+  query ProjectsIndexQuery($skip: Int!, $limit: Int!) {
+    allMdx(
+      sort: { order: DESC, fields: [frontmatter___date] }
+      filter: {
+        fileAbsolutePath: { glob: "**/src/projects/*" }
+        frontmatter: { hidden: { ne: true } }
+      }
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          excerpt(pruneLength: 250)
+          frontmatter {
+            title
+            date(formatString: "YYYY-MM-DD")
+            path
+          }
+          id
+        }
+      }
+    }
+  }
+`;

src/utils/typography.js

@@ -1,20 +1,25 @@
-import Typography from "typography";
+import Typography from 'typography';
 
 const typography = new Typography({
   baseFontSize: '18px',
   baseLineHeight: 1.666,
   headerFontFamily: [
-    'M PLUS 1p', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'
+    'M PLUS 1p',
+    'Helvetica Neue',
+    'Segoe UI',
+    'Helvetica',
+    'Arial',
+    'sans-serif',
   ],
   bodyFontFamily: ['Georgia', 'serif'],
   googleFonts: [
     {
-      name: "M PLUS 1p",
+      name: 'M PLUS 1p',
       styles: ['100', '400'],
-    }
-  ]
+    },
+  ],
 });
 
 // Export helper functions
 export const { scale, rhythm, options } = typography;
-export default typography;
+export default typography;