Upgrade/gatsby 5

.eslintrc.json

@@ -1,51 +1,50 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "extends": [
-    "google",
-    "prettier",
-    "prettier/react",
     "eslint:recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "prettier"
   ],
   "parserOptions": {
-    "ecmaVersion": 2016,
+    "ecmaVersion": 2022,
     "sourceType": "module",
+    "requireConfigFile": false,
     "ecmaFeatures": {
       "jsx": true
+    },
+    "babelOptions": {
+      "plugins": [
+        "@babel/plugin-syntax-jsx"
+      ]
     }
   },
-  "plugins": ["prettier", "react", "jsx-a11y", "import", "graphql"],
+  "plugins": [
+    "prettier",
+    "react",
+    "jsx-a11y",
+    "import"
+  ],
   "env": {
     "browser": true,
-    "es6": true,
+    "es2022": true,
     "node": true
   },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
-    "arrow-body-style": "off",
-    "camelcase": "warn",
-    "func-names": "off",
-    "global-require": "warn",
-    "import/no-dynamic-require": "warn",
-    "import/no-extraneous-dependencies": "off",
     "no-console": "off",
-    "no-multi-assign": "off",
-    "no-param-reassign": "warn",
-    "no-plusplus": "off",
-    "no-shadow": "warn",
-    "no-underscore-dangle": "warn",
-    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
-    "no-nested-ternary": "off",
     "no-unused-vars": "warn",
-    "prefer-destructuring": "off",
-    "prettier/prettier": ["error"],
+    "prettier/prettier": "error",
+    "react/prop-types": "off",
     "react/jsx-uses-vars": "error"
   },
-  "overrides": [
-    {
-      "files": ["*.spec.js", "*.integration.js"],
-      "rules": {
-        "no-unused-expressions": "off"
-      }
-    }
+  "ignorePatterns": [
+    "public/",
+    "static/",
+    ".cache/",
+    "tests/"
   ]
 }

.github/workflows/ci.yml

@@ -0,0 +1,95 @@
+name: CI
+
+# Push is the trigger that matters: this repo is reviewed off a branch rather
+# than through pull requests. The pull_request trigger costs one line and means
+# the checks are already wired if that ever changes.
+on:
+  push:
+  pull_request:
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Lint, build and verify
+    # Playwright snapshots are platform-suffixed (-linux.png). Must stay Linux.
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "npm"
+
+      - name: Install
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      # The build is the test. This site broke on 2026-08-25 with no code
+      # change, when GitHub disabled git:// and the Netlify install started
+      # failing; nothing in the repo would have caught it.
+      - name: Build
+        run: npm run build
+        env:
+          GATSBY_TELEMETRY_DISABLED: "1"
+          NODE_OPTIONS: "--max_old_space_size=6144"
+
+      - name: Install test harness
+        working-directory: tests
+        run: |
+          npm ci
+          npx playwright install --with-deps chromium
+
+      # Reads public/ off disk, so it needs no server.
+      - name: Smoke (build output)
+        working-directory: tests
+        run: npm run test:smoke
+
+      - name: Serve the build
+        run: |
+          npx gatsby serve --prefix-paths -p 9100 &
+          for i in $(seq 1 60); do
+            if curl -sf -o /dev/null http://localhost:9100/tech-blog/; then
+              echo "serving after ${i}s"; exit 0
+            fi
+            sleep 1
+          done
+          echo "gatsby serve did not come up within 60s"; exit 1
+
+      - name: End-to-end
+        working-directory: tests
+        run: npm run test:e2e
+        env:
+          BASE_URL: http://localhost:9100/tech-blog/
+
+      # Runs in the Playwright container, not on the runner. Screenshot
+      # comparison is only meaningful if the baselines were rasterised in the
+      # same environment: `monospace` is whatever font the OS supplies, and it
+      # resolves three different ways across a dev machine (DejaVu Sans Mono),
+      # this runner, and this image (WenQuanYi Zen Hei Mono). Body text hid the
+      # problem because Open Sans is a webfont; the code blocks did not.
+      # tests/README.md documents regenerating baselines the same way.
+      - name: Visual regression
+        run: |
+          docker run --rm --network host \
+            -v "$PWD/tests":/tests -w /tests \
+            --user "$(id -u):$(id -g)" -e HOME=/tmp \
+            -e BASE_URL=http://localhost:9100/tech-blog/ \
+            -e CI=true \
+            mcr.microsoft.com/playwright:v1.62.1-noble \
+            npx playwright test --project=desktop --project=tablet --project=mobile
+
+      - name: Upload failure artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            tests/test-results/
+            tests/playwright-report/
+          retention-days: 7

.npmrc

@@ -0,0 +1,4 @@
+# gatsby-plugin-decap-cms declares its webpack toolchain as peer dependencies and
+# several Gatsby 5 plugins still name React 16/17 in their peer ranges. Matching
+# nyc-spa, which ships this same stack on Netlify.
+legacy-peer-deps=true

.nvmrc

@@ -0,0 +1 @@
+24

.prettierrc.json

@@ -1,4 +1,6 @@
 {
   "printWidth": 100,
-  "singleQuote": false
+  "singleQuote": false,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
 }

README.md

@@ -41,7 +41,7 @@ boldare-tech/
 
 1. Clone this repository or add/edit a file
 [directly on GitHub](https://github.com/boldare/boldare-tech/new/master/content/posts)
-2. Use `yarn add-article` command to create a new structure for the post 📂
+2. Use `npm run add-article` command to create a new structure for the post 📂
 3. Write an article in [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
 syntax and save it in created file by script, English language is preferred ✍️
 4. Put an image (post avatar) in `static/img`, technology icon is preferred 🖼

content/meta/config.js

@@ -43,6 +43,9 @@ Any helpful contributions are welcome. 3 lines, 3 paragraphs? Doesn’t matter.`
     appId: process.env.FB_APP_ID || ""
   },
   google: {
-    analyticsId: process.env.GOOGLE_ANALYTICS_ID || ""
+    // Universal Analytics was shut down by Google, so the old GOOGLE_ANALYTICS_ID
+    // collected nothing. Tag Manager, matching the main Boldare site. The plugin
+    // is only registered when this is set, so builds work without it.
+    tagManagerId: process.env.GTM_ID || ""
   }
 };

content/pages/how-to-contribute.md

@@ -14,7 +14,7 @@ There are two ways to contribute:
 👉 Using CMS system
 
 1. Go to [admin panel](../admin/)
-or click `+` icon in sidebar (skip points 2. and 3. in that case).
+   or click `+` icon in sidebar (skip points 2. and 3. in that case).
 2. Go to `Blog Articles` or click `Quick add` at the very top of the page.
 3. Click `New Blog Article`.
 4. Create article by providing all required data, also upload `cover`.
@@ -40,10 +40,10 @@ boldare-tech/
 ```
 
 1. Clone this repository or add/edit a file
-[directly on GitHub](https://github.com/boldare/boldare-tech/new/master/content/posts)
-2. Use `yarn add-article` command to create a new structure for the post 📂
+   [directly on GitHub](https://github.com/boldare/boldare-tech/new/master/content/posts)
+2. Use `npm run add-article` command to create a new structure for the post 📂
 3. Write an article in [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
-syntax and save it in created file by script, English language is preferred ✍️
+   syntax and save it in created file by script, English language is preferred ✍️
 4. Put an image (post avatar) in `static/img`, technology icon is preferred 🖼
 5. Update the following required tags at the very top of the article 👆
 
@@ -59,4 +59,4 @@ postAuthor: Your Name
 
 6. Create a pull request to `master` branch to collaborate 🙌
 7. Before merging remember to bump the article date in filename
-to the current date
+   to the current date

content/posts/2018-04-03_how-does-slack-communicate-with-spotify.md

@@ -44,7 +44,7 @@ More precisely:
 - the app exposes HTTP port 4381,
 - request path is `/play.json`,
 - request parameters contain data about the song/album to be launched and some
-additional security-related parameters (CSRF, oauth).
+  additional security-related parameters (CSRF, oauth).
 
 We found it!
 

content/posts/2018-04-09_is-mysql-autoincrement-really-monotonic.md

@@ -134,7 +134,7 @@ we query the db during this short between-commit phase:
 1. we retrieve a single row, `ID = 2`,
 2. we process this batch of one row,
 3. we store the `ID = 2` state for the next batch, telling it "you should
-add `where ID > 2` to your query".
+   add `where ID > 2` to your query".
 
 We've just ommited the `alfa` row!
 
@@ -143,7 +143,7 @@ We've just ommited the `alfa` row!
 Here's a list of proposals that might work (or might not):
 
 1. Exploit the `created_at` column to improve the situation? I don't think it'll help,
-but that's one of the modes that Kafka JDBC connector can operate in.
+   but that's one of the modes that Kafka JDBC connector can operate in.
 
 2. Wait X seconds until all transactions with `ID < N` are commited (e.g. [ innodb_lock_wait_timeout](https://dev.mysql.com/doc/refman/5.7/en/innodb-parameters.html#sysvar_innodb_lock_wait_timeout) + 5 seconds).
 

content/posts/2018-05-29_make-jaxb-great-again.md

@@ -83,19 +83,19 @@ available. Two plugins seemed interesting for me:
 All right, let's plug them in! ;)
 
 1. Add an appropriate _extension_ to your `pom.xml` file to grab the dependency
-(kind of):
+   (kind of):
     ```
     <extension>net.codesup.util:jaxb2-rich-contract-plugin:1.18.0</extension>
     ```
-This goes into `build.plugins.configuration.extensions`.
+   This goes into `build.plugins.configuration.extensions`.
 
 1. Add two _extensionArg_ elements in order to enable chosen plugins (consult
-  the docs in order to find the required flags for other plugins):
+   the docs in order to find the required flags for other plugins):
     ```
     <extensionArg>-Xfluent-builder</extensionArg>
     <extensionArg>-Ximmutable</extensionArg>
     ```
-This, on the other hand, goes into `build.plugins.executions.configuration.xsdOptions.extensionArgs`.
+   This, on the other hand, goes into `build.plugins.executions.configuration.xsdOptions.extensionArgs`.
 
 So far so good! After a quick `mvn clean install` we can exploit a great, fluent
 builder API for object construction. A quick demo:
@@ -158,7 +158,7 @@ your classes. How?
     ```
 
 1. Setup the bindings file in pom.xml and make sure that JAXB extensions are enabled.
-In our scenarion, two lines have to be added to the `xsdOption` section:
+   In our scenarion, two lines have to be added to the `xsdOption` section:
 
     ```xml
     <bindingFile>${basedir}/src/main/resources/binding.xml</bindingFile>

content/posts/2018-10-24_jpa-and-uuid.md

@@ -159,8 +159,8 @@ the pretty `@Builder` generated by Lombok.
 ## Conclusions
 
 1. `@PrePersist` is too late for programmatically generating an id,
-2. Many thanks to the `Lombok` team for including the `Builder.Default` annotation, otherwise 
-we'd have to give up using `Builder` on this class,
+2. Many thanks to the `Lombok` team for including the `Builder.Default` annotation, otherwise
+   we'd have to give up using `Builder` on this class,
 3. All hail to `Java9` and its `ImmutableCollections` for their validation and nice error messages.
 
 

content/posts/2019-05-09_how-to-quickly-remove-merged-remote-branches.md

@@ -18,20 +18,20 @@ let's find a better one.
 *Notice: pay attention to the name of your remote and change it if needed.*
 
 1. Fetch all changes from the repository, cleaning up stale remote references
-at the same time.
+   at the same time.
     ```
     git fetch -p
     ```
 
 1. Checkout the branch you consider "if it's merged to this branch, it can be removed".
-For us, it was `develop`. Update your local repository with most recent changes.
+   For us, it was `develop`. Update your local repository with most recent changes.
     ```
     git checkout develop
     git merge --ff-only origin/develop
     ```
 
 1. Create a list of branches to be removed, filtering out all `release` branches, `master`
-and `develop`. Dump it to a file.
+   and `develop`. Dump it to a file.
 
     ```
     git branch -r --merged \