Update npm depedencies

These are a few major updates with breaking changes and / or
deprecations. In particular:

- 11ty v3 [1]
  - The configuration file has been ESM-ified
  - A few things used by the RSS templates had been deprecated. Those
    have been corrected.
- Sass
  - `transparentize()` -> `color.scale()`
  - Mixed declaration syntax changes [2]

[1]: https://github.com/11ty/eleventy/releases/tag/v3.0.0
[2]: https://sass-lang.com/documentation/breaking-changes/mixed-decls/

Dockerfile

@@ -6,21 +6,20 @@ ARG SITE
 
 WORKDIR /build
 
-COPY package.json package-lock.json /build/
+COPY package.json package-lock.json .
 RUN --mount=type=cache,target=/root/.npm \
 	npm clean-install --omit=dev
 
-COPY styles /build/styles/
+COPY styles/ styles/
 RUN npm run build:styles
 
-COPY .eleventy* /build/
+COPY eleventy.config.mjs .
-COPY assets /build/assets/
+COPY assets assets/
-COPY includes /build/includes/
+COPY includes includes/
-COPY sites/${SITE} /build/sites/${SITE}/
+COPY sites/${SITE} sites/${SITE}/
 # These are symlinked from other sites:
 COPY sites/angestoepselt/_images/home-banner.jpg /build/sites/angestoepselt/_images/
-
+RUN SITE=${SITE} npm run build:site
-RUN SITE=${SITE} npm run build
 
 
 #

eleventy.config.mjs

@@ -1,13 +1,13 @@
-const fs = require('fs');
+import fs from 'fs';
 
-const { DateTime } = require('luxon');
+import { DateTime } from 'luxon';
-const pluginRss = require('@11ty/eleventy-plugin-rss');
+import pluginRss from '@11ty/eleventy-plugin-rss';
-const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
-const pluginNavigation = require('@11ty/eleventy-navigation');
+import pluginNavigation from '@11ty/eleventy-navigation';
-const Image = require('@11ty/eleventy-img');
+import Image from '@11ty/eleventy-img';
-const markdownIt = require('markdown-it');
+import markdownIt from 'markdown-it';
-const markdownItAnchor = require('markdown-it-anchor');
+import markdownItAnchor from 'markdown-it-anchor';
-const markdownItAttrs = require('markdown-it-attrs');
+import markdownItAttrs from 'markdown-it-attrs';
 
 function hyphenize(input) {
 	return input
@@ -16,14 +16,14 @@ function hyphenize(input) {
 		.toLowerCase();
 }
 
-module.exports = function (eleventyConfig) {
+const siteName = process.env.SITE;
-	const siteName = process.env.SITE;
+if (!siteName) {
-	if (!siteName) {
 	throw new Error(
 		'Cannot determine the name of the site to build. Make sure to set the SITE environment variable.'
 	);
-	}
+}
 
+export default function (eleventyConfig) {
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight);
 	eleventyConfig.addPlugin(pluginNavigation);
@@ -196,12 +196,9 @@ ${
 		ui: false,
 		ghostMode: false,
 	});
+}
 
-	//
+export const config = {
-	// Other settings
-	//
-
-	return {
 	dir: {
 		input: `sites/${siteName}`,
 		output: 'dist',
@@ -216,5 +213,4 @@ ${
 	markdownTemplateEngine: 'njk',
 	htmlTemplateEngine: 'njk',
 	dataTemplateEngine: false,
-	};
 };

package.json

@@ -11,19 +11,19 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"@11ty/eleventy": "^2.0.1",
+		"@11ty/eleventy": "^3.1.1",
-		"@11ty/eleventy-img": "^3.1.0",
+		"@11ty/eleventy-img": "^6.0.4",
-		"@11ty/eleventy-navigation": "^0.3.5",
+		"@11ty/eleventy-navigation": "^1.0.4",
-		"@11ty/eleventy-plugin-rss": "^1.2.0",
+		"@11ty/eleventy-plugin-rss": "^2.0.4",
-		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1",
-		"luxon": "^3.3.0",
+		"luxon": "^3.6.1",
-		"markdown-it": "^13.0.1",
+		"markdown-it": "^14.1.0",
-		"markdown-it-anchor": "^8.6.7",
+		"markdown-it-anchor": "^9.2.0",
-		"markdown-it-attrs": "^4.1.6",
+		"markdown-it-attrs": "^4.3.1",
-		"node-gyp-build": "^4.6.0",
+		"node-gyp-build": "^4.8.4",
-		"sass": "^1.62.1"
+		"sass": "^1.89.2"
 	},
 	"devDependencies": {
-		"prettier": "^2.8.8"
+		"prettier": "^3.5.3"
 	}
 }

sites/angestoepselt/feed/feed.njk

@@ -10,7 +10,7 @@ eleventyExcludeFromCollections: true
 	{% set absoluteUrl %}{{ metadata.feed.path | url | absoluteUrl(metadata.url) }}{% endset %}
 	<link href="{{ absoluteUrl }}" rel="self"/>
 	<link href="{{ metadata.url }}"/>
-	<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
+	<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
 	<id>{{ metadata.feed.id }}</id>
 	<author>
 		<name>{{ metadata.author.name }}</name>
@@ -21,7 +21,7 @@ eleventyExcludeFromCollections: true
 	<entry>
 		<title>{{ post.data.title }}</title>
 		<link href="{{ absolutePostUrl }}"/>
-		<updated>{{ post.date | rssDate }}</updated>
+		<updated>{{ post.date | dateToRfc3339 }}</updated>
 		<id>{{ absolutePostUrl }}</id>
 		<content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
 	</entry>

sites/angestoepselt/feed/json.njk

@@ -22,7 +22,7 @@ eleventyExcludeFromCollections: true
       "url": "{{ absolutePostUrl }}",
       "title": "{{ post.data.title }}",
       "content_html": {% if post.templateContent %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe }}{% else %}""{% endif %},
-      "date_published": "{{ post.date | rssDate }}"
+      "date_published": "{{ post.date | dateToRfc3339 }}"
     }
     {%- if not loop.last -%}
     ,

styles/components/_actions.scss

@@ -195,6 +195,9 @@
 	.sun {
 		$final-transformation: translateX(20%) translateY(10%) scale(3.4);
 
+		transform: $final-transformation;
+		animation: motion.$gentle 0s 1 normal backwards running action-icon-sun;
+
 		@keyframes action-icon-sun {
 			0% {
 				transform: none;
@@ -206,15 +209,16 @@
 				transform: $final-transformation;
 			}
 		}
-
-		transform: $final-transformation;
-		animation: motion.$gentle 0s 1 normal backwards running action-icon-sun;
 	}
 
 	.heart-left {
 		$final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5)
 			rotate(-25deg);
 
+		transform: $final-transformation;
+		animation: motion.$gentle 0s 1 normal backwards running
+			action-icon-heart-left;
+
 		@keyframes action-icon-heart-left {
 			0% {
 				transform: none;
@@ -227,16 +231,16 @@
 				transform: $final-transformation;
 			}
 		}
-
-		transform: $final-transformation;
-		animation: motion.$gentle 0s 1 normal backwards running
-			action-icon-heart-left;
 	}
 
 	.heart-right {
 		$final-transformation: translateX(1.4rem) translateY(-0.1rem) scale(1.6)
 			rotate(15deg);
 
+		transform: $final-transformation;
+		animation: motion.$gentle 0s 1 normal backwards running
+			action-icon-heart-right;
+
 		@keyframes action-icon-heart-right {
 			0% {
 				transform: none;
@@ -249,15 +253,14 @@
 				transform: $final-transformation;
 			}
 		}
-
-		transform: $final-transformation;
-		animation: motion.$gentle 0s 1 normal backwards running
-			action-icon-heart-right;
 	}
 
 	.coin {
 		$final-transformation: scale(0.8);
 
+		transform: $final-transformation;
+		animation: motion.$gentle 0s 1 normal backwards running action-icon-coin;
+
 		@keyframes action-icon-coin {
 			0% {
 				transform: none;
@@ -269,8 +272,5 @@
 				transform: $final-transformation;
 			}
 		}
-
-		transform: $final-transformation;
-		animation: motion.$gentle 0s 1 normal backwards running action-icon-coin;
 	}
 }

styles/components/_form-choices.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'sass:math';
 @use '../lib/colors';
 @use '../lib/motion';
@@ -74,7 +75,7 @@
 		background-image: linear-gradient(
 			-45deg,
 			transparent 0%,
-			#{transparentize(colors.$yellow-500, 0.6)} 50%,
+			#{color.scale(colors.$yellow-500, $alpha: -60%)} 50%,
 			transparent 100%
 		);
 		background-size: 200% 100%;

styles/components/_site.scss

@@ -44,6 +44,14 @@
 			transition: fill #{0.3 * motion.$prominent-duration} motion.$prominent-timing;
 		}
 
+		animation: angestoepselt-logo-hover motion.$prominent forwards;
+
+		+ span {
+			transform-origin: 100% 50%;
+			transition: transform #{0.7 * motion.$prominent-duration} motion.$prominent-timing #{0.3 * motion.$prominent-duration};
+			transform: scale(1.1);
+		}
+
 		@keyframes angestoepselt-logo-hover {
 			0% {
 				transform: none;
@@ -55,14 +63,6 @@
 				transform: translateX(-0.4rem);
 			}
 		}
-
-		animation: angestoepselt-logo-hover motion.$prominent forwards;
-
-		+ span {
-			transform-origin: 100% 50%;
-			transition: transform #{0.7 * motion.$prominent-duration} motion.$prominent-timing #{0.3 * motion.$prominent-duration};
-			transform: scale(1.1);
-		}
 	}
 }
 

styles/finish.scss

@@ -45,24 +45,6 @@
 		--gradient-color-10: #{colors.$green-500};
 	}
 
-	@keyframes finish-hero {
-		0% {
-			stroke-width: 3px;
-		}
-		10% {
-			stroke-width: 3px;
-		}
-		20% {
-			stroke-width: 5px;
-		}
-		60% {
-			stroke-width: 5px;
-		}
-		100% {
-			stroke-width: 3px;
-		}
-	}
-
 	display: block;
 	height: 15vmin;
 	margin: layout.$huge-gap auto;
@@ -74,6 +56,14 @@
 	> .stroke-gradient {
 		@for $i from 1 through 4 {
 			> stop:nth-of-type(#{$i}) {
+				animation: motion.$prominent
+					0s
+					1
+					normal
+					both
+					running
+					finish-stroke-gradient-#{$i};
+
 				@keyframes finish-stroke-gradient-#{$i} {
 					0% {
 						stop-color: var(--dark-idle-color);
@@ -104,19 +94,13 @@
 						stop-color: var(--dark-idle-color);
 					}
 				}
-
-				animation: motion.$prominent
-					0s
-					1
-					normal
-					both
-					running
-					finish-stroke-gradient-#{$i};
 			}
 		}
 	}
 
 	> .cable {
+		animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
+
 		@keyframes finish-hero-cable {
 			0% {
 				transform: translateX(0.5rem);
@@ -131,11 +115,13 @@
 				transform: none;
 			}
 		}
-
-		animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
 	}
 
 	> .plug {
+		animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
+			motion.$gentle 0.7s 1 normal forwards running finish-hero-plug-transition,
+			motion.$background 1s infinite normal none running finish-hero-plug-idle;
+
 		@keyframes finish-hero-plug {
 			0% {
 				transform: translateX(-0.5rem);
@@ -175,13 +161,11 @@
 				fill: var(--light-idle-color);
 			}
 		}
-
-		animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
-			motion.$gentle 0.7s 1 normal forwards running finish-hero-plug-transition,
-			motion.$background 1s infinite normal none running finish-hero-plug-idle;
 	}
 
 	> .contacts {
+		animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;
+
 		@keyframes finish-hero-contacts {
 			0% {
 				transform: translateX(0rem);
@@ -196,7 +180,23 @@
 				transform: none;
 			}
 		}
+	}
 
-		animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;
+	@keyframes finish-hero {
+		0% {
+			stroke-width: 3px;
+		}
+		10% {
+			stroke-width: 3px;
+		}
+		20% {
+			stroke-width: 5px;
+		}
+		60% {
+			stroke-width: 5px;
+		}
+		100% {
+			stroke-width: 3px;
+		}
 	}
 }

styles/lib/_colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $gray-900: #1d1d1d;
 $gray-800: #212121;
 $gray-600: #707070;
@@ -38,8 +40,8 @@ $inverse-text: $gray-50;
 }
 
 @mixin card-shadow($base-color: $gray-900) {
-	box-shadow: 0.1rem 0.4rem 0.4rem #{transparentize($base-color, 0.9)},
+	box-shadow: 0.1rem 0.4rem 0.4rem #{color.scale($base-color, $alpha: -90%)},
-		0.25rem 1rem 1rem #{transparentize($base-color, 0.9)};
+		0.25rem 1rem 1rem #{color.scale($base-color, $alpha: -90%)};
 }
 
 @mixin coderdojo-theme {