upgrade parcel

2025-06-12 15:40:41 +02:00
parent cb191a42fd
commit 1111e56b2c
12 changed files with 2707 additions and 9921 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,8 @@ node_modules
 # Distributed built files
 dist
 # Temporary files
+.parcel-cache
 .cache
 .idea
 # Secrets
-makefile
+makefile
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v22.9.0
+v22.16.0
--- a/.pugrc
+++ b/.pugrc
@@ -138,7 +138,8 @@
 			},
 			"courses": {
 				"dhbw": [
-					"2025 (upcoming) „Einführung in die Webentwicklung II“ (Introduction to Web Development)",
+					"2025 „Einführung in die Webentwicklung“ (Introduction to Web Development)",
+					"2025 „Einführung in die Webentwicklung II“ (Introduction to Web Development)",
 					"2024 „Einführung in die Webentwicklung II“ (Introduction to Web Development)"
 				],
 				"lfh": [
--- a/index.pug
+++ b/index.pug
@@ -13,8 +13,8 @@ html.scroll-smooth(lang=lang)
 		script.
 			const footerEl = document.querySelector("#footer");
 			const footerObserver = new IntersectionObserver((payload) => {
-				const hasScrolltedTo = payload.pop().isIntersecting;
-				if (hasScrolltedTo && window.hasOwnProperty("umami")) {
+				const hasScrolledTo = payload.pop().isIntersecting;
+				if (hasScrolledTo && window.hasOwnProperty("umami")) {
 					umami.track("scrolled to", {position: "footer", id: "footer", visitDuration: getVisitDuration()});
 					console.debug("scrolled to footer", {visitDuration: getVisitDuration()});
 				}
@@ -24,23 +24,10 @@ html.scroll-smooth(lang=lang)
 			const sections = document.querySelectorAll("section");
 			const sectionObserver = (id) =>
 				new IntersectionObserver((payload) => {
-					const hasScrolltedTo = payload.pop().isIntersecting;
-					if (hasScrolltedTo && window.hasOwnProperty("umami")) {
+					const hasScrolledTo = payload.pop().isIntersecting;
+					if (hasScrolledTo && window.hasOwnProperty("umami")) {
 						umami.track("scrolled to", {position: "section", id, visitDuration: getVisitDuration()});
 						console.debug("scrolled to section with id", {id, visitDuation: getVisitDuration()});
 					}
 				});
 			sections.forEach((section) => sectionObserver(section.id).observe(section));
-
-			// tailwindcss set correct dark/light theme depending on client preference
-			// https://tailwindcss.com/docs/dark-mode#toggling-dark-mode
-
-			// let yearsOfAge = 0;
-			// let yearsOfDeveloping = 0;
-			//
-			// setInterval(() => {
-			// 	yearsOfAge = (new Date().getTime() - new Date("1988-10-07").getTime()) / 1000 / 60 / 60 / 24 / 365.25;
-			// 	yearsOfDeveloping = (new Date().getTime() - new Date("2005-07-07").getTime()) / 1000 / 60 / 60 / 24 / 365.25;
-			// 	document.getElementById("yearsOfAge").innerText = yearsOfAge.toFixed(6);
-			// 	document.getElementById("yearsOfDeveloping").innerText = yearsOfDeveloping.toFixed(6);
-			// }, 500);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,7 +2,6 @@
 	"name": "nls-parcel-dailyshit",
 	"version": "1.0.0-0",
 	"description": "",
-	"main": "index.pug",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"start": "parcel --public-url / index.pug --open",
@@ -13,8 +12,12 @@
 	"author": "Michael Werner Czechowski <mail@dailysh.it>",
 	"license": "Apache-2.0",
 	"devDependencies": {
+		"@parcel/packager-raw-url": "^2.15.2",
+		"@parcel/transformer-jsonld": "^2.15.2",
+		"@parcel/transformer-pug": "^2.15.2",
+		"@parcel/transformer-webmanifest": "^2.15.2",
 		"@prettier/plugin-pug": "^3.1.0",
-		"parcel-bundler": "^1.10.3",
+		"parcel": "^2.15.2",
 		"prettier": "^3.3.3",
 		"pug": "^3.0.3",
 		"sass": "^1.16.0",
--- a/src/components/Academia.pug
+++ b/src/components/Academia.pug
@@ -6,7 +6,7 @@ section#academia
 	.p-8.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:p-20 min-h-[120vh]")
 		+Container
 			// region Skills
-			+Title("h2") !{academia.sectionTitles.expertise}
+			+Title("h2")!{academia.sectionTitles.expertise}
 			.mb-8.max-w-prose
 				each paragraph, i in academia.expertise.intro
 					- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest sm:text-md text-sm tracking-tight w-5/6";
@@ -15,13 +15,13 @@ section#academia

 			// region Expertise
 			.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
-				+Collapsable(academia.expertise.frontendTechnologies, true)
-				+Collapsable(academia.expertise.devopsAndCloud)
-				+Collapsable(academia.expertise.backendTechnologies)
-				+Collapsable(academia.expertise.databaseAndData)
-				+Collapsable(academia.expertise.crossPlatform)
-				+Collapsable(academia.expertise.bestPractices)
-				+Collapsable(academia.expertise.tracking)
+				+Collapsable("academia", academia.expertise.frontendTechnologies, true)
+				+Collapsable("academia", academia.expertise.devopsAndCloud)
+				+Collapsable("academia", academia.expertise.backendTechnologies)
+				+Collapsable("academia", academia.expertise.databaseAndData)
+				+Collapsable("academia", academia.expertise.crossPlatform)
+				+Collapsable("academia", academia.expertise.bestPractices)
+				+Collapsable("academia", academia.expertise.tracking)
 			// endregion

 		+Container
--- a/src/components/Collapsable.pug
+++ b/src/components/Collapsable.pug
@@ -1,35 +1,34 @@
-mixin Collapsable(data, open)
+mixin Collapsable(name, data, open)
 	- const isExpanded = open || false;
 	- const color = data.color || "orange";
 	- const category = data.category || "default";
 	- const linkEventName = "external link clicked";

-	div
-		details.mb-4(open=isExpanded)
-			summary(
-				class=`rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg text-nls-${color} dark:text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
-				onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
-			)= data.summary
-			ul.list-disc.list-inside.text-slate-600(class="dark:text-stone-300")
-				if data.items
-					each item in data.items
-						li
-							if item.text
-								= item.text
-							if item.links
-								each link, index in item.links
-									a(
-										class=`transition underline-offset-2 underline text-nls-${color} hover:text-nls-black dark:hover:text-white hover:decoration-2`,
-										href=link.url,
-										title=link.description,
-										target="_blank",
-										aria-label=link.description,
-										rel="noopener noreferrer",
-										onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
-									) #{link.text}
-									if index < item.links.length - 1
-										| ,&nbsp;
-							if item.suffix
-								= ` ${item.suffix}`
-				else
-					block
+	details.mb-4(open=isExpanded, name=name)
+		summary(
+			class=`rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg text-nls-${color} dark:text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
+			onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
+		)= data.summary
+		ul.list-disc.list-inside.text-slate-600(class="dark:text-stone-300")
+			if data.items
+				each item in data.items
+					li
+						if item.text
+							= item.text
+						if item.links
+							each link, index in item.links
+								a(
+									class=`transition underline-offset-2 underline text-nls-${color} hover:text-nls-black dark:hover:text-white hover:decoration-2 focus:text-nls-black dark:focus:text-white focus:decoration-2`,
+									href=link.url,
+									title=link.description,
+									target="_blank",
+									aria-label=link.description,
+									rel="noopener noreferrer",
+									onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
+								) #{link.text}
+								if index < item.links.length - 1
+									| ,&nbsp;
+						if item.suffix
+							= ` ${item.suffix}`
+			else
+				block
--- a/src/components/Footer.pug
+++ b/src/components/Footer.pug
@@ -19,7 +19,7 @@ footer#footer
 			h2.text-5xl.mb-4 #{footer.title}
 			p.mb-8.max-w-prose #{footer.content}
 				.flex.flex-col.items-center.space-y-12.mb-8(class="sm:flex-row sm:space-x-6 sm:space-y-0")
-					+Link(footer.githubUrl, 'github', '_blank', 'noopener noreferrer')
+					+Link(footer.githubUrl, "github", "_blank", "noopener noreferrer")
 						+Svg
 							path(
 								clip-rule="evenodd",
@@ -28,7 +28,7 @@ footer#footer
 								style="fill: currentColor"
 							)

-					+Link(footer.linkedinUrl, 'linkedin', '_blank', 'noopener noreferrer')
+					+Link(footer.linkedinUrl, "linkedin", "_blank", "noopener noreferrer")
 						+Svg
 							path(
 								clip-rule="evenodd",
@@ -37,7 +37,7 @@ footer#footer
 								style="fill: currentColor"
 							)

-					+Link(footer.xingUrl, 'xing', '_blank', 'noopener noreferrer')
+					+Link(footer.xingUrl, "xing", "_blank", "noopener noreferrer")
 						+Svg
 							path(
 								d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z",
--- a/src/components/Head.pug
+++ b/src/components/Head.pug
@@ -88,6 +88,10 @@ head

 	// region Custom CSS
 	style.
+		p a {
+			@apply underline;
+		}
+
 		/* Afacad Flux */
 		@font-face {
 			font-family: "Afacad Flux";
--- a/src/components/Landingpage.pug
+++ b/src/components/Landingpage.pug
@@ -1,14 +1,4 @@
 header.bg-white.text-nls-black(class="dark:text-white dark:bg-nls-black")
-	//button.absolute.top-0.right-0.w-8.h-8.m-3.p-3.rounded-full.bg-slate-300(
-	//	onclick="toggleDarkMode()"
-	//)
-	//	div(class="block dark:hidden")
-	//		span.sr-only Toggle dark mode
-	//		| 🌙
-	//	div(class="hidden dark:block")
-	//		span.sr-only Toggle light mode
-	//		| ☀️
-
 	.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20")
 		.max-w-3xl.mb-8.relative(class="w-4/5 min-h-[90vh]")
 			.peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8
@@ -21,11 +11,6 @@ header.bg-white.text-nls-black(class="dark:text-white dark:bg-nls-black")
 					|
 					| &amp; #{landingpage.jobTitle[1]}

-			//img.absolute.z-10.left-0.right-0.mx-auto.opacity-0.transition(
-			//	class="top-[30vh] max-h-[37vh] peer-hover:opacity-100 peer-hover:scale-150",
-			//	src=landingpage.emojiSvg
-			//)
-
 			img.absolute.z-0.left-0.right-0.mx-auto.transition.invisible(class="dark:visible h-[54vh]", src=landingpage.logoSvg)

 			img.absolute.z-0.left-0.right-0.mx-auto.transition.visible(class="dark:invisible h-[54vh]", src=landingpage.logoSvgInverted)
--- a/src/components/Professional.pug
+++ b/src/components/Professional.pug
@@ -10,7 +10,7 @@ section#professional.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-
 				each person, i in professional.principlesPeople
 					- const data = {summary: `${person.name} — ${person.concept}`, color: "text-nls-black dark:text-white", category: "professional"};
 					- const isOpen = i === 0;
-					+Collapsable(data, isOpen)
+					+Collapsable("professional", data, isOpen)
 						each paragraph, j in person.paragraphs
 							- const additionalClasses = j !== 0 ? "indent-3" : "mt-4";
 							p.pl-4(class=`sm:w-5/6 ${additionalClasses}`)= paragraph