Update pipeline for dev

.gitea/workflows/dev.yml

@@ -9,6 +9,14 @@ jobs:
     name: Build and Deploy
     runs-on: ubuntu-latest
 
+    services:
+      mermaid:
+        image: yuzutech/kroki-mermaid  
+      kroki:
+        image: yuzutech/kroki
+        env:
+          KROKI_MERMAID_HOST: mermaid
+
     steps:
       - uses: actions/checkout@v7
         name: Checkout code
@@ -16,13 +24,15 @@ jobs:
       - name: Setup node and npm
         uses: actions/setup-node@v7
         with:
-          node-version: lts/*
+          node-version: 24
       
       - name: Install dependencies
         run: npm ci
       
       - name: Check and build
         run: npm run build
+        env:
+          KROKI_SERVER: "http://kroki:8000"
       
       - name: Copy files via ssh
         uses: appleboy/scp-action@v1

astro.config.mjs

@@ -1,10 +1,13 @@
-import { defineConfig, fontProviders } from "astro/config";
+import { defineConfig, fontProviders } from 'astro/config';
-import { satteri } from '@astrojs/markdown-satteri';
+import { unified } from '@astrojs/markdown-remark';
-import icon from "astro-icon";
+import icon from 'astro-icon';
-import mdx from "@astrojs/mdx";
+import mdx from '@astrojs/mdx';
-import satteriCallouts from "satteri-callouts"
+//import { remarkModifiedTime } from './src/remark-modified-time.mjs';
-import { satteriKatex } from "satteri-katex";
+import remarkMath from "remark-math";
-import mermaid from "astro-mermaid";
+import rehypeMathjax from "rehype-mathjax"
+import rehypeCallouts from "rehype-callouts";
+// @ts-ignore
+import { remarkKroki } from "remark-kroki";
 
 export default defineConfig({
   fonts: [{
@@ -13,36 +16,30 @@ export default defineConfig({
     cssVariable: "--font-cascadia-code",
     fallbacks: ["monospace"],
   }],
-  integrations: [
+  integrations: [icon(), mdx()],
-    mermaid({
-      theme: "dark",
-      autoTheme: false,
-      mermaidConfig: {
-        flowchart: {curve:"linear"},
-        startOnLoad: false,
-        logLevel: "error",
-        securityLevel: "strict",
-      }
-    }),
-    icon(),
-    mdx()
-  ],
   markdown: {
-    processor: satteri({
+    processor: unified({
-      features: {
+      remarkPlugins: [
-        math: true,
+        // remarkModifiedTime,
-        rawHtml: true,
+        remarkMath,
-        smartPunctuation: true,
+        [remarkKroki, { 
-      },
+            alias: ["mermaid", "tikz"],
-      mdastPlugins: [satteriKatex()],
+            server: process.env.KROKI_SERVER || "https://kroki.io",
-      hastPlugins: [satteriCallouts({theme: "obsidian"})],
+            target: "mdx3",
+            output: "inline-svg"
+        }]
+      ],
+      rehypePlugins: [
+        rehypeMathjax,
+        [rehypeCallouts, { theme: "obsidian" }]
+      ],
     }),
     shikiConfig: {
         theme: "one-dark-pro",
     },
     syntaxHighlight: {
-      type: "shiki",
+      type: 'shiki',
-      excludeLangs: ["mermaid", "math"],
+      excludeLangs: ['mermaid', 'math'],
     },
   }
 });

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "c0ntroller.de",
+  "name": "website-ag",
   "type": "module",
-  "version": "1.1.0",
+  "version": "0.0.1",
   "engines": {
     "node": ">=22.12.0"
   },
@@ -12,21 +12,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^8.0.0",
+    "@astrojs/markdown-remark": "^7.2.4",
+    "@astrojs/mdx": "^7.0.8",
     "@iconify-json/lucide": "^1.2.98",
     "@iconify-json/simple-icons": "^1.2.74",
-    "@mermaid-js/layout-elk": "^0.2.3",
+    "astro": "^7.2.9",
-    "astro": "^7.3.1",
     "astro-icon": "^1.1.5",
-    "astro-mermaid": "^2.1.0",
+    "rehype-callouts": "^2.1.2",
-    "mermaid": "^11.17.2",
+    "rehype-mathjax": "^7.1.0",
-    "satteri-callouts": "^1.0.1",
+    "remark-kroki": "^0.3.8",
-    "satteri-katex": "^0.1.1"
+    "remark-math": "^6.0.0"
-  },
-  "devDependencies": {
-    "sharp": "^0.35.4"
-  },
-  "allowScripts": {
-    "esbuild@0.28.2": true
   }
 }

src/components/BookNavigation.astro

@@ -57,14 +57,14 @@ const { prevUrl, prevTitle, nextUrl, nextTitle } = Astro.props;
     font-size: 0.9rem;
     padding: 0.75rem 1.25rem;
     border-radius: 0.5rem;
-    background: rgb(from var(--accent-base) r g b / 0.15);
+    background: rgba(var(--accent-base), 0.15);
-    border: 1px solid rgb(from var(--accent-base) r g b / 0.3);
+    border: 1px solid rgba(var(--accent-base), 0.3);
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
     transition: all 0.2s ease;
     user-select: none;
   }
   .toc-label:hover {
-    background: rgb(from var(--accent-base) r g b / 0.25);
+    background: rgba(var(--accent-base), 0.25);
   }
   
   .toc-dropdown {

src/components/Navigation.astro

@@ -68,19 +68,19 @@ import Logo from "../assets/logo.svg";
     transition: color 0.2s ease;
   }
   .links a:hover {
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
   }
   .links a[href="/portfolio"]:hover {
-    color: var(--accent-base--portfolio);
+    color: rgb(var(--accent-base--portfolio));
   }
   .links a[href="/blog"]:hover {
-    color: var(--accent-base--blog);
+    color: rgb(var(--accent-base--blog));
   }
   .links a[href="/book"]:hover {
-    color: var(--accent-base--book);
+    color: rgb(var(--accent-base--book));
   }
   .links a.active {
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
     font-weight: 600;
   }
 

src/components/WelcomeTypewriter.astro

@@ -23,7 +23,7 @@
         text-align: center;
         white-space: break-spaces;
         word-wrap: break-word;
-        color: var(--accent-base);
+        color: rgb(var(--accent-base));
         text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
     }
 
@@ -42,7 +42,7 @@
 
     .welcome-typewriter-nostyle {
         min-height: 1em;
-        border-right: 2px solid var(--accent-base);
+        border-right: 2px solid rgb(var(--accent-base));
         margin: 0 auto;
         display: block;
         overflow-x: hidden;
@@ -70,7 +70,7 @@
         display: inline-block;
         height: 1em;
         width: 0px;
-        border-right: 2px solid var(--accent-base);
+        border-right: 2px solid rgb(var(--accent-base));
         animation: blink-caret 1s step-end infinite;
     }
 
@@ -79,7 +79,7 @@
     }
 
     @keyframes blink-caret {
-        from, to { border-color: var(--accent-base); }
+        from, to { border-color: rgb(var(--accent-base)) }
         50% { border-color: transparent; }
     }
 

src/content/book/grundlagen/0-3_addieren_mit_bits.mdx

@@ -35,6 +35,7 @@ Am Ende können wir also sagen, dass eine Addition von zwei Bits $a$ und $b$ fol
 Wenn wir das nun als Schaubild darstellen, sieht das so aus:
 
 ```mermaid
+%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%% 
 flowchart TD
     A@{ shape: circle, label: "a" } --> XOR1[XOR]
     B@{ shape: circle, label: "b" } --> XOR1
@@ -71,6 +72,7 @@ Statt nur $a$ und $b$ zu addieren, addieren wir nun $a$, $b$ und den Übertrag $
 Unser Schaltplan, sieht dann wieder genauso aus, nur dass wir jetzt noch einen weiteren Eingang für den Übertrag haben:
 
 ```mermaid
+%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%% 
 flowchart TD
     A@{ shape: circle, label: "a" } --> XOR1
     B@{ shape: circle, label: "b" } --> XOR1
@@ -95,6 +97,7 @@ Das vorher (ohne Übertragseingang) ist ein Halbaddierer.
 Wir sehen hier auch, dass unser Volladdierer (FA) aus zwei Halbaddierern (HA) und einem ODER-Gatter besteht:
 
 ```mermaid
+%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%% 
 flowchart TD
     A0@{ shape: circle, label: "a" } --> HA1
     B0@{ shape: circle, label: "b" } --> HA1
@@ -120,8 +123,8 @@ Und genau so machen wir das auch im Binären.
 Wenn wir nun also zwei 4-Bit-Zahlen addieren wollen, brauchen wir 4 Volladdierer, die hintereinander geschaltet und deren Überträge miteinander verbunden sind:
 
 <div style="overflow-x: auto;width: 100%;">
-    <div style="min-width: 700px;">
 ```mermaid
+%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
 flowchart TD
     subgraph FA3
         A3@{ shape: circle, label: "a_3" } --> FA31
@@ -150,7 +153,6 @@ flowchart TD
     end
 ```
 </div>
-</div>
 
 > [!info] Nomenklatur
 > Wie gerade schon gesehen, werden die Bits von rechts nach links durchnummeriert, beginnend mit 0.

src/pages/blog/[...slug].astro

@@ -3,7 +3,7 @@ import { getCollection, render } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import "katex/dist/katex.min.css";
 // @ts-expect-error Theme is not provided as ".css"
-import "satteri-callouts/theme/obsidian";
+import "rehype-callouts/theme/obsidian";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('blog');

src/pages/book/[...slug].astro

@@ -4,7 +4,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import BookNavigation from '../../components/BookNavigation.astro';
 import "katex/dist/katex.min.css";
 // @ts-expect-error Theme is not provided as ".css"
-import "satteri-callouts/theme/obsidian";
+import "rehype-callouts/theme/obsidian";
 import "../../styles/md-custom.css";
 
 export async function getStaticPaths() {
@@ -102,12 +102,12 @@ const chapters = allPages.reduce((acc, p) => {
     text-decoration: none;
   }
   .mini-chapter a:hover {
-    background: rgb(from var(--accent-base) r g b / 0.1);
+    background: rgba(var(--accent-base), 0.1);
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
   }
   .mini-chapter a.active {
-    background: rgb(from var(--accent-base) r g b / 0.2);
+    background: rgba(var(--accent-base), 0.2);
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
     font-weight: 600;
   }
 </style>

src/pages/index.astro

@@ -91,7 +91,7 @@ import socials from "../data/socials.json";
   }
 
   .social-link {
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
     font-size: 2rem;
     height: 2rem;
     line-height: 1;
@@ -101,7 +101,7 @@ import socials from "../data/socials.json";
   }
 
   .social-link:hover svg {
-    filter: drop-shadow(0px 0px 5px rgb(from var(--accent-base) r g b / 0.4));
+    filter: drop-shadow(0px 0px 5px rgba(var(--accent-base), 0.4));
   }
 
   .subtitle {
@@ -192,43 +192,43 @@ import socials from "../data/socials.json";
   .portfolio {
     background: linear-gradient(
       135deg,
-      rgb(from var(--accent-base--portfolio) r g b / 0.5) 0%,
+      rgba(var(--accent-base--portfolio), 0.5) 0%,
-      rgb(from var(--accent-base--portfolio) r g b / 0.15) 100%
+      rgba(var(--accent-base--portfolio), 0.15) 100%
     );
   }
   .blog {
     background: linear-gradient(
       135deg,
-      rgb(from var(--accent-base--blog) r g b / 0.8) 0%,
+      rgba(var(--accent-base--blog), 0.8) 0%,
-      rgb(from var(--accent-base--blog) r g b / 0.15) 100%
+      rgba(var(--accent-base--blog), 0.15) 100%
     );
   }
   .book {
     background: linear-gradient(
       135deg,
-      rgb(from var(--accent-base--book) r g b / 0.8) 0%,
+      rgba(var(--accent-base--book), 0.8) 0%,
-      rgb(from var(--accent-base--book) r g b / 0.15) 100%
+      rgba(var(--accent-base--book), 0.15) 100%
     );
   }
 
   .portfolio:hover {
-    box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--portfolio) r g b / 1);
+    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1);
   }
   .blog:hover {
-    box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--blog) r g b / 0.4);
+    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4);
   }
   .book:hover {
-    box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--book) r g b / 0.4);
+    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4);
   }
 
   .portfolio .icon {
-    color: rgb(--accent-base--portfolio);
+    color: rgb(var(--accent-base--portfolio));
   }
   .blog .icon {
-    color: rgb(--accent-base--blog);
+    color: rgb(var(--accent-base--blog));
   }
   .book .icon {
-    color: rgb(--accent-base--book);
+    color: rgb(var(--accent-base--book));
   }
 
   @keyframes fadeUp {

src/pages/portfolio/[...slug].astro

@@ -4,7 +4,7 @@ import { Icon } from "astro-icon/components";
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import "katex/dist/katex.min.css";
 // @ts-expect-error Theme is not provided as ".css"
-import "satteri-callouts/theme/obsidian";
+import "rehype-callouts/theme/obsidian";
 
 export async function getStaticPaths() {
   const portfolioEntries = await getCollection('portfolio');
@@ -57,7 +57,7 @@ const { Content } = await render(entry);
   }
   .tag {
     font-size: 0.8rem;
-    background: rgb(from var(--accent-base) r g b / 0.2);
+    background: rgba(var(--accent-base), 0.2);
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
   }
@@ -77,7 +77,7 @@ const { Content } = await render(entry);
   .meta-repository {
     flex-shrink: 1;
     font-size: 1.2rem;
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
   }
   .meta-repository a {
     display: flex;

src/pages/portfolio/index.astro

@@ -70,7 +70,7 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
   }
   .tag {
     font-size: 0.8rem;
-    background: rgb(from var(--accent-base) r g b / 0.2);
+    background: rgba(var(--accent-base), 0.2);
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
   }
@@ -79,6 +79,6 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
     font-size: 1.2rem;
     display: flex;
     align-items: center;
-    color: var(--accent-base);
+    color: rgb(var(--accent-base));
   }
 </style>

src/styles/global.css

@@ -18,7 +18,7 @@
 @property --accent-base {
   syntax: '<color>';
   inherits: true;
-  initial-value: rgb(214, 134, 249);
+  initial-value: 214, 134, 249;
 }
 
 @property --bg-image {
@@ -51,6 +51,12 @@
   initial-value: 16px;
 }
 
+@property --glass-shadow {
+  syntax: '<shadow>';
+  inherits: true;
+  initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
 @property --text-main {
   syntax: '<color>';
   inherits: true;
@@ -72,25 +78,25 @@
 @property --accent-base--default {
   syntax: '<color>';
   inherits: true;
-  initial-value: rgb(214, 134, 249);
+  initial-value: 214, 134, 249;
 }
 
 @property --accent-base--portfolio {
   syntax: '<color>';
   inherits: true;
-  initial-value: rgb(255, 181, 102);
+  initial-value: 255, 181, 102;
 }
 
 @property --accent-base--blog {
   syntax: '<color>';
   inherits: true;
-  initial-value: rgb(111, 221, 246);
+  initial-value: 111, 221, 246;
 }
 
 @property --accent-base--book {
   syntax: '<color>';
   inherits: true;
-  initial-value: rgb(247, 110, 138);
+  initial-value: 247, 110, 138;
 }
 
 :root {
@@ -104,10 +110,10 @@
   --glass-blur: 16px;
   --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 
-  --accent-base--default: rgb(214, 134, 249);
+  --accent-base--default: 214, 134, 249;
-  --accent-base--portfolio: rgb(255, 181, 102);
+  --accent-base--portfolio: 255, 181, 102;
-  --accent-base--blog: rgb(111, 221, 246);
+  --accent-base--blog: 111, 221, 246;
-  --accent-base--book: rgb(247, 110, 138);
+  --accent-base--book: 247, 110, 138;
   --accent-base: var(--accent-base--default);
 }
 
@@ -165,7 +171,7 @@ body {
   padding: 0;
   line-height: 1.6;
   min-height: 100vh;
-  background-image: var(--bg-image), radial-gradient(circle at 50% 0%, rgba(from var(--accent-base) r g b / 0.15), transparent 60%);
+  background-image: var(--bg-image), radial-gradient(circle at 50% 0%, rgba(var(--accent-base), 0.15), transparent 60%);
   background-size: cover, auto;
   background-position: center;
   background-attachment: fixed;
@@ -174,7 +180,7 @@ body {
 
 @media (prefers-reduced-motion: reduce) {
   body {
-    background-image: var(--bg-image-static), radial-gradient(circle at 50% 0%, rgba(from var(--accent-base) r g b / 0.15), transparent 60%);
+    background-image: var(--bg-image-static), radial-gradient(circle at 50% 0%, rgba(var(--accent-base), 0.15), transparent 60%);
   }
 }
 
@@ -184,7 +190,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: var(--accent-base);
+  color: rgb(var(--accent-base));
   font-weight: 600;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -197,7 +203,7 @@ a {
 }
 
 a:hover {
-  text-shadow: 0 0 8px rgba(from var(--accent-base) r g b / 0.6);
+  text-shadow: 0 0 8px rgba(var(--accent-base), 0.6);
 }
 
 .glass-container {
@@ -212,8 +218,8 @@ a:hover {
 }
 
 .glass-container:hover {
-  border-color: rgba(from var(--accent-base) r g b / 0.3);
+  border-color: rgba(var(--accent-base), 0.3);
-  box-shadow: 0 8px 32px 0 rgba(from var(--accent-base) r g b / 0.1);
+  box-shadow: 0 8px 32px 0 rgba(var(--accent-base), 0.1);
 }
 
 .container {
@@ -225,7 +231,7 @@ a:hover {
 /* Typography styles for markdown content */
 .prose code {
   font-family: var(--font-cascadia-code);
-  background: rgba(from var(--accent-base) r g b / 0.1);
+  background: rgba(255, 255, 255, 0.1);
   padding: 0.2em 0.4em;
   border-radius: 0.25rem;
   font-size: 0.9em;