Upgrade Node tooling

.eslintignore

@@ -1,4 +0,0 @@
-node_modules
-venv
-.venv
-bakerydemo/collect_static

.eslintrc

@@ -1,20 +0,0 @@
-{
-  "extends": ["eslint:recommended"],
-  "parserOptions": {
-    "ecmaVersion": 2020
-  },
-  "env": {
-    "browser": true
-  },
-  "rules": {
-    // allow no lines between single line members (e.g. static declarations)
-    "lines-between-class-members": [
-      "error",
-      "always",
-      { "exceptAfterSingleLine": true }
-    ],
-    // note you must disable the base rule as it can report incorrect errors
-    "no-use-before-define": "off",
-    "no-underscore-dangle": "error"
-  }
-}

.github/workflows/lint.yml

@@ -12,31 +12,20 @@ jobs:
   lint-server:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - name: Set up Python
-        uses: actions/setup-python@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-python@v4
         with:
           python-version: '3.12'
           cache: 'pip'
           cache-dependency-path: 'requirements/*.txt'
-      - name: Install dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install -r requirements/development.txt
-      - name: Lint server
-        run: |
-          make lint-server
+      - run: pip install -r requirements/development.txt
+      - run: make lint-server
   lint-client:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - name: Set up Node
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Lint client
-        run: |
-          make lint-client
+      - run: npm ci
+      - run: make lint-client

.nvmrc

@@ -1 +1 @@
-22
+24

.pre-commit-config.yaml

@@ -9,27 +9,29 @@ repos:
         args: [--fix]
       - id: ruff-format
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.1.0
+    rev: v3.7.4
     hooks:
       - id: prettier
         types_or: [css, scss, javascript, ts, tsx, json, yaml]
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.55.0
+    rev: v9.39.1
     hooks:
       - id: eslint
         types: [file]
         files: \.(js)$
         args: [--report-unused-disable-directives]
         additional_dependencies:
-          - eslint@8.55.0
+          - eslint@9.39.1
+          - '@eslint/js@9.39.1'
+          - globals@16.5.0
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
-    rev: v15.10.3
+    rev: v16.26.1
     hooks:
       - id: stylelint
         files: \.css$
         additional_dependencies:
-          - stylelint@15.11.0
-          - stylelint-config-standard@34.0.0
+          - stylelint@16.26.1
+          - stylelint-config-standard@39.0.1
   - repo: https://github.com/rtts/djhtml
     rev: 3.0.6
     hooks:

bakerydemo/static/css/main.css

@@ -34,9 +34,10 @@ each detail view
   --dark-orange: #833701;
   --font--primary: 'Marcellus', serif;
   /* stylelint-disable */
-  --font--secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
-    Roboto, 'Helvetica Neue', Arial, sans-serif, Apple Color Emoji,
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font--secondary:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
+    'Helvetica Neue', Arial, sans-serif, Apple Color Emoji, 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
   /* stylelint-enable */
   --font-sm: 1rem;
   --font-md: 1.125rem;
@@ -1550,7 +1551,6 @@ input[type='radio'] {
 .homepage .featured-cards__link {
   display: flex;
   flex-direction: row;
-  justify-content: baseline;
   font-family: var(--font--primary);
   margin: 0 auto;
   width: max-content;
@@ -1702,9 +1702,6 @@ input[type='radio'] {
 
 /* Bootstrap Equal height rows */
 .row-eq-height {
-  display: box;
-  display: flex;
-  display: flexbox;
   display: flex;
   flex-wrap: wrap;
 }
@@ -2085,7 +2082,7 @@ input[type='radio'] {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
 }

bakerydemo/static/js/main.js

@@ -1,23 +1,23 @@
-const navigation = document.querySelector('[data-navigation]');
-const mobileNavigation = navigation.querySelector('[data-mobile-navigation]');
-const body = document.querySelector('body');
-const mobileNavigationToggle = navigation.querySelector(
-  '[data-mobile-navigation-toggle]',
-);
+document.addEventListener('DOMContentLoaded', () => {
+  const navigation = document.querySelector('[data-navigation]');
+  const mobileNavigation = navigation.querySelector('[data-mobile-navigation]');
+  const body = document.querySelector('body');
+  const mobileNavigationToggle = navigation.querySelector(
+    '[data-mobile-navigation-toggle]',
+  );
 
-function toggleMobileNavigation() {
-  if (mobileNavigation.hidden) {
-    body.classList.add('no-scroll');
-    mobileNavigation.hidden = false;
-    mobileNavigationToggle.setAttribute('aria-expanded', 'true');
-  } else {
-    body.classList.remove('no-scroll');
-    mobileNavigation.hidden = true;
-    mobileNavigationToggle.setAttribute('aria-expanded', 'false');
+  function toggleMobileNavigation() {
+    if (mobileNavigation.hidden) {
+      body.classList.add('no-scroll');
+      mobileNavigation.hidden = false;
+      mobileNavigationToggle.setAttribute('aria-expanded', 'true');
+    } else {
+      body.classList.remove('no-scroll');
+      mobileNavigation.hidden = true;
+      mobileNavigationToggle.setAttribute('aria-expanded', 'false');
+    }
   }
-}
 
-document.addEventListener('DOMContentLoaded', () => {
   mobileNavigationToggle.addEventListener('click', () => {
     toggleMobileNavigation();
   });

eslint.config.mjs

@@ -0,0 +1,19 @@
+import js from '@eslint/js';
+import globals from 'globals';
+
+export default [
+  {
+    ignores: ['node_modules', 'venv', '.venv', 'bakerydemo/collect_static'],
+  },
+  {
+    ...js.configs.recommended,
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'script',
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+];

package.json

@@ -3,14 +3,18 @@
   "version": "1.0.0",
   "repository": "https://github.com/wagtail/bakerydemo",
   "private": true,
-  "engines": {
-    "node": ">=22"
+  "devEngines": {
+    "packageManager": {
+      "name": "npm"
+    }
   },
   "devDependencies": {
-    "eslint": "^8.55.0",
-    "prettier": "^3.1.0",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard": "^34.0.0"
+    "@eslint/js": "^9.39.2",
+    "eslint": "^9.39.2",
+    "globals": "^16.5.0",
+    "prettier": "^3.7.4",
+    "stylelint": "^16.26.1",
+    "stylelint-config-standard": "^39.0.1"
   },
   "scripts": {
     "fix:js": "eslint --ext .js --fix .",