Run prettier

.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,
 }

gatsby-config.js

@@ -41,7 +41,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 +71,8 @@ module.exports = {
               // existing language" below.
               languageExtensions: [
                 {
-                  language: "superscript",
-                  extend: "javascript",
+                  language: 'superscript',
+                  extend: 'javascript',
                   definition: {
                     superscript_types: /(SuperType)/,
                   },
@@ -86,8 +86,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 +100,13 @@ module.exports = {
             resolve: 'gatsby-remark-smartypants',
             options: {
               dashes: 'oldschool',
-            }
+            },
           },
-        ]
-      }
+        ],
+      },
     },
     {
-      resolve: 'gatsby-plugin-mdx-frontmatter'
+      resolve: 'gatsby-plugin-mdx-frontmatter',
     },
   ],
 };

gatsby-node.js

@@ -1,4 +1,4 @@
-const path = require("path");
+const path = require('path');
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions;
@@ -28,15 +28,17 @@ 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";
+  const rootPath = '/notes';
 
   Array.from({ length: numPages }).forEach((_, i) => {
     createPage({
       path: rootPath + (i === 0 ? '' : `/${i + 1}`),
-      component: path.resolve("./src/templates/notes.tsx"),
+      component: path.resolve('./src/templates/notes.tsx'),
       context: {
         limit: postsPerPage,
         skip: i * postsPerPage,
@@ -44,7 +46,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         currentPage: i + 1,
         rootPath,
       },
-    })
+    });
   });
 
   // Must decouple to ensure hidden pages are still rendered, just excluded from
@@ -58,7 +60,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       },
     });
   });
-}
+};
 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/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 +1,12 @@
-import React from "react";
+import React from 'react';
 import Navbar from '../../components/navbar';
-import Item from "../../components/item";
+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"
-    />
+    <Item title='Shlink' subtitle='subtitle' to='test' />
+    <Item title='hello world' subtitle='subtitle' />
+    <Item title='hello world' subtitle='subtitle' />
   </>
 );

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 NotesIndexQuery($id: String!) {
+    mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+      }
+      tableOfContents
+      body
     }
-    tableOfContents
-    body
   }
-}`;
+`;

src/templates/notes.tsx

@@ -3,10 +3,10 @@
  * 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 React from 'react';
+import Navbar from '../components/navbar';
+import { graphql } from 'gatsby';
+import style from './notes.module.css';
 
 export default ({ data, pageContext }): JSX.Element => {
   const posts = data.allMdx.edges;
@@ -14,9 +14,20 @@ export default ({ data, pageContext }): JSX.Element => {
   let prevPageLink = null;
 
   if (currentPage === 2) {
-    prevPageLink = <a href={rootPath} className={style.prevPageLink}>&lt;&lt;</a>;
+    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>;
+    prevPageLink = (
+      <a
+        href={rootPath + '/' + (currentPage - 1)}
+        className={style.prevPageLink}
+      >
+        &lt;&lt;
+      </a>
+    );
   }
 
   const shouldDisplayNav = numPages !== 1;
@@ -25,41 +36,47 @@ export default ({ data, pageContext }): JSX.Element => {
     <>
       <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 &&
+      {shouldDisplayNav && (
         <p className={style.paginationNav}>
           {prevPageLink}
           {currentPage}
-          {currentPage !== numPages &&
+          {currentPage !== numPages && (
             <a
               href={rootPath + '/' + (currentPage + 1)}
-              className={style.nextPageLink}>
+              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/*" }, frontmatter: {hidden: {ne: true}} }
+      filter: {
+        fileAbsolutePath: { glob: "**/src/notes/*" }
+        frontmatter: { hidden: { ne: true } }
+      }
       limit: $limit
       skip: $skip
     ) {
@@ -76,4 +93,4 @@ export const query = graphql`
       }
     }
   }
-`
+`;

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;