update to gatsby 3

package.json

@@ -15,18 +15,18 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.18",
     "@mdx-js/react": "^1.6.18",
-    "gatsby": "^2.24.63",
-    "gatsby-plugin-mdx": "^1.2.41",
+    "gatsby": "^3.0.0",
+    "gatsby-plugin-mdx": "^2.4.0",
     "gatsby-plugin-mdx-frontmatter": "^0.0.2",
-    "gatsby-plugin-react-helmet": "^3.3.11",
-    "gatsby-plugin-typography": "^2.5.11",
-    "gatsby-remark-prismjs": "^3.5.13",
-    "gatsby-remark-smartypants": "^2.3.11",
-    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby-plugin-react-helmet": "^4.4.0",
+    "gatsby-plugin-typography": "^3.4.0",
+    "gatsby-remark-prismjs": "^5.1.0",
+    "gatsby-remark-smartypants": "^4.1.0",
+    "gatsby-source-filesystem": "^3.4.0",
+    "gatsby-transformer-remark": "^4.1.0",
     "prismjs": "^1.21.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-typography": "^0.16.19",
     "typography": "^0.16.19"
@@ -36,8 +36,8 @@
     "@typescript-eslint/parser": "^4.2.0",
     "eslint": "^7.9.0",
     "eslint-loader": "^4.0.2",
-    "gatsby-plugin-eslint": "^2.0.8",
-    "prettier": "2.1.1",
+    "gatsby-plugin-eslint": "^3.0.0",
+    "prettier": "2.2.1",
     "typescript": "^4.0.3"
   }
 }

src/components/item.tsx

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

src/components/pagination.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './pagination.module.css';
+import { prevPageLink, paginationNav, nextPageLink } from './pagination.module.css';
 
 interface Pagination {
   currentPage: number;
@@ -12,18 +12,18 @@ export default ({
   numPages,
   rootPath,
 }: Pagination): JSX.Element => {
-  let prevPageLink = null;
+  let prevPageLinkItem = null;
   if (currentPage === 2) {
-    prevPageLink = (
-      <a href={rootPath} className={style.prevPageLink}>
+    prevPageLinkItem = (
+      <a href={rootPath} className={prevPageLink}>
         &lt;&lt;
       </a>
     );
   } else if (currentPage !== 1) {
-    prevPageLink = (
+    prevPageLinkItem = (
       <a
         href={rootPath + '/' + (currentPage - 1)}
-        className={style.prevPageLink}
+        className={prevPageLink}
       >
         &lt;&lt;
       </a>
@@ -32,13 +32,13 @@ export default ({
 
   if (numPages !== 1) {
     return (
-      <p className={style.paginationNav}>
-        {prevPageLink}
+      <p className={paginationNav}>
+        {prevPageLinkItem}
         {currentPage}
         {currentPage !== numPages && (
           <a
             href={rootPath + '/' + (currentPage + 1)}
-            className={style.nextPageLink}
+            className={nextPageLink}
           >
             &gt;&gt;
           </a>

src/templates/notes.tsx

@@ -7,7 +7,7 @@ import Navbar from '../components/navbar';
 import PaginationNav from '../components/pagination';
 import React from 'react';
 import { graphql } from 'gatsby';
-import style from './notes.module.css';
+import { noteTitle } from './notes.module.css';
 
 export default ({ data, pageContext }): JSX.Element => {
   const posts = data.allMdx.edges;
@@ -20,7 +20,7 @@ export default ({ data, pageContext }): JSX.Element => {
         const frontmatter = node.frontmatter;
         return (
           <article key={frontmatter.title}>
-            <div className={style.noteTitle}>
+            <div className={noteTitle}>
               <h3>
                 <a href={`${rootPath + '/' + frontmatter.path}`}>
                   {frontmatter.title}