fix: transpile JS for old browsers (KaiOS 2.x / Gecko 48)

- run both JS bundles through js.Babel (targets incl. firefox >= 48)
- work around Hugo's minifier rewriting Math.pow/Math.sqrt as ** regardless
  of minify.tdewolff.js.version (scripts/babel-keep-math-calls.cjs)
- polyfill NodeList.forEach, avoid it in the taxonomy inline script
- install Babel and postcss-preset-env (legacy CSS) in the GitHub workflow

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: andre-dietrich

.babelrc

@@ -1,10 +1,18 @@
 {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": ">0.5%, last 2 versions, Firefox ESR, not dead"
-        }
-      ]
+  // Used by js.Babel in layouts/partials/essentials/script.html.
+  // "firefox >= 48" keeps KaiOS 2.x (Gecko 48) working, see also the
+  // minify.tdewolff.js.version setting in hugo.toml.
+  // The bundles are plain concatenated scripts (UMD plugins rely on a
+  // top-level `this`), so they must not be parsed as ES modules.
+  "sourceType": "script",
+  "plugins": ["./scripts/babel-keep-math-calls.cjs"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": ">0.5%, last 2 versions, Firefox ESR, not dead, firefox >= 48",
+        "modules": false
+      }
     ]
-  }
+  ]
+}

.github/workflows/website.yml

@@ -40,8 +40,8 @@ jobs:
         uses: actions/configure-pages@v5
       - name: Install Node.js dependencies
         run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
-      - name: Install PostCSS, Tailwind and Autoprefixer
-        run: npm install postcss postcss-cli tailwindcss autoprefixer
+      - name: Install PostCSS, Tailwind, Autoprefixer and Babel
+        run: npm install postcss postcss-cli postcss-preset-env tailwindcss autoprefixer @babel/cli @babel/core @babel/preset-env
       - name: Install Python
         run: sudo apt-get install python3
       - name: Build World-Map

assets/js/legacy-polyfills.js

@@ -0,0 +1,7 @@
+// Polyfills for old browsers such as KaiOS 2.x (Gecko 48). Loaded first in the
+// main bundle (see hugo.toml), modern browsers skip them.
+
+// NodeList.forEach (Firefox 50+), used e.g. by search.js and tab.js
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}

hugo.toml

@@ -49,11 +49,18 @@ enable = true
 source = 'assets/notwatching/hugo_stats\.json'
 target = 'css'
 
+# Keep minified JS at ES2015 syntax for old engines such as KaiOS 2.x (Gecko 48),
+# the default (latest) lets the minifier emit newer syntax. It does not cover its
+# Math.pow/Math.sqrt => ** rewrite, see scripts/babel-keep-math-calls.cjs.
+[minify.tdewolff.js]
+version = 2015
+
 ############################ Security ############################
 # Newer Hugo versions (0.165 fails, 0.159 still works) no longer allow the tailwindcss binary by default,
 # which breaks css.TailwindCSS in layouts/partials/essentials/style.html.
+# babel is needed by js.Babel in layouts/partials/essentials/script.html.
 [security.exec]
-allow = ['^(dart-)?sass$', '^go$', '^git$', '^node$', '^postcss$', '^tailwindcss$']
+allow = ['^(dart-)?sass$', '^go$', '^git$', '^node$', '^postcss$', '^tailwindcss$', '^babel$']
 
 ############################# Modules ############################
 [module]
@@ -144,6 +151,9 @@ lazy = true
 
 # JS Plugins
 [[params.plugins.js]]
+link = "js/legacy-polyfills.js"
+lazy = false
+[[params.plugins.js]]
 link = "js/search.js"
 lazy = false
 [[params.plugins.js]]

layouts/_default/taxonomy.html

@@ -35,13 +35,14 @@
       var activeTag = params.get('tag');
 
       if (activeTag) {
-        document.querySelectorAll('#taxonomy-post-list .post-card').forEach(function (card) {
+        // [].forEach.call: runs before the NodeList.forEach polyfill (old engines, e.g. KaiOS)
+        [].forEach.call(document.querySelectorAll('#taxonomy-post-list .post-card'), function (card) {
           var tags = card.dataset.tags ? card.dataset.tags.split(',') : [];
           card.style.display = tags.indexOf(activeTag) === -1 ? 'none' : '';
         });
       }
 
-      document.querySelectorAll('.tag-filter-link').forEach(function (link) {
+      [].forEach.call(document.querySelectorAll('.tag-filter-link'), function (link) {
         var linkTag = new URL(link.href).searchParams.get('tag');
         if (linkTag === activeTag) {
           link.classList.remove('bg-white', 'dark:bg-darkmode-body');

layouts/partials/essentials/script.html

@@ -0,0 +1,64 @@
+<!-- JS Plugins + Main script -->
+{{ $scripts := slice }}
+{{ $scriptsLazy := slice }}
+{{ range site.Params.plugins.js }}
+  {{ if findRE "^http" .link }}
+    <script
+      src="{{ .link | relURL }}"
+      type="application/javascript"
+      {{ .attributes | safeHTMLAttr }}></script>
+  {{ else }}
+    {{ if not .lazy }}
+      {{ $scripts = $scripts | append (resources.Get .link) }}
+    {{ else }}
+      {{ $scriptsLazy = $scriptsLazy | append (resources.Get .link) }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+
+<!-- main script -->
+{{ $scripts = $scripts | append (resources.Get "js/main.js") }}
+{{ $scripts = $scripts | resources.Concat "js/script.js" }}
+
+{{ $scriptsLazy = $scriptsLazy | resources.Concat "js/script-lazy.js" }}
+
+{{/* Transpile for old engines such as KaiOS 2.x (Gecko 48), see .babelrc.
+  Overrides the theme's partial only to add this step. */}}
+{{ $babelOpts := dict "config" ".babelrc" }}
+{{ $scripts = $scripts | js.Babel $babelOpts }}
+{{ $scriptsLazy = $scriptsLazy | js.Babel $babelOpts }}
+
+{{ if hugo.IsProduction }}
+  {{ $scripts = $scripts | minify | fingerprint }}
+  {{ $scriptsLazy = $scriptsLazy | minify | fingerprint }}
+{{ end }}
+
+{{/* scripts */}}
+<script
+  crossorigin="anonymous"
+  integrity="{{ $scripts.Data.Integrity }}"
+  src="{{ $scripts.RelPermalink }}"></script>
+
+{{/* scripts lazy */}}
+<script
+  defer
+  async
+  crossorigin="anonymous"
+  integrity="{{ $scriptsLazy.Data.Integrity }}"
+  src="{{ $scriptsLazy.RelPermalink }}"></script>
+
+<!-- progressive web app -->
+{{ partialCached "pwa.html" . }}
+
+
+<!-- cookie consent -->
+{{ partialCached "cookie-consent.html" . }}
+
+
+<!-- google adsense -->
+{{ partialCached "adsense-script.html" . }}
+
+
+<!-- cookie consent -->
+{{ partialCached "announcement-script.html" . }}

scripts/babel-keep-math-calls.cjs

@@ -0,0 +1,31 @@
+// Babel plugin, see .babelrc: rewrites Math.pow(a, b) / Math.sqrt(x) as
+// Math["pow"](a, b) / Math["sqrt"](x).
+//
+// Hugo's JS minifier (tdewolff/minify) turns Math.pow(a, b) into a**b and
+// Math.sqrt(x) into x**.5, ignoring minify.tdewolff.js.version. The **
+// operator is a SyntaxError in old engines such as KaiOS 2.x (Gecko 48) and
+// takes the whole bundle down. The bracket form is not matched by that
+// optimization, the minifier still prints it as Math.pow(...) / Math.sqrt(...).
+const NAMES = new Set(["pow", "sqrt"]);
+
+module.exports = function ({ types: t }) {
+  return {
+    name: "keep-math-calls",
+    visitor: {
+      CallExpression(path) {
+        const callee = path.node.callee;
+        if (
+          t.isMemberExpression(callee) &&
+          !callee.computed &&
+          t.isIdentifier(callee.object, { name: "Math" }) &&
+          t.isIdentifier(callee.property) &&
+          NAMES.has(callee.property.name) &&
+          !path.scope.getBinding("Math")
+        ) {
+          callee.property = t.stringLiteral(callee.property.name);
+          callee.computed = true;
+        }
+      },
+    },
+  };
+};