chore: Upgrade to Gatsby v3

.eslintrc.js

@@ -5,6 +5,6 @@ module.exports = {
     'comma-dangle': ['error', 'never'],
     semi: ['error', 'never'],
     'no-unused-expressions': 0,
-    'chai-friendly/no-unused-expressions': 2
-  }
+    'chai-friendly/no-unused-expressions': 2,
+  },
 }

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run prettier

cypress/integration/account.spec.js

@@ -25,7 +25,7 @@ describe('Account page', function () {
     '/account/export/': 'account.exportYourData',
     '/account/consent/': 'account.reviewYourConsent',
     '/account/restrict/': 'account.restrictProcessingOfYourData',
-    '/account/remove/': 'account.removeYourAccount'
+    '/account/remove/': 'account.removeYourAccount',
   }
 
   describe('Verify links & translations', function () {

cypress/integration/rights.spec.js

@@ -14,7 +14,7 @@ describe('User rights', function () {
     export: 'exportYourData',
     consent: 'reviewYourConsent',
     restrict: 'restrictProcessingOfYourData',
-    remove: 'removeYourAccount'
+    remove: 'removeYourAccount',
   }
 
   it('Verify translations and links', function () {
@@ -55,7 +55,7 @@ describe('User rights', function () {
       'openDataQuestion',
       'openDataInfo',
       'modelQuestion',
-      'modelWarning'
+      'modelWarning',
     ]
     for (let string of strings)
       cy.get(`[data-test=${string}]`).should('contain', i18n[`gdpr.${string}`])
@@ -68,7 +68,7 @@ describe('User rights', function () {
       'modelWhatAnswer',
       'modelWhyAnswer',
       'modelTimingAnswer',
-      'modelShareAnswer'
+      'modelShareAnswer',
     ]
     for (let string of strings)
       cy.get(`[data-test=${string}]`).should('contain', i18n[`gdpr.${string}`].slice(0, 3))

cypress/integration/settings.spec.js

@@ -20,7 +20,7 @@ describe('Account settings', function () {
     'instagram',
     'twitter',
     'email',
-    'username'
+    'username',
   ]
 
   it('Verify translations and links', function () {

cypress/integration/showcase.spec.js

@@ -3,7 +3,7 @@
 const posts = [
   '/showcase/wonder-woman-simon/',
   '/showcase/yellow-button-simon/',
-  '/showcase/linnen-theo/'
+  '/showcase/linnen-theo/',
 ]
 
 describe('Showcase posts', function () {

gatsby-config.js

@@ -19,24 +19,24 @@ const plugins = [
   {
     resolve: 'gatsby-plugin-nprogress',
     options: {
-      color: '#9775fa'
-    }
+      color: '#9775fa',
+    },
   },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
       path: `${__dirname}/markdown/newsletter`,
-      name: 'newsletter'
+      name: 'newsletter',
       //ignore: ignore
-    }
+    },
   },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
       path: `${__dirname}/markdown/org`,
       name: 'markdown',
-      ignore: ignore
-    }
+      ignore: ignore,
+    },
   },
   {
     resolve: 'gatsby-plugin-mdx',
@@ -50,41 +50,40 @@ const plugins = [
             maxWidth: 800,
             showCaptions: ['title', 'alt'],
             markdownCaptions: true,
-            backgroundColor: `, 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12)`
-          }
-        }
+            backgroundColor: `, 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12)`,
+          },
+        },
       ],
       gatsbyRemarkPlugins: [
         {
           resolve: 'gatsby-remark-images',
           options: {
             maxWidth: 756,
             showCaptions: ['title', 'alt'],
-            backgroundColor: `transparent`
-          }
+            backgroundColor: `transparent`,
+          },
         },
         {
           resolve: 'gatsby-remark-prismjs',
           options: {
             classPrefix: 'language-',
             inlineCodeMarker: null,
-            aliases: {}
-          }
+            aliases: {},
+          },
         },
         'gatsby-remark-copy-linked-files',
         'gatsby-remark-autolink-headers',
         'gatsby-remark-smartypants',
         'gatsby-remark-check-links',
         {
           resolve: 'gatsby-remark-jargon',
-          options: { jargon }
-        }
-      ]
-    }
+          options: { jargon },
+        },
+      ],
+    },
   },
   'gatsby-plugin-sharp',
   'gatsby-transformer-sharp',
-  'gatsby-plugin-styled-components',
   'gatsby-plugin-catch-links',
   'gatsby-plugin-react-helmet',
   {
@@ -96,16 +95,16 @@ const plugins = [
       background_color: `#ffffff`,
       theme_color: `#212529`,
       display: `standalone`,
-      icon: `src/images/logo.svg`
-    }
+      icon: `src/images/logo.svg`,
+    },
   },
   'gatsby-plugin-netlify',
   {
     resolve: `gatsby-plugin-feed`,
     options: {
-      feeds: feeds
-    }
-  }
+      feeds: feeds,
+    },
+  },
 ]
 
 // Only update the Algolia indices when having the ALGOLIA_UPDATE_KEY set.
@@ -117,8 +116,8 @@ if (process.env.CONTEXT === 'production' && process.env.HEAD === 'main') {
       appId: process.env.GATSBY_ALGOLIA_API_ID,
       apiKey: process.env.GATSBY_ALGOLIA_UPDATE_KEY,
       queries: searchData(process.env.GATSBY_LANGUAGE),
-      chunkSize: 10000
-    }
+      chunkSize: 10000,
+    },
   })
 }
 
@@ -130,7 +129,7 @@ module.exports = {
     LAZY_IMAGES: true,
     PRESERVE_WEBPACK_CACHE: true,
     PRESERVE_FILE_DOWNLOAD_CACHE: true,
-    FAST_REFRESH: true
+    FAST_REFRESH: true,
   },
   plugins: plugins,
   siteMetadata: {
@@ -140,6 +139,6 @@ module.exports = {
     url: `https://${domain}`,
     siteUrl: `https://${domain}`,
     image: `https://${domain}/share/${language}.wide.jpg`,
-    twitterUsername: '@freesewing_org'
-  }
+    twitterUsername: '@freesewing_org',
+  },
 }

gatsby-node.js

@@ -119,8 +119,8 @@ const createMdxPages = async function (pages, createPage, graphql, language) {
               title: pageTitle(slug, page.node),
               order: page.node.frontmatter.order,
               // Keep file here, it is used in the page query to filter
-              file: page.node.fileAbsolutePath
-            }
+              file: page.node.fileAbsolutePath,
+            },
           }
           // Handle duplicates in docs
           if (type === 'docs' && typeof routes.duplicates[slug] !== 'undefined') {
@@ -133,8 +133,8 @@ const createMdxPages = async function (pages, createPage, graphql, language) {
                   title: pages.docs[slug].context.title,
                   order: pages.docs[slug].context.order,
                   // Keep file here, it is used in the page query to filter
-                  file: pages.docs[slug].context.file
-                }
+                  file: pages.docs[slug].context.file,
+                },
               }
             }
           }
@@ -169,8 +169,8 @@ const createNewsletterPages = async function (pages, createPage, graphql, langua
           component,
           context: {
             // Keep file here, it is used in the page query to filter
-            file: page.node.fileAbsolutePath
-          }
+            file: page.node.fileAbsolutePath,
+          },
         }
       }
     }
@@ -197,7 +197,7 @@ const createPerDesignPages = async function (createPage, language) {
           createPage({
             path: match.replace('_design', design),
             component: path.resolve(`./src/pages/${routes.perDesign.single[match]}`),
-            context: { design }
+            context: { design },
           })
           resolve(true)
         })
@@ -215,8 +215,8 @@ const createPerDesignPages = async function (createPage, language) {
               design,
               // This is required because string interpolation is not allowed in page graphql queries
               optionsMdxRegex: `//docs/patterns/${design}/options/[^/]*/${language}.md/`,
-              settingsMdxRegex: `//docs/draft/settings/${language}.md/`
-            }
+              settingsMdxRegex: `//docs/draft/settings/${language}.md/`,
+            },
           })
           resolve(true)
         })
@@ -241,8 +241,8 @@ const createPerMeasurementPages = async function (createPage, language) {
             context: {
               measurement,
               // This is required because string interpolation is not allowed in page graphql queries
-              measurementsMdxRegex: `//docs/measurements/${measurement.toLowerCase()}/${language}.md/`
-            }
+              measurementsMdxRegex: `//docs/measurements/${measurement.toLowerCase()}/${language}.md/`,
+            },
           })
           resolve(true)
         })
@@ -261,7 +261,7 @@ const createDynamicPages = async function (createPage) {
         createPage({
           path: match.slice(0, -1),
           matchPath: match,
-          component: path.resolve(`./src/pages/${routes.dynamic[match]}`)
+          component: path.resolve(`./src/pages/${routes.dynamic[match]}`),
         })
         resolve(true)
       })
@@ -280,7 +280,7 @@ const createRedirects = async function (createRedirect) {
           fromPath: from,
           toPath: routes.redirect[from],
           isPermanent: true,
-          redirectInBrowser: true
+          redirectInBrowser: true,
         })
         resolve(true)
       })
@@ -326,12 +326,12 @@ exports.sourceNodes = async ({ actions, getNode, createNodeId, hasNodeChanged })
         parent: null,
         patron: {
           ...patron,
-          tier: tier
+          tier: tier,
         },
         internal: {
-          type: `FSPatron`
+          type: `FSPatron`,
         },
-        order: i
+        order: i,
       }
       i++