Upgrade to Gatsby 5 (dev)

.eslintignore

@@ -0,0 +1,3 @@
+public
+.idea
+

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: 'react-app',
+  plugins: [
+    'react-hooks',
+  ],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug, user reported
+assignees: eyalroth
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+
+**Additional context**
+Add any other context about the problem here (such as relevant site link).

.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: npm list
+
+      - run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: URL=https://localhost GOOGLE_ANALYTICS=y UTTERANCES_REPO=z npm run build
+

.nvmrc

@@ -0,0 +1 @@
+18

gatsby-browser.js

@@ -1,8 +1,32 @@
-require('./src/assets/fonts/fontello/css/fontello.css')
-require("prismjs/themes/prism-okaidia.css")
-require("prismjs/plugins/line-numbers/prism-line-numbers.css")
+import './src/assets/fonts/fontello/css/fontello.css'
+import littlefoot from 'littlefoot'
+import './src/assets/scss/littlefoot.scss'
 
-const React = require("react")
+import '@fontsource/arimo/hebrew-400.css'
+import '@fontsource/arimo/hebrew-500.css'
+import '@fontsource/arimo/hebrew-700.css'
+import '@fontsource/arimo/hebrew-400-italic.css'
+import '@fontsource/arimo/hebrew-500-italic.css'
+import '@fontsource/arimo/hebrew-700-italic.css'
+
+import '@fontsource/lora/latin-400.css'
+import '@fontsource/lora/latin-500.css'
+import '@fontsource/lora/latin-700.css'
+import '@fontsource/lora/latin-400-italic.css'
+import '@fontsource/lora/latin-500-italic.css'
+import '@fontsource/lora/latin-700-italic.css'
+
+import '@fontsource/roboto/latin-400.css'
+import '@fontsource/roboto/latin-500.css'
+import '@fontsource/roboto/latin-700.css'
+import '@fontsource/roboto/latin-400-italic.css'
+import '@fontsource/roboto/latin-500-italic.css'
+import '@fontsource/roboto/latin-700-italic.css'
+
+require('prismjs/themes/prism-okaidia.css')
+require('prismjs/plugins/line-numbers/prism-line-numbers.css')
+
+const React = require('react')
 
 // https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
 const isInternetExplorer = /*@cc_on!@*/false || !!document.documentMode
@@ -14,4 +38,21 @@ export function wrapRootElement({ element }) {
     )
   }
   return element
-}
+}
+
+export function onRouteUpdate() {
+  const bt = `
+            <button
+                aria-controls='fncontent:<%= id %>'
+                aria-expanded='false'
+                aria-label='Footnote <%= number %>'
+                class='littlefoot__button'
+                id='<%= reference %>'
+                rel='footnote'
+                title='See Footnote <%= number %>'
+            />
+                <%= number %>
+            </button>
+        `
+  littlefoot({ buttonTemplate: bt })
+}

gatsby-config.js

@@ -12,22 +12,20 @@ const path = require(`path`)
 const { Feeds } = require('./src/consts/rss')
 
 function verifyEnvVar(variable) {
-  if (activeEnv == 'production' && !process.env[variable]) {
+  if (activeEnv === "production" && !process.env[variable]) {
     throw new Error(`Missing environment variable ${variable}`)
   }
 }
-verifyEnvVar('URL')
-verifyEnvVar('GOOGLE_ANALYTICS')
-verifyEnvVar('UTTERANCES_REPO')
-
-const fontVariants = ['300', '300i', '400', '400i', '500', '700']
+verifyEnvVar("URL")
+verifyEnvVar("GOOGLE_ANALYTICS")
+verifyEnvVar("UTTERANCES_REPO")
 
 let deployUrl = process.env.DEPLOY_PRIME_URL
 if (!deployUrl) {
   deployUrl = process.env.URL
 }
 
-const demoMode = "true" == String(process.env.DEMO).trim().toLowerCase()
+const demoMode = "true" === String(process.env.DEMO).trim().toLowerCase()
 console.log(`Running in demo mode? ${demoMode}`)
 
 module.exports = {
@@ -65,20 +63,20 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-feed',
       options: {
-        feeds: Object.values(Feeds).map(feed => feed.toPluginOptions(process.env.URL, demoMode)),
-        // see https://github.com/gatsbyjs/gatsby/issues/16177
-        setup: ({
-          query: {
-            site: { siteMetadata },
-          },
-          ...rest
-        }) => {
-          return {
-            ...siteMetadata,
-            ...rest,
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                siteUrl
+                site_url: siteUrl
+              }
+            }
           }
-        },
-      },
+        `,
+        feeds: Object.values(Feeds).map(feed => feed.toPluginOptions(process.env.URL, demoMode)),
+      }
     },
     'gatsby-remark-local-links',
     {
@@ -124,34 +122,15 @@ module.exports = {
         ],
       },
     },
-    'gatsby-transformer-sharp',
+    'gatsby-plugin-image',
     'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: { trackingId: process.env.GOOGLE_ANALYTICS },
     },
-    {
-      resolve: 'gatsby-plugin-prefetch-google-fonts',
-      options: {
-        fonts: [
-          {
-            family: 'Roboto',
-            variants: fontVariants,
-          },
-          {
-            family: 'Lora',
-            variants: fontVariants,
-          },
-          {
-            family: 'Arimo',
-            variants: fontVariants,
-          },
-        ],
-      },
-    },
     'gatsby-plugin-sitemap',
     'gatsby-plugin-catch-links',
-    'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-plugin-sass',
       options: {
@@ -184,7 +163,6 @@ module.exports = {
             minPixelValue: 0,
           }),
         ],
-        precision: 8,
       },
     },
     {

gatsby-node.js

@@ -1,4 +1,3 @@
-const _ = require('lodash')
 const Promise = require('bluebird')
 const readingTime = require("reading-time")
 
@@ -13,7 +12,7 @@ const createPageTemplate = require('./src/templates/PageTemplate/createPages')
 const createPostTemplate = require('./src/templates/PostTemplate/createPages')
 const createSeriesTemplate = require('./src/templates/PostSeriesTemplate/createPages')
 
-exports.createPages = ({ graphql, actions }) => {
+exports.createPages = async ({ graphql, actions }) => {
   const { createPage, createRedirect } = actions
 
   const redirects = new Promise((resolve, reject) => {
@@ -39,18 +38,20 @@ exports.createPages = ({ graphql, actions }) => {
       toPath: `/${Languages.English.urlPart}/about`,
       redirectInBrowser: true,
     })
+
+
     createRedirect({
       fromPath: '/about/',
       toPath: `/${Languages.English.urlPart}/about`,
       redirectInBrowser: true,
     })
-  
+
     createRedirect({
       fromPath: '/rss.xml',
       toPath: Feeds[Languages.English.id].outputPath,
       redirectInBrowser: true,
     })
-  
+
     resolve()
   })
 
@@ -96,3 +97,14 @@ exports.onCreateNode = ({ node, actions }) => {
 exports.onCreatePage = ({ page }) => {
   page.context.isStaticPage = true
 }
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      fallback: {
+        stream: require.resolve('stream-browserify'),
+        util: require.resolve('util/'),
+      },
+    },
+  })
+}