[chore] Gatsby 5 migration, deps upgrade and minor fixes

.github/workflows/node.js.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
       - run: npm ci
       - run: npm test

.nvmrc

@@ -1 +1 @@
-16
+18

CONTRIBUTING.md

@@ -7,6 +7,7 @@ The Coding Train strives to be a respectful, friendly, and welcoming community.
 ## Guide For Newer Contributors
 
 Get an overview of the project in [README](https://github.com/CodingTrain/thecodingtrain.com#readme). If you are new to open source contributions, here are some useful guides that can help you get started:
+
 - [Git and GitHub for Poets](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV): A Coding Train video series for Git and GitHub beginners.
 - [Collaborating With Pull Requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests): A GitHub guide on pull requests.
 
@@ -15,23 +16,28 @@ Get an overview of the project in [README](https://github.com/CodingTrain/thecod
 Here are the types of contributions we are looking for this month:
 
 1. Share your creative work inspired by a coding challenge or tutorial in the showcase!
-    * You can find more information about submitting a showcase in the [Passenger Showcase Guide](http://thecodingtrain.com/guides/passenger-showcase-guide)
+
+   - You can find more information about submitting a showcase in the [Passenger Showcase Guide](http://thecodingtrain.com/guides/passenger-showcase-guide)
 
 2. Create a page for a Coding Challenge video! (https://github.com/CodingTrain/thecodingtrain.com/issues/155)
-    * Head to the [spreadsheet tracking challenges](https://docs.google.com/spreadsheets/d/1zt8KquMZN_j2-j4ezMsgeq-sRrgoCEAROwFS6LTS8oQ/edit#gid=1236591781) and sign up.
-    * For instructions, read the [Maintaining the website guide](https://thecodingtrain.com/guides/maintain-website-guide) on how to create a challenge page on the new website.  
-    * Note: If you are unable to complete the page, please add a note and remove your name from the spreadsheet.
+
+   - Head to the [spreadsheet tracking challenges](https://docs.google.com/spreadsheets/d/1zt8KquMZN_j2-j4ezMsgeq-sRrgoCEAROwFS6LTS8oQ/edit#gid=1236591781) and sign up.
+   - For instructions, read the [Maintaining the website guide](https://thecodingtrain.com/guides/maintain-website-guide) on how to create a challenge page on the new website.
+   - Note: If you are unable to complete the page, please add a note and remove your name from the spreadsheet.
 
 3. Add Related Challenges! (https://github.com/CodingTrain/thecodingtrain.com/issues/262)
-    * The `"relatedChallenges"` property specifies a list of challenges to be featured as suggested on the video page.
-    *  If it is an empty array and there are any coding challenges in the `"video"` section of the json file, those challenge(s) can be added to the field.
-    * You can find the JSON files for challenges in `/content/videos/challenges`.
+
+   - The `"relatedChallenges"` property specifies a list of challenges to be featured as suggested on the video page.
+   - If it is an empty array and there are any coding challenges in the `"video"` section of the json file, those challenge(s) can be added to the field.
+   - You can find the JSON files for challenges in `/content/videos/challenges`.
 
 4. More!
-    * You can find more things to [work on listed in issues](https://github.com/CodingTrain/thecodingtrain.com/issues).
+   - You can find more things to [work on listed in issues](https://github.com/CodingTrain/thecodingtrain.com/issues).
 
 ### Getting Started
+
 Here is a guide to the content structure of the website to help you through the process of contributing.
+
 - [Content Structure Guide](https://github.com/CodingTrain/thecodingtrain.com/blob/main/content/pages/guides/content-structure-guide.md)
 
 ### Issues
@@ -49,5 +55,4 @@ To find an issue that you want to fix, scan through the list. You may find that
 
 ### Development Environment
 
-Make sure you have Node.js version `16.x` as well as npm installed. You can find how to test your changes locally [here](https://github.com/CodingTrain/thecodingtrain.com#development-info).
-
+Make sure you have Node.js version `18.x` as well as npm installed. You can find how to test your changes locally [here](https://github.com/CodingTrain/thecodingtrain.com#development-info).

README.md

@@ -1,6 +1,9 @@
 # Coding Train Website
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 This repo holds the website for [thecodingtrain.com](https://thecodingtrain.com/). The website is built with:
@@ -15,7 +18,7 @@ This repo holds the website for [thecodingtrain.com](https://thecodingtrain.com/
 
 ## Development info
 
-When updating the website, it is helpful to run the website locally in order to quickly see the changes made. Make sure you have Node.js version `16.x` installed and then perform the following steps:
+When updating the website, it is helpful to run the website locally in order to quickly see the changes made. Make sure you have Node.js version `18.x` installed and then perform the following steps:
 
 1. Clone down the repo to your computer and `cd` into the folder
 2. Run `npm install`

content/pages/guides/passenger-showcase-guide.md

@@ -4,8 +4,6 @@ description: 'Guide to sharing your work with the community!'
 date: '05/04/2022'
 ---
 
-import PassengerShowcaseForm from '../../../src/components/PassengerShowcaseForm';
-
 ## Submission Form
 
 Thank you for sharing your work in the Passenger Showcase! There are currently two ways to submit your work: by using this form to upload your work, or to follow the instructions below to create a Pull Request for your project on GitHub!

gatsby-config.js

@@ -5,6 +5,7 @@ module.exports = {
     description:
       'All aboard the Coding Train with Daniel Shiffman, a YouTube channel dedicated to beginner-friendly creative coding tutorials and challenges.'
   },
+  trailingSlash: 'never',
   plugins: [
     {
       resolve: `gatsby-plugin-postcss`,
@@ -41,38 +42,32 @@ module.exports = {
       options: {
         name: 'images',
         path: './src/images/'
-      },
-      __key: 'images'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'pages',
         path: './src/pages/'
-      },
-      __key: 'pages'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'videos',
         path: './content/videos',
         ignore: [
-          './**/src',
-          './**/videos/challenges/**/*',
-          './**/videos/guest-tutorials/**/*'
+          './**/videos/challenges/**/*'
+          // './**/videos/guest-tutorials/**/*'
         ]
-      },
-      __key: 'videos'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'challenges',
-        path: './content/videos/challenges',
-        ignore: [`./**/src`]
-      },
-      __key: 'challenges'
+        path: './content/videos/challenges'
+      }
     },
     // {
     //   resolve: 'gatsby-source-filesystem',
@@ -81,85 +76,78 @@ module.exports = {
     //     path: './content/videos/guest-tutorials',
     //     ignore: [`./**/src`]
     //   },
-    //   __key: 'guest-tutorials'
     // },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'main-tracks',
         path: './content/tracks/main-tracks'
-      },
-      __key: 'main-tracks'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'side-tracks',
         path: './content/tracks/side-tracks'
-      },
-      __key: 'side-tracks'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'guides',
         path: './content/pages/guides'
-      },
-      __key: 'guides'
+      }
     },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
-        extensions: [`.mdx`, `.md`]
+        extensions: [`.mdx`, `.md`],
+        mdxOptions: {
+          remarkPlugins: [require(`remark-gfm`)]
+        }
       }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'homepage-data',
         path: './content/pages/homepage'
-      },
-      __key: 'homepage-data'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'tracks-page-data',
         path: './content/pages/tracks'
-      },
-      __key: 'tracks-page-data'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'challenges-page-data',
         path: './content/pages/challenges'
-      },
-      __key: 'challenges-page-data'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'faqs',
         path: './content/pages/faqs'
-      },
-      __key: 'faqs'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'about-page-data',
         path: './content/pages/about'
-      },
-      __key: 'about-page-data'
+      }
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: '404-page-data',
         path: './content/pages/404'
-      },
-      __key: '404-page-data'
+      }
     },
     {
       resolve: 'gatsby-plugin-react-svg',
@@ -169,7 +157,6 @@ module.exports = {
         }
       }
     },
-    `gatsby-plugin-meta-redirect`,
     'gatsby-plugin-netlify'
   ]
 };

gatsby-node.js

@@ -36,7 +36,7 @@ exports.onCreateNode = ({
   createContentDigest,
   getNode
 }) => {
-  const { createNode } = actions;
+  const { createNode, createNodeField } = actions;
   const { owner, mediaType } = node.internal;
   const parent = getNode(node.parent);
 
@@ -158,6 +158,13 @@ exports.onCreateNode = ({
       node,
       parent
     );
+
+    // no more slugs in mdx v2
+    createNodeField({
+      node,
+      name: 'slug',
+      value: parent.name
+    });
   } else if (
     owner === 'gatsby-source-filesystem' &&
     mediaType !== undefined &&

node-scripts/page-generation.js

@@ -261,18 +261,25 @@ exports.createGuidePages = async (graphql, createPage) => {
     query {
       mdxs: allMdx {
         nodes {
-          slug
+          fields {
+            slug
+          }
+          internal {
+            contentFilePath
+          }
         }
       }
     }
   `);
 
+  const template = require.resolve(`../src/templates/guide.js`);
+
   data.mdxs.nodes.forEach((mdx) => {
     createPage({
-      path: `guides/${mdx.slug}`,
-      component: require.resolve(`../src/templates/guide.js`),
+      path: `guides/${mdx.fields.slug}`,
+      component: `${template}?__contentFilePath=${mdx.internal.contentFilePath}`,
       context: {
-        slug: mdx.slug
+        slug: mdx.fields.slug
       }
     });
   });