Lets modernize!

.babelrc

@@ -5,7 +5,11 @@
         "plugins": ["line-numbers"],
         "theme": "default",
         "css": true
-    }]
+    }],
+    ["@babel/plugin-transform-class-properties", {
+        "loose": true
+    }],
+    "@babel/plugin-transform-classes"
   ],
   "presets": [
     [
@@ -17,4 +21,4 @@
       }
     ]
   ]
-}
+}

.github/workflows/build.yaml

@@ -12,17 +12,17 @@ jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [12.11.x]
-
     steps:
     - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+    - name: Read .nvmrc
+      run: echo "NVMRC=$(cat ./.nvmrc)" >> $GITHUB_OUTPUT
+      id: nvm
+    - name: Use Node + Yarn
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
+        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+        cache: "yarn"
+    - run: yarn install --frozen-lockfile -std=c++17
     - if: github.event_name == 'push'
       run: npm run build --if-present
     - if: github.event_name == 'pull_request'

.nvmrc

@@ -0,0 +1 @@
+v18.20.4

gatsby-config.js

@@ -2,90 +2,108 @@ module.exports = {
   siteMetadata: {
     title: "Bitcoin Everywhere",
     titleTemplate: "tBTC – %s",
-    description: "Mint tBTC to use your Bitcoin everywhere. Decentralized and secure.",
+    description:
+      "Mint tBTC to use your Bitcoin everywhere. Decentralized and secure.",
     url: "https://tbtc.network",
     // supported 639-1 language codes
     supportedLocales: [
-      "en", "de", "es", "fr", "id", "it", "ja", "ko", "pl", "ru", "vn", "zh"],
+      "en",
+      "de",
+      "es",
+      "fr",
+      "id",
+      "it",
+      "ja",
+      "ko",
+      "pl",
+      "ru",
+      "vn",
+      "zh",
+    ],
     defaultLocale: "en",
   },
   plugins: [
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-sass',
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sass",
     {
-      resolve: `gatsby-plugin-favicon`,
+      resolve: `gatsby-plugin-manifest`,
       options: {
-        logo: "./src/favicon.svg",
-
-        // manifest config
-        appName: 'tBTC',
-        appDescription: 'tBTC — Bitcoin Everywhere',
-        icons: {
-          android: true,
-          appleIcon: true,
-          appleStartup: true,
-          coast: false,
-          favicons: true,
-          firefox: true,
-          yandex: false,
-          windows: false
-        }
-      }
+        icon: "./src/favicon.svg",
+        name: `tBTC`,
+        shortName: "tBTC",
+        description: "tBTC — Bitcoin Everywhere",
+        start_url: `/`,
+        display: `standalone`,
+        // TODO
+        // background_color: `#f7f0eb`,
+        // theme_color: `#a2466c`,
+        lang: "en",
+        localize: [
+          // TODO add other supported locales
+          {
+            start_url: `/de/`,
+            lang: `de`,
+            name: `tBTC`,
+            short_name: `tBTC`,
+            description: `tBTC — Bitcoin überall.`,
+          },
+        ],
+      },
     },
     {
       // keep as first gatsby-source-filesystem plugin for gatsby image support
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
         path: `${__dirname}/static/img`,
-        name: 'uploads',
+        name: "uploads",
       },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
         path: `${__dirname}/src/pages`,
-        name: 'pages',
+        name: "pages",
       },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
         path: `${__dirname}/src/header`,
-        name: 'header',
+        name: "header",
       },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
         path: `${__dirname}/src/footer`,
-        name: 'footer',
+        name: "footer",
       },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
         path: `${__dirname}/src/integrations`,
-        name: 'integrations',
+        name: "integrations",
       },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
         path: `${__dirname}/src/img`,
-        name: 'images',
+        name: "images",
       },
     },
-    'gatsby-plugin-sharp',
-    'gatsby-transformer-sharp',
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
     {
-      resolve: 'gatsby-transformer-remark',
+      resolve: "gatsby-transformer-remark",
       options: {
         plugins: [
           {
-            resolve: 'gatsby-remark-relative-images',
+            resolve: "gatsby-remark-relative-images",
           },
           {
-            resolve: 'gatsby-remark-images',
+            resolve: "gatsby-remark-images",
             options: {
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
@@ -94,28 +112,28 @@ module.exports = {
             },
           },
           {
-            resolve: 'gatsby-remark-copy-linked-files',
+            resolve: "gatsby-remark-copy-linked-files",
             options: {
-              destinationDir: 'static',
+              destinationDir: "static",
             },
           },
         ],
       },
     },
     {
-      resolve: 'gatsby-plugin-netlify-cms',
+      resolve: "gatsby-plugin-netlify-cms",
       options: {
         modulePath: `${__dirname}/src/cms/cms.js`,
       },
     },
     {
-      resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
+      resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
       options: {
         develop: true, // Activates purging in npm run develop
-        purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
+        purgeOnly: ["/all.sass"], // applies purging only on the bulma css file
       },
     }, // must be after other CSS plugins
-    'gatsby-plugin-netlify', // make sure to keep it last in the array
+    "gatsby-plugin-netlify", // make sure to keep it last in the array
   ],
-  pathPrefix: '/' + process.env['GATSBY_BRANCH'],
+  pathPrefix: "/" + process.env["GATSBY_BRANCH"],
 }

gatsby-node.js

@@ -1,31 +1,32 @@
-const fs = require('fs')
+const fs = require("fs")
 const path = require(`path`)
-const { createFilePath } = require('gatsby-source-filesystem')
+const { createFilePath } = require("gatsby-source-filesystem")
 const { fmImagesToRelative } = require("gatsby-remark-relative-images")
 
-const { parseBaseConfig, writeConfig } = require('./src/cms/config/index.js')
+const { parseBaseConfig, writeConfig } = require("./src/cms/config/index.js")
 
-const config = require('./gatsby-config')
+const config = require("./gatsby-config")
 
 const { defaultLocale, supportedLocales } = config.siteMetadata
 
 exports.onPreBootstrap = () => {
   const base = parseBaseConfig()
-  const fileCollections =
-    base.collections.filter(
-      c => c.name === "pages" || c.name === "header" || c.name === "footer"
-    )
-  const files = fileCollections
-    .reduce((acc, curr) => acc.concat(curr.files.map(f => f.file )), [])
-  const nonDefaultLocales = supportedLocales.filter(l => l !== defaultLocale)
+  const fileCollections = base.collections.filter(
+    (c) => c.name === "pages" || c.name === "header" || c.name === "footer"
+  )
+  const files = fileCollections.reduce(
+    (acc, curr) => acc.concat(curr.files.map((f) => f.file)),
+    []
+  )
+  const nonDefaultLocales = supportedLocales.filter((l) => l !== defaultLocale)
 
   // Generate markdown pages for each locale for each file if they do not
   // already exist. File collections do not allow admin editors to create new
   // items in the collection. Each page must be explicitly added.
   // https://www.netlifycms.org/docs/collection-types/#file-collections
   // Since they are a copy, they will have English by default until edited.
-  nonDefaultLocales.forEach(locale => {
-    files.forEach(file => {
+  nonDefaultLocales.forEach((locale) => {
+    files.forEach((file) => {
       const localeFile = file.replace(/(.*)\.(.*)$/, `$1.${locale}.$2`)
       if (!fs.existsSync(localeFile)) {
         fs.copyFileSync(file, localeFile)
@@ -70,7 +71,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   // default template at src/templates/default.js
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
     const templateName = node.frontmatter.template || `default`
-    const template = path.resolve(path.join('src/templates/', `${templateName}.js`))
+    const template = path.resolve(
+      path.join("src/templates/", `${templateName}.js`)
+    )
     createPage({
       path: node.fields.slug,
       component: template,
@@ -82,28 +85,30 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
 function localeFromFilename(filename) {
   const potentialMatch = filename.match(/.*\.(\w+)\.\w+$/i)
-  return potentialMatch && potentialMatch[1] || null
+  return (potentialMatch && potentialMatch[1]) || null
 }
 
 function localePath(path, locale) {
-  let pathComponents = path.split('/').filter(s => s !== '')
+  const pathComponents = path.split("/").filter((s) => s !== "")
   let last = pathComponents.pop()
 
   if (last === `index.${locale}`) {
-    last = ''
+    last = ""
   } else {
-    last = last.replace(new RegExp(`\\.${locale}$`, 'i'), '')
+    last = last.replace(new RegExp(`\\.${locale}$`, "i"), "")
   }
 
   pathComponents.push(last)
 
-  return `/${locale}/${pathComponents.join('/')}`
+  return `/${locale}/${pathComponents.join("/")}`
 }
 
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions
   const typeDefs = `
     type MarkdownRemark implements Node {
+      html: String
+      excerpt: String
       frontmatter: Frontmatter
     }
     type Frontmatter {
@@ -156,12 +161,12 @@ exports.onCreateNode = async ({ graphql, node, actions, getNode }) => {
     })
   }
   // create new pages for non-default localeuages
-  else if (node.internal.type === 'SitePage') {
+  else if (node.internal.type === "SitePage") {
     let locale = defaultLocale
     if (node.component) {
       locale = localeFromFilename(node.component)
 
-      if(!supportedLocales.includes(locale)) {
+      if (!supportedLocales.includes(locale)) {
         locale = defaultLocale
       } else if (locale !== defaultLocale) {
         node.path = localePath(path, locale)
@@ -177,5 +182,5 @@ exports.onCreateNode = async ({ graphql, node, actions, getNode }) => {
 
 exports.onPostBootstrap = () => {
   // generate the netlify config
-  writeConfig(path.join(__dirname, './static/admin/config.yml'))
+  writeConfig(path.join(__dirname, "./static/admin/config.yml"))
 }