Replace Webpack, update to Node 24

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   docker_cypress:
     docker:
-      - image: cypress/base:14.17.0
+      - image: cypress/base:24.13.0
 
 jobs:
   # Circle's "Auto-cancel redundant builds" feature doesn't work on the default branch. When merging PRs on data, this
@@ -22,8 +22,8 @@ jobs:
     executor: docker_cypress
     resource_class: large
     environment:
-        HUGO_VERSION: '0.139.0'
-        HUGO_BINARY: hugo_extended_0.139.0_linux-amd64
+        HUGO_VERSION: '0.140.0'
+        HUGO_BINARY: hugo_extended_0.140.0_linux-amd64
     steps:
       - run:
           command: |
@@ -51,8 +51,8 @@ jobs:
       executor: docker_cypress
       resource_class: large
       environment:
-        HUGO_VERSION: '0.139.0'
-        HUGO_BINARY: hugo_extended_0.139.0_linux-amd64
+        HUGO_VERSION: '0.140.0'
+        HUGO_BINARY: hugo_extended_0.140.0_linux-amd64
       steps:
         - run:
             command: |
@@ -72,7 +72,7 @@ jobs:
               yarn cypress verify
               hugo server --baseURL "http://localhost" --disableFastRender --minify &
               # Wait for server to deploy before continuing (with 1 minute timeout)
-              yarn wait-on tcp:1314 -t 120000
+              yarn wait-on "http://localhost:1314/generator/" -t 240000
               # Only record the Cypress tests if the Cypress env var is set, see:
               # https://stackoverflow.com/a/13864829
               if [ -z ${CYPRESS_RECORD_KEY+x} ]; then yarn cypress run; else yarn cypress run --record; fi

.eslintrc.js

@@ -1,5 +1,3 @@
-const path = require('path');
-
 module.exports = {
     parser: '@typescript-eslint/parser',
     env: {
@@ -90,18 +88,21 @@ module.exports = {
     globals: {
         Atomics: 'readonly',
         SharedArrayBuffer: 'readonly',
-        BASE_URL: 'readonly',
-        LOCALE: 'readonly',
-        SUPPORTED_LANGUAGES: 'readonly',
-        SUPPORTED_COUNTRIES: 'readonly',
 
-        // defined in `src/general.js`
+        // defined by included scripts (`translations-<lang>.gen.js` and `translations-requests.gen.js`)
         I18N_DEFINITION: 'readonly',
         I18N_DEFINITION_REQUESTS: 'readonly',
+
+        // defined in `src/general.js`
         PARAMETERS: 'readonly',
 
-        // defined in `webpack.common.js`
-        CODE_VERSION: 'readonly',
+        // defined in `scripts.html`
+        SUPPORTED_COUNTRIES: 'readonly',
+        LOCALE: 'readonly',
+        SUPPORTED_LANGUAGES: 'readonly',
+        BASE_URL: 'readonly',
+        hugoDevMode: 'readonly',
+        PDF_WORKER_URL: 'readonly',
     },
     settings: {
         react: {
@@ -146,6 +147,5 @@ module.exports = {
         },
         // The Preact config includes Jest rules but we don't have Jest installed. This stops them from complaining.
         jest: { version: 'n/a' },
-        'import/resolver': { webpack: { config: path.resolve(__dirname, 'webpack.common.js') } },
     },
 };

.nvmrc

@@ -1 +1 @@
-14.17.0
+24.13.0

README.md

@@ -15,10 +15,10 @@ Datenanfragen.de is designed as a static website, running on [Hugo](https://gohu
 
 To build the project locally for development, follow these steps:
 
-1. Install [Yarn 1](https://classic.yarnpkg.com/en/docs/install) (Classic) and the extended(!) version of [Hugo](https://gohugo.io/getting-started/quick-start/) (v0.88.1).
+1. Install [Yarn 1](https://classic.yarnpkg.com/en/docs/install) (Classic) and the extended(!) version of [Hugo](https://gohugo.io/getting-started/quick-start/) (v0.140.0).
 2. Clone the repo and run `yarn` in the root directory of the repo to fetch all required dependencies.
 3. Run the deploy script (`./deploy.sh`) to fetch and prepare the required resources from our [data](https://github.com/datenanfragen/data) repository.
-4. Open two terminal windows. In the first, run `yarn dev` to start the Webpack file watcher, which will automatically build the JS files. In the second one, run `hugo server` to have Hugo continuously build the actual website and the SCSS.
+4. Open two terminal windows. In the first, run `yarn dev` to start the translations file watcher, which will automatically build the translations files. In the second one, run `hugo server` to have Hugo continuously build the actual website and the SCSS.
 5. Now the website should be served by Hugo on multiple ports, starting from `1313`, for the different language versions.
 
 We recommend building and developing on Linux or macOS. If you are on Windows, use WSL.

components-package/src/index.ts

@@ -4,7 +4,6 @@ import type { I18nLanguage } from '../../src/types/globals';
 
 import { supported_countries } from './generated/globals.json';
 
-import { version } from '../package.json';
 import i18n_definition_de from '../../src/i18n/de.json';
 import i18n_definition_en from '../../src/i18n/en.json';
 import i18n_definition_fr from '../../src/i18n/fr.json';
@@ -51,9 +50,6 @@ export const setupWindow = ({
     // @ts-ignore
     window.BASE_URL = languages[locale].base_url;
 
-    // @ts-ignore
-    window.CODE_VERSION = version;
-
     // @ts-ignore
     window.SUPPORTED_COUNTRIES = supported_countries || [];
 

config/_default/config.toml

@@ -19,3 +19,16 @@ hint = "picture"
 
 [params]
 mainSections = ['blog']
+
+# Mount the `src` dir to `assets/js` so that Hugo Pipes can find it. To do so, we need to recreate the default `assets`
+# mount, which would otherwise be lost.
+[mounts]
+  [[module.mounts]]
+    source = 'assets'
+    target = 'assets'
+  [[module.mounts]]
+    source = 'src'
+    target = 'assets/js'
+
+[build]
+  noJSConfigInAssets = true

deploy.sh

@@ -45,7 +45,7 @@ cp data_tmp/supervisory-authorities/* static/db/sva
 
 # Run the script for handling obsolete records first because that enriches the JSONs we will rename next with
 # redirection target metadata.
-yarn tsm scripts/handle-obsolete-records.ts
+yarn tsx scripts/handle-obsolete-records.ts
 
 # Unfortunately, Hugo only accepts .md files as posts, so we have to rename our JSONs, see https://stackoverflow.com/a/27285610
 # To speed this up, we rename all files once in `data_tmp` and only then copy them to the language directories.
@@ -59,9 +59,9 @@ cp -r data_tmp/templates/* static/templates
 
 mv data_tmp/schema.json data_tmp/schema-supervisory-authorities.json data_tmp/schema-obsolete-records.json static
 
-yarn tsm scripts/compile-company-packs.ts
-yarn tsm scripts/compile-data-dump.ts
-yarn tsm scripts/collect-sva-names.ts
+yarn tsx scripts/compile-company-packs.ts
+yarn tsx scripts/compile-data-dump.ts
+yarn tsx scripts/collect-sva-names.ts
 
 rm -rf data_tmp
 
@@ -70,7 +70,7 @@ cd .. || exit
 
 yarn licenses generate-disclaimer --ignore-optional --ignore-platform > static/NOTICES.txt
 
-echo "Running Webpack and Hugo…"
+echo "Running Hugo and translations build…"
 yarn run build
 
 if [ "$CONTEXT" = "production" ]
@@ -81,7 +81,3 @@ else
     cp _headers public/_headers
     cp _redirects public/_redirects
 fi
-
-# Finds all generated css files, matches and removes the second last non-dot characters (the md5 hash) and renames the files to the new filename without hash
-# This is really not a good fix and I beg hugo to change this!
-find "public" -regex '.*/styles/.*\.css' -print | sed -e "p" -e "s/\(.*\.min\)\.[^\.]*\(\.[^\.]*\)$/\1\2/" | xargs -P $process_number -n 2 mv

layouts/_default/baseof.html

@@ -31,12 +31,8 @@
     <link rel="preload" as="font" crossorigin="anonymous" integrity="sha384-sWa20lMbvqJHIjx/smLcYHI2mJE8aJTZ1nvZaP6APJ0D45qxe+r7+/UYGy47CuLc" type="font/woff2" href="https://static.dacdn.de/fonts/spartan-mb/SpartanMB-1005-ExtraBold.woff">
     {{ if eq .Type "generator" -}}
     {{- end }}
-    {{ $style := resources.Get "styles/index.scss" | toCSS (dict "enableSourceMap" .Site.Params.devMode) | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify | fingerprint }}
-    {{ $style_link := $style.RelPermalink | absURL }}
-    {{ if (or (eq hugo.Environment "production") (eq hugo.Environment "staging")) }}
-        {{ $style_link = $style_link | replaceRE "\\.[^\\.]*(\\.[^\\.]*)$" "$1" }}
-    {{ end }}
-    <link rel="stylesheet" href="{{ $style_link }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous">
+    {{ $style := resources.Get "styles/index.scss" | toCSS (dict "enableSourceMap" .Site.Params.devMode) | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify }}
+    <link rel="stylesheet" href="{{ $style.RelPermalink | absURL }}" crossorigin="anonymous">
 
     {{ partial "head/meta.html" . }}
     {{ partial "head/favicons.html" . }}

layouts/partials/functions/supported-countries.html

@@ -0,0 +1,18 @@
+{{ $countryCounts := dict }}
+
+{{ range where $.Site.Pages "Type" "company" }}
+    {{ range .Param "relevant-countries" }}
+        {{ $currentCount := index $countryCounts . | default 0 }}
+        {{ $countryCounts = merge $countryCounts (dict . (add $currentCount 1)) }}
+    {{ end }}
+{{ end }}
+
+{{ $supportedCountries := slice }}
+
+{{ range $country, $count := $countryCounts }}
+    {{ if ge $count 10 }}
+        {{ $supportedCountries = $supportedCountries | append $country }}
+    {{ end }}
+{{ end }}
+
+{{ return $supportedCountries }}

layouts/partials/loading-indicator.html

@@ -1,9 +1,5 @@
-{{ $loader := resources.Get "styles/loader.scss" | toCSS (dict "enableSourceMap" .Site.Params.devMode) | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify | fingerprint }}
-{{ $link := $loader.RelPermalink | absURL }}
-{{ if (or (eq hugo.Environment "production") (eq hugo.Environment "staging")) }}
-    {{ $link = $link | replaceRE "\\.[^\\.]*(\\.[^\\.]*)$" "$1" }}
-{{ end }}
-<link rel="stylesheet" href="{{ $link }}" integrity="{{ $loader.Data.Integrity }}" crossorigin="anonymous">
+{{ $loader := resources.Get "styles/loader.scss" | toCSS (dict "enableSourceMap" .Site.Params.devMode) | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify }}
+<link rel="stylesheet" href="{{ $loader.RelPermalink | absURL }}" crossorigin="anonymous">
 <style>
 .sk-folding-cube {
     position: fixed;