chore: upgrade dependencies (#36)

.github/workflows/01-lint.yml

@@ -10,7 +10,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [ 14.x ]
+                node-version: [ 20.x ]
 
         steps:
             -   uses: actions/checkout@v2

.github/workflows/02-deploy.yml

@@ -10,7 +10,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [ 14.x ]
+                node-version: [ 20.x ]
 
         steps:
             -   uses: actions/checkout@v2

.husky/pre-commit

@@ -1,8 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-lint-staged
-
-# unfortunately I have no idea how to use multiple tsconfigs with lint-staged
-# and tsc-files modules seems have no solution for that
-tsc --noEmit
+npm test

.husky/pre-push

@@ -1,7 +1,3 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 # lint project
 yarn run lint
 

eleventy/shortrcodes/__snapshots__/logoShortcode.unit.test.js.snap

@@ -2,23 +2,23 @@
 
 exports[`logoShortcode should match snapshot 1`] = `
 "<svg 
-    version=\\"1.1\\"
-    baseProfile=\\"full\\"
-    width=\\"100\\" height=\\"100\\"
-    xmlns=\\"http://www.w3.org/2000/svg\\">
-      <g transform=\\"scale(0.5)\\">
+    version="1.1"
+    baseProfile="full"
+    width="100" height="100"
+    xmlns="http://www.w3.org/2000/svg">
+      <g transform="scale(0.5)">
         <path
-          d=\\"m 24.5 143 l 150 0 l -75 -129.9038 z m 19.0021 -32.4135 l 37.1398 0 l -18.5699 32.164 z m 55.9979 -32.6632 l -18.5699 -32.164 l 37.1398 0 z m 0 64.8272 l -37.2839 -64.5775 l 74.5678 -0.0001 z m 37.428 0 l -18.5699 -32.164 l 37.1398 0 z\\"
-          fill=\\"white\\"
-          stroke=\\"none\\"
+          d="m 24.5 143 l 150 0 l -75 -129.9038 z m 19.0021 -32.4135 l 37.1398 0 l -18.5699 32.164 z m 55.9979 -32.6632 l -18.5699 -32.164 l 37.1398 0 z m 0 64.8272 l -37.2839 -64.5775 l 74.5678 -0.0001 z m 37.428 0 l -18.5699 -32.164 l 37.1398 0 z"
+          fill="white"
+          stroke="none"
         />
         <circle 
-          r=\\"90\\"
-          stroke=\\"black\\"
-          fill=\\"none\\"
-          stroke-width=\\"20\\"
-          stroke-dasharray=\\"392 20 26 20 26 20 26 20\\"
-          transform=\\"translate(100, 100) rotate(30)\\"
+          r="90"
+          stroke="black"
+          fill="none"
+          stroke-width="20"
+          stroke-dasharray="392 20 26 20 26 20 26 20"
+          transform="translate(100, 100) rotate(30)"
         />
       </g>
     </svg>"

eslint.config.mjs

@@ -0,0 +1,55 @@
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ['eleventy/**/*.js', 'jest/**/*.js', 'src/_data/**/*.js'],
+  },
+  ...compat.extends('plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'),
+  {
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2018,
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    rules: {
+      'prettier/prettier': [
+        2,
+        {
+          trailingComma: 'es5',
+          singleQuote: true,
+          printWidth: 100,
+        },
+      ],
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/ban-ts-comment': 0,
+    },
+  },
+];

package.json

@@ -17,46 +17,46 @@
     "serve": "npm-run-all clean --parallel serve:*",
     "debug": "DEBUG=* eleventy",
     "php:server": "php -S localhost:8000 -t '_site/'",
-    "postinstall": "husky install"
+    "prepare": "husky"
   },
   "author": "Jiri Bazant ([email protected])",
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "@11ty/eleventy": "^1.0.0",
+    "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-navigation": "^0.3.2",
     "@11ty/eleventy-plugin-rss": "^1.1.2",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^29.5.14",
     "@types/service-worker-mock": "^2.0.1",
     "@types/stats.js": "^0.17.0",
     "@types/three": "^0.139.0",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "eleventy-plugin-lazyimages": "^2.1.2",
-    "eslint": "^8.12.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.3.7",
-    "luxon": "^2.3.1",
-    "markdown-it": "^12.3.2",
-    "nock": "^13.2.4",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.10",
+    "luxon": "^3.5.0",
+    "markdown-it": "^14.1.0",
+    "nock": "^13.5.6",
     "node-fetch": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.1",
-    "sass": "^1.49.10",
+    "prettier": "^3.4.1",
+    "sass": "^1.81.0",
     "service-worker-mock": "^2.0.5",
     "stats.js": "^0.17.0",
     "terser-webpack-plugin": "^5.3.1",
     "three": "^0.139.2",
-    "ts-jest": "^27.1.4",
-    "ts-loader": "^9.2.8",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
     "ts-shader-loader": "^1.0.6",
-    "typescript": "^4.6.3",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "typescript": "^5.7.2",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },
   "lint-staged": {
     "*.(js|ts)": [

src/_data/cache.json

@@ -1,4 +1,4 @@
 {
-  "jsTimestamp": 220331,
-  "cssTimestamp": 220331
+  "jsTimestamp": 241129,
+  "cssTimestamp": 241129
 }

src/css/_colors.scss

@@ -1,6 +1,8 @@
+@use "sass:color";
+
 $primary-color: #26122f;
-$primary-color-light: lighten($primary-color, 10%);
-$primary-color-dark: darken($primary-color, 10%);
+$primary-color-light: color.adjust($primary-color, $lightness: 10%);
+$primary-color-dark: color.adjust($primary-color, $lightness: -10%);
 
 $text-empathized: #453356;
 $text-empathized-light: #7c5b99;

src/css/_components/cards.scss

@@ -1,24 +1,24 @@
-@import "../_colors";
-@import "../_sizes";
+@use "../_colors";
+@use "../_sizes";
 
 .cards {
+  align-items: stretch;
+  padding: 12px 0;
+
   & > * {
     margin: 12px;
   }
-
-  align-items: stretch;
-  padding: 12px 0;
 }
 
 .card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
-  padding: 10 * $step 5 * $step;
-  background-color: $white;
-  border: 1px solid $secondary-button-color;
-  border-radius: $step;
+  padding: 10 * sizes.$step 5 * sizes.$step;
+  background-color: colors.$white;
+  border: 1px solid colors.$secondary-button-color;
+  border-radius: sizes.$step;
   text-decoration: none;
   font-weight: bold;
 
@@ -28,8 +28,8 @@
   }
 
   &, h2, h3, .theme-icon {
-    color: $muted-color;
-    transition: $transition-default;
+    color: colors.$muted-color;
+    transition: sizes.$transition-default;
   }
 
   p {
@@ -42,12 +42,12 @@
   }
 
   &:hover {
-    border-color: $secondary-button-color-active;
+    border-color: colors.$secondary-button-color-active;
     box-shadow: 1px 1px 2px 2px #ccc;
 
     &, h2, h3, .theme-icon {
-      color: $hovered-color;
-      transition: $transition-default;
+      color: colors.$hovered-color;
+      transition: sizes.$transition-default;
     }
   }
 }

src/css/_components/common.scss

@@ -1,13 +1,13 @@
-@import "../colors";
-@import "../_mixins/blurIn";
+@use "../colors";
+@use "../_mixins/blurIn";
 
 html {
   scroll-behavior: smooth;
 }
 
 .tmpl-home, .tmpl-basic {
   h1 {
-    @include blurIn('h1-blur', 1);
+    @include blurIn.blurIn('h1-blur', 1);
   }
 }
 

src/css/_components/contact.scss

@@ -1,5 +1,5 @@
-@import '../_colors';
-@import '../_sizes';
+@use '../_colors';
+@use '../_sizes';
 
 .contact-form {
   form {
@@ -17,15 +17,15 @@
   }
 
   .form-error {
-    color: $alert-text;
+    color: colors.$alert-text;
     font-style: italic;
     font-size: 0.9em;
-    margin: -$step2 $step2 $step $step2;
+    margin: -(sizes.$step2) sizes.$step2 sizes.$step sizes.$step2;
   }
 
   .form-field-error {
-    color: $alert-text;
-    border: 1px solid $alert-text;
+    color: colors.$alert-text;
+    border: 1px solid colors.$alert-text;
   }
 
   .form-success-info {
@@ -48,27 +48,27 @@
 }
 
 .contact-card {
-  padding: 10 * $step 5 * $step;
-  background-color: $white;
-  border: 1px solid $secondary-button-color;
-  border-radius: $step;
+  padding: 10 * sizes.$step 5 * sizes.$step;
+  background-color: colors.$white;
+  border: 1px solid colors.$secondary-button-color;
+  border-radius: sizes.$step;
   flex: 3;
 
   @media screen {
     &:hover {
-      border-color: $secondary-button-color-active;
+      border-color: colors.$secondary-button-color-active;
       box-shadow: 1px 1px 2px 2px #ccc;
     }
   }
 }
 
 .contact-social {
-  padding: 10 * $step + 1 5 * $step;
+  padding: 10 * sizes.$step + 1 5 * sizes.$step;
   flex: 2;
 
   @media screen {
     hr {
-      border-color: $dark;
+      border-color: colors.$dark;
     }
   }
 }