TryGhost · aileen · May 30, 2022 · Sep 3, 2021 · Sep 3, 2021 · Sep 3, 2021
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,42 +1,57 @@
-const path = require(`path`)
+/* eslint-disable semi */
+/* eslint-disable no-unsafe-finally */
+/* eslint-disable no-restricted-syntax */
+const path = require(`path`);
 
-const config = require(`./src/utils/siteConfig`)
-const generateRSSFeed = require(`./src/utils/rss/generate-feed`)
+const config = require(`./src/utils/siteConfig`);
+const generateRSSFeed = require(`./src/utils/rss/generate-feed`);
 
-let ghostConfig
+let ghostConfig;
 
 try {
-    ghostConfig = require(`./.ghost`)
+    ghostConfig = require(`./.ghost`);
 } catch (e) {
     ghostConfig = {
         production: {
             apiUrl: process.env.GHOST_API_URL,
             contentApiKey: process.env.GHOST_CONTENT_API_KEY,
         },
-    }
+    };
 } finally {
-    const { apiUrl, contentApiKey } = process.env.NODE_ENV === `development` ? ghostConfig.development : ghostConfig.production
+    const { apiUrl, contentApiKey } =
+        process.env.NODE_ENV === `development`
+            ? ghostConfig.development
+            : ghostConfig.production;
 
     if (!apiUrl || !contentApiKey || contentApiKey.match(/<key>/)) {
-        throw new Error(`GHOST_API_URL and GHOST_CONTENT_API_KEY are required to build. Check the README.`) // eslint-disable-line
+        throw new Error(
+            `GHOST_API_URL and GHOST_CONTENT_API_KEY are required to build. Check the README.`
+        ); // eslint-disable-line
     }
 }
 
-if (process.env.NODE_ENV === `production` && config.siteUrl === `http://localhost:8000` && !process.env.SITEURL) {
-    throw new Error(`siteUrl can't be localhost and needs to be configured in siteConfig. Check the README.`) // eslint-disable-line
+if (
+    process.env.NODE_ENV === `production` &&
+    config.siteUrl === `http://localhost:8000` &&
+    !process.env.SITEURL
+) {
+    throw new Error(
+        `siteUrl can't be localhost and needs to be configured in siteConfig. Check the README.`
+    ); // eslint-disable-line
 }
 
 /**
-* This is the place where you can tell Gatsby which plugins to use
-* and set them up the way you want.
-*
-* Further info 👉🏼 https://www.gatsbyjs.org/docs/gatsby-config/
-*
-*/
+ * This is the place where you can tell Gatsby which plugins to use
+ * and set them up the way you want.
+ *
+ * Further info 👉🏼 https://www.gatsbyjs.org/docs/gatsby-config/
+ *
+ */
 module.exports = {
     siteMetadata: {
         siteUrl: process.env.SITEURL || config.siteUrl,
     },
+    trailingSlash: 'always',
     plugins: [
         /**
          *  Content Plugins
@@ -57,6 +72,7 @@ module.exports = {
                 name: `images`,
             },
         },
+        `gatsby-plugin-image`,
         `gatsby-plugin-sharp`,
         `gatsby-transformer-sharp`,
         {
@@ -108,9 +124,7 @@ module.exports = {
                     }
                 }
               `,
-                feeds: [
-                    generateRSSFeed(config),
-                ],
+                feeds: [generateRSSFeed(config)],
             },
         },
         {
@@ -185,7 +199,6 @@ module.exports = {
         },
         `gatsby-plugin-catch-links`,
         `gatsby-plugin-react-helmet`,
-        `gatsby-plugin-force-trailing-slashes`,
         `gatsby-plugin-offline`,
     ],
-}
+};
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,13 +1,13 @@
-const path = require(`path`)
-const { postsPerPage } = require(`./src/utils/siteConfig`)
-const { paginate } = require(`gatsby-awesome-pagination`)
+const path = require(`path`);
+const { postsPerPage } = require(`./src/utils/siteConfig`);
+const { paginate } = require(`gatsby-awesome-pagination`);
 
 /**
  * Here is the place where Gatsby creates the URLs for all the
  * posts, tags, pages and authors that we fetched from the Ghost site.
  */
 exports.createPages = async ({ graphql, actions }) => {
-    const { createPage } = actions
+    const { createPage } = actions;
 
     const result = await graphql(`
         {
@@ -45,77 +45,79 @@ exports.createPages = async ({ graphql, actions }) => {
                 }
             }
         }
-    `)
+    `);
 
     // Check for any errors
     if (result.errors) {
-        throw new Error(result.errors)
+        throw new Error(result.errors);
     }
 
     // Extract query results
-    const tags = result.data.allGhostTag.edges
-    const authors = result.data.allGhostAuthor.edges
-    const pages = result.data.allGhostPage.edges
-    const posts = result.data.allGhostPost.edges
+    const tags = result.data.allGhostTag.edges;
+    const authors = result.data.allGhostAuthor.edges;
+    const pages = result.data.allGhostPage.edges;
+    const posts = result.data.allGhostPost.edges;
 
     // Load templates
-    const indexTemplate = path.resolve(`./src/templates/index.js`)
-    const tagsTemplate = path.resolve(`./src/templates/tag.js`)
-    const authorTemplate = path.resolve(`./src/templates/author.js`)
-    const pageTemplate = path.resolve(`./src/templates/page.js`)
-    const postTemplate = path.resolve(`./src/templates/post.js`)
+    const indexTemplate = path.resolve(`./src/templates/index.js`);
+    const tagsTemplate = path.resolve(`./src/templates/tag.js`);
+    const authorTemplate = path.resolve(`./src/templates/author.js`);
+    const pageTemplate = path.resolve(`./src/templates/page.js`);
+    const postTemplate = path.resolve(`./src/templates/post.js`);
 
     // Create tag pages
     tags.forEach(({ node }) => {
-        const totalPosts = node.postCount !== null ? node.postCount : 0
+        const totalPosts = node.postCount !== null ? node.postCount : 0;
 
         // This part here defines, that our tag pages will use
         // a `/tag/:slug/` permalink.
-        const url = `/tag/${node.slug}`
+        const url = `/tag/${node.slug}`;
 
-        const items = Array.from({length: totalPosts})
+        const items = Array.from({ length: totalPosts });
 
         // Create pagination
         paginate({
             createPage,
             items: items,
             itemsPerPage: postsPerPage,
             component: tagsTemplate,
-            pathPrefix: ({ pageNumber }) => (pageNumber === 0) ? url : `${url}/page`,
+            pathPrefix: ({ pageNumber }) =>
+                pageNumber === 0 ? url : `${url}/page`,
             context: {
-                slug: node.slug
-            }
-        })
-    })
+                slug: node.slug,
+            },
+        });
+    });
 
     // Create author pages
     authors.forEach(({ node }) => {
-        const totalPosts = node.postCount !== null ? node.postCount : 0
+        const totalPosts = node.postCount !== null ? node.postCount : 0;
 
         // This part here defines, that our author pages will use
         // a `/author/:slug/` permalink.
-        const url = `/author/${node.slug}`
+        const url = `/author/${node.slug}`;
 
-        const items = Array.from({length: totalPosts})
+        const items = Array.from({ length: totalPosts });
 
         // Create pagination
         paginate({
             createPage,
             items: items,
             itemsPerPage: postsPerPage,
             component: authorTemplate,
-            pathPrefix: ({ pageNumber }) => (pageNumber === 0) ? url : `${url}/page`,
+            pathPrefix: ({ pageNumber }) =>
+                pageNumber === 0 ? url : `${url}/page`,
             context: {
-                slug: node.slug
-            }
-        })
-    })
+                slug: node.slug,
+            },
+        });
+    });
 
     // Create pages
     pages.forEach(({ node }) => {
         // This part here defines, that our pages will use
         // a `/:slug/` permalink.
-        node.url = `/${node.slug}/`
+        node.url = `/${node.slug}/`;
 
         createPage({
             path: node.url,
@@ -125,14 +127,14 @@ exports.createPages = async ({ graphql, actions }) => {
                 // in page queries as GraphQL variables.
                 slug: node.slug,
             },
-        })
-    })
+        });
+    });
 
     // Create post pages
     posts.forEach(({ node }) => {
         // This part here defines, that our posts will use
         // a `/:slug/` permalink.
-        node.url = `/${node.slug}/`
+        node.url = `/${node.slug}/`;
 
         createPage({
             path: node.url,
@@ -142,8 +144,8 @@ exports.createPages = async ({ graphql, actions }) => {
                 // in page queries as GraphQL variables.
                 slug: node.slug,
             },
-        })
-    })
+        });
+    });
 
     // Create pagination
     paginate({
@@ -153,10 +155,18 @@ exports.createPages = async ({ graphql, actions }) => {
         component: indexTemplate,
         pathPrefix: ({ pageNumber }) => {
             if (pageNumber === 0) {
-                return `/`
+                return `/`;
             } else {
-                return `/page`
+                return `/page`;
             }
         },
-    })
-}
+    });
+};
+
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+    actions.setWebpackConfig({
+        resolve: {
+            fallback: { url: require.resolve("url/") },
+        },
+    });
+};
diff --git a/package.json b/package.json
@@ -25,6 +25,10 @@
     "build": "gatsby build",
     "dev": "gatsby develop",
     "lint": "eslint . --ext .js --cache",
+    "develop": "gatsby develop",
+    "start": "gatsby serve",
+    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "clean": "gatsby clean",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
@@ -37,23 +41,23 @@
     "@tryghost/helpers": "1.1.70",
     "@tryghost/helpers-gatsby": "1.0.77",
     "cheerio": "1.0.0-rc.11",
-    "gatsby": "3.12.1",
+    "gatsby": "4.15.1",
     "gatsby-awesome-pagination": "0.3.8",
-    "gatsby-image": "3.11.0",
     "gatsby-plugin-advanced-sitemap": "2.1.0",
-    "gatsby-plugin-catch-links": "3.12.0",
-    "gatsby-plugin-feed": "3.12.0",
-    "gatsby-plugin-force-trailing-slashes": "1.0.6",
-    "gatsby-plugin-manifest": "3.12.0",
-    "gatsby-plugin-offline": "4.12.0",
-    "gatsby-plugin-react-helmet": "4.12.0",
-    "gatsby-plugin-sharp": "3.12.0",
-    "gatsby-source-filesystem": "3.12.0",
+    "gatsby-plugin-catch-links": "4.15.0",
+    "gatsby-plugin-feed": "4.15.0",
+    "gatsby-plugin-image": "2.15.0",
+    "gatsby-plugin-manifest": "4.15.0",
+    "gatsby-plugin-offline": "5.15.0",
+    "gatsby-plugin-react-helmet": "5.15.0",
+    "gatsby-plugin-sharp": "4.15.0",
+    "gatsby-source-filesystem": "4.15.0",
     "gatsby-source-ghost": "5.0.0",
-    "gatsby-transformer-sharp": "3.12.0",
+    "gatsby-transformer-sharp": "4.15.0",
     "lodash": "4.17.21",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "react-helmet": "6.1.0"
+    "react-helmet": "6.1.0",
+    "url": "0.11.0"
   }
 }