Technologie

Diese Seite gibt einen Überblick über die verwendete Technologien und die Funktionalitäten dieser Seite.

Meine Webseite verwendet Astro, ein mehrseitiger statischer Generator (MPA SSG). Alle Projekte und Blogeinträge sind als MDX-Dateien hinterlegt und werden von Astro in Seiten umgewandelt. Hierfür wird u.a. Astros Content-Plugin verwendet.

Manche Seiten enthalten zudem Bilder. Um die Download-Größe niedrig zu halten werden die Bilder zur Kompilierzeit optimiert und in WebPs konvertiert. Astro hat hierfür ein Plugin. Ich habe mich jedoch aufgrund der fehlenden Konfigurationsmöglichkeiten dagegen entschieden. Ich verwende einen Content-Server welcher beim Kompilieren hochgefahren wird und die Bilder umwandelt. Die generierten Bilder werden dann in der Astro-Anwendung abgelegt und referenziert.

Derselbe Content Server wird auch verwendet um Bilder automatisch zu erstellen. So werden bspw. die Opengraph-Bilder (werden für Embeds verwendet) erzeugt. Der Server verwendet hierfür Sharp und Satori. Die Content Server Implementation ist öffentlich einsehbar; die Qualität des Codes lässt jedoch zu wünschen übrig. Hier der Link: Gitlab.

Für die Astro-Anwendung habe ich eine Funktion geschrieben welche die Bilder vom Content Server herunterlädt und in das public-Verzeichnis ablegt, und anstelle der echten URL an den Content Server eine Verlinkung in das public-Verzeichnis zurückgibt. Eine solche Beispielimplementation kann dem astro-preload Paket entnommen werden.

Abhängigkeiten

Diese Webseite verwendet folgende Abhängigkeiten

@astrojs/lit ^4.3.0 @astrojs/mdx ^3.1.7 @astrojs/prefetch ^0.4.1 @astrojs/sitemap ^3.2.0 @astrojs/tailwind ^5.1.1 @astrojs/vue ^4.5.1 @fontsource/roboto ^5.0.3 @fontsource/ubuntu ^5.0.3 @motion-canvas/player 3.14.1 @WaldemarLehner/waldemarlehner-animations ^0.0.9 astro ^4.15.11 chalk ^5.3.0 giscus ^1.3.0 rehype-autolink-headings ^7.0.0 rehype-slug ^6.0.0 tailwindcss ^3.3.2 zod ^3.21.4 DEV @biomejs/biome 1.9.3 DEV @iconify-json/devicon-plain ^1.1.12 DEV @iconify-json/file-icons ^1.1.4 DEV @iconify-json/ic ^1.1.13 DEV @iconify-json/material-symbols ^1.1.51 DEV @iconify-json/mdi ^1.1.53 DEV @iconify-json/ph ^1.1.5 DEV @iconify-json/simple-icons ^1.1.60 DEV @iconify-json/twemoji ^1.1.11 DEV @iconify/utils ^2.1.12 DEV @resvg/resvg-js ^2.4.1 DEV @types/express ^4.17.17 DEV @types/node ^20.4.1 DEV @types/react ^18.2.17 DEV @WaldemarLehner/portfolio-astro-cdn-server ^1.1.1 DEV astro-icon ^0.8.2 DEV astro-preload ^1.1.2 DEV concurrently ^8.2.2 DEV glob ^10.3.10 DEV rehype-katex ^7.0.0 DEV remark-math ^6.0.0 DEV sass ^1.63.6 DEV sharp ^0.33.2 DEV typescript ^5.3.3 DEV zod-validation-error ^1.3.1