Upgrade CI to Node.js 22.x and modern npm

.eslintrc

@@ -1,22 +1,25 @@
 {
-  "extends": ["prettier", "prettier/react"],
-  "parser": "babel-eslint",
+  "extends": ["prettier"],
+  "parser": "@babel/eslint-parser",
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
     "no-var": "warn"
   },
   "env": {
     "node": true,
-    "es6": true
+    "browser": true,
+    "es2021": true
   },
   "parserOptions": {
-    "ecmaVersion": 8,
+    "ecmaVersion": "latest",
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true,
-      "modules": true
+      "jsx": true
     },
-    "sourceType": "module"
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
   }
 }

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x]
+        node-version: [22.x]
 
     steps:
       - name: Checkout code
@@ -27,9 +27,7 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: |
-          npm install -g npm@5.8.0
-          npm ci
+        run: npm ci
 
       - name: Run linting
         run: npm run lint

README.md

@@ -2,6 +2,8 @@
 
 # Jon Gear's Website And Blog
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/4771c8dc-35e6-45fa-96d2-158d20f5c2d0/deploy-status)](https://app.netlify.com/projects/gear-dev/deploys)
+
 Thanks for checking out my site. This is the complete code for my website and blog.
 
 ## Setup

gatsby-browser.js

@@ -1,6 +1,3 @@
-import 'typeface-bitter';
-import 'typeface-open-sans';
-
-import { wrapRootElement as wrap } from './wrap-root-element';
-
-export const wrapRootElement = wrap;
+import { wrapRootElement as wrap } from './wrap-root-element';
+
+export const wrapRootElement = wrap;

gatsby-config.js

@@ -23,14 +23,15 @@ module.exports = {
       },
     },
     {
-      resolve: 'gatsby-plugin-google-analytics',
+      resolve: 'gatsby-plugin-google-gtag',
       options: {
-        trackingId: config.googleAnalyticsID,
+        trackingIds: [config.googleAnalyticsID],
       },
     },
     {
-      resolve: 'gatsby-mdx',
+      resolve: 'gatsby-plugin-mdx',
       options: {
+        extensions: ['.mdx', '.md'],
         gatsbyRemarkPlugins: [
           {
             resolve: 'gatsby-remark-external-links',
@@ -48,14 +49,12 @@ module.exports = {
               linkImagesToOriginal: false,
             },
           },
-          // TODO: Replace with "mdx-component-autolink-headers"
           {
             resolve: 'gatsby-remark-autolink-headers',
             options: {
               maintainCase: false,
             },
           },
-          //'gatsby-remark-copy-linked-files'
         ],
       },
     },

gatsby-node.js

@@ -1,15 +1,15 @@
 const _ = require('lodash');
 
 // graphql function doesn't throw an error so we have to check to check for the result.errors to throw manually
-const wrapper = promise =>
-  promise.then(result => {
+const wrapper = (promise) =>
+  promise.then((result) => {
     if (result.errors) {
       throw result.errors;
     }
     return result;
   });
 
-exports.onCreateNode = ({ node, actions }) => {
+exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
 
   let slug;
@@ -27,6 +27,16 @@ exports.onCreateNode = ({ node, actions }) => {
       slug = `/${_.kebabCase(node.frontmatter.title)}`;
     }
     createNodeField({ node, name: 'slug', value: slug });
+
+    // Calculate reading time
+    const parent = getNode(node.parent);
+    if (parent && parent.internal && parent.internal.content) {
+      const content = parent.internal.content;
+      const wordsPerMinute = 200;
+      const wordCount = content.split(/\s+/).length;
+      const readingTime = Math.ceil(wordCount / wordsPerMinute);
+      createNodeField({ node, name: 'timeToRead', value: readingTime });
+    }
   }
 };
 
@@ -39,7 +49,7 @@ exports.createPages = async ({ graphql, actions }) => {
   const result = await wrapper(
     graphql(`
       {
-        allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
+        allMdx(sort: { frontmatter: { date: DESC } }) {
           edges {
             node {
               fields {
@@ -49,6 +59,10 @@ exports.createPages = async ({ graphql, actions }) => {
                 title
                 categories
               }
+              id
+              internal {
+                contentFilePath
+              }
             }
           }
         }
@@ -64,7 +78,7 @@ exports.createPages = async ({ graphql, actions }) => {
 
     createPage({
       path: edge.node.fields.slug,
-      component: postTemplate,
+      component: `${postTemplate}?__contentFilePath=${edge.node.internal.contentFilePath}`,
       context: {
         slug: edge.node.fields.slug,
         prev,
@@ -75,17 +89,17 @@ exports.createPages = async ({ graphql, actions }) => {
 
   const categorySet = new Set();
 
-  _.each(posts, edge => {
+  _.each(posts, (edge) => {
     if (_.get(edge, 'node.frontmatter.categories')) {
-      edge.node.frontmatter.categories.forEach(cat => {
+      edge.node.frontmatter.categories.forEach((cat) => {
         categorySet.add(cat);
       });
     }
   });
 
   const categories = Array.from(categorySet);
 
-  categories.forEach(category => {
+  categories.forEach((category) => {
     createPage({
       path: `/categories/${_.kebabCase(category)}`,
       component: categoryTemplate,

gatsby-ssr.js

@@ -1,3 +1,3 @@
-import { wrapRootElement as wrap } from './wrap-root-element';
-
-export const wrapRootElement = wrap;
+import { wrapRootElement as wrap } from './wrap-root-element';
+
+export const wrapRootElement = wrap;