angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2026-03-21 22:32:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update npm depedencies

Browse source 
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/
This commit is contained in:
Yannik Rödel 2025-06-15 17:17:04 +02:00
parent ac70140fad
commit 00588a516a
11 changed files with 2434 additions and 3023 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
Dockerfile
View file

@ -6,21 +6,20 @@ ARG SITE
WORKDIR /build WORKDIR /build
COPY package.json package-lock.json /build/ COPY package.json package-lock.json .
RUN --mount=type=cache,target=/root/.npm \ RUN --mount=type=cache,target=/root/.npm \
npm clean-install --omit=dev npm clean-install --omit=dev
COPY styles /build/styles/ COPY styles/ styles/
RUN npm run build: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: # These are symlinked from other sites:
COPY sites/angestoepselt/_images/home-banner.jpg /build/sites/angestoepselt/_images/ COPY sites/angestoepselt/_images/home-banner.jpg /build/sites/angestoepselt/_images/
RUN SITE=${SITE} npm run build:site
RUN SITE=${SITE} npm run build
# #

64
.eleventy.js → eleventy.config.mjs
View file

@ -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) { function hyphenize(input) {
return input return input
@ -16,14 +16,14 @@ function hyphenize(input) {
.toLowerCase(); .toLowerCase();
} }
module.exports = function (eleventyConfig) { const siteName = process.env.SITE;
const siteName = process.env.SITE; if (!siteName) {
if (!siteName) { throw new Error(
throw new Error( 'Cannot determine the name of the site to build. Make sure to set the SITE environment variable.'
'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(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(pluginNavigation);
@ -196,25 +196,21 @@ ${
ui: false, ui: false,
ghostMode: false, ghostMode: false,
}); });
}
// export const config = {
// Other settings dir: {
// input: `sites/${siteName}`,
output: 'dist',
// These are all relative to the input directory so the paths get a little
// weird:
includes: '../../includes',
data: '_data',
},
return { templateFormats: ['md', 'njk', 'html', 'liquid'],
dir: {
input: `sites/${siteName}`,
output: 'dist',
// These are all relative to the input directory so the paths get a little
// weird:
includes: '../../includes',
data: '_data',
},
templateFormats: ['md', 'njk', 'html', 'liquid'], markdownTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
markdownTemplateEngine: 'njk', dataTemplateEngine: false,
htmlTemplateEngine: 'njk',
dataTemplateEngine: false,
};
}; };

5229
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

24
package.json
View file

@ -11,19 +11,19 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "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": { "devDependencies": {
"prettier": "^2.8.8" "prettier": "^3.5.3"
} }
} }

4
sites/angestoepselt/feed/feed.njk
View file

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

2
sites/angestoepselt/feed/json.njk
View file

@ -22,7 +22,7 @@ eleventyExcludeFromCollections: true
"url": "{{ absolutePostUrl }}", "url": "{{ absolutePostUrl }}",
"title": "{{ post.data.title }}", "title": "{{ post.data.title }}",
"content_html": {% if post.templateContent %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe }}{% else %}""{% endif %}, "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 -%} {%- if not loop.last -%}
, ,

28
styles/components/_actions.scss
View file

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

3
styles/components/_form-choices.scss
View file

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

16
styles/components/_site.scss
View file

@ -44,6 +44,14 @@
transition: fill #{0.3 * motion.$prominent-duration} motion.$prominent-timing; 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 { @keyframes angestoepselt-logo-hover {
0% { 0% {
transform: none; transform: none;
@ -55,14 +63,6 @@
transform: translateX(-0.4rem); 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);
}
} }
} }

66
styles/finish.scss
View file

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

6
styles/lib/_colors.scss
View file

@ -1,3 +1,5 @@
@use 'sass:color';
$gray-900: #1d1d1d; $gray-900: #1d1d1d;
$gray-800: #212121; $gray-800: #212121;
$gray-600: #707070; $gray-600: #707070;
@ -38,8 +40,8 @@ $inverse-text: $gray-50;
} }
@mixin card-shadow($base-color: $gray-900) { @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 { @mixin coderdojo-theme {