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 • committed by Yannik Rödel
parent 4f01401343
commit 888f38ef03
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
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 assets /build/assets/
COPY includes /build/includes/
COPY sites/${SITE} /build/sites/${SITE}/
COPY eleventy.config.mjs .
COPY assets assets/
COPY includes includes/
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
RUN SITE=${SITE} npm run build:site
#

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

@ -1,13 +1,13 @@
const fs = require('fs');
import fs from 'fs';
const { DateTime } = require('luxon');
const pluginRss = require('@11ty/eleventy-plugin-rss');
const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const pluginNavigation = require('@11ty/eleventy-navigation');
const Image = require('@11ty/eleventy-img');
const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');
const markdownItAttrs = require('markdown-it-attrs');
import { DateTime } from 'luxon';
import pluginRss from '@11ty/eleventy-plugin-rss';
import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
import pluginNavigation from '@11ty/eleventy-navigation';
import Image from '@11ty/eleventy-img';
import markdownIt from 'markdown-it';
import markdownItAnchor from 'markdown-it-anchor';
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;
if (!siteName) {
throw new Error(
'Cannot determine the name of the site to build. Make sure to set the SITE environment variable.'
);
}
const siteName = process.env.SITE;
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,25 +196,21 @@ ${
ui: false,
ghostMode: false,
});
}
//
// Other settings
//
export const config = {
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 {
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'],
templateFormats: ['md', 'njk', 'html', 'liquid'],
markdownTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
dataTemplateEngine: false,
};
markdownTemplateEngine: 'njk',
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",
"dependencies": {
"@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-img": "^3.1.0",
"@11ty/eleventy-navigation": "^0.3.5",
"@11ty/eleventy-plugin-rss": "^1.2.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"luxon": "^3.3.0",
"markdown-it": "^13.0.1",
"markdown-it-anchor": "^8.6.7",
"markdown-it-attrs": "^4.1.6",
"node-gyp-build": "^4.6.0",
"sass": "^1.62.1"
"@11ty/eleventy": "^3.1.1",
"@11ty/eleventy-img": "^6.0.4",
"@11ty/eleventy-navigation": "^1.0.4",
"@11ty/eleventy-plugin-rss": "^2.0.4",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1",
"luxon": "^3.6.1",
"markdown-it": "^14.1.0",
"markdown-it-anchor": "^9.2.0",
"markdown-it-attrs": "^4.3.1",
"node-gyp-build": "^4.8.4",
"sass": "^1.89.2"
},
"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 %}
<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>

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

@ -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 -%}
,

28
styles/components/_actions.scss
View file

@ -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;
}
}

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

@ -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%;

16
styles/components/_site.scss
View file

@ -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);
}
}
}

66
styles/finish.scss
View file

@ -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;
}
}
}

6
styles/lib/_colors.scss
View file

@ -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)},
0.25rem 1rem 1rem #{transparentize($base-color, 0.9)};
box-shadow: 0.1rem 0.4rem 0.4rem #{color.scale($base-color, $alpha: -90%)},
0.25rem 1rem 1rem #{color.scale($base-color, $alpha: -90%)};
}
@mixin coderdojo-theme {