Update pipeline for stable

.gitea/workflows/dev.yml

@@ -9,30 +9,20 @@ 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@v4
+      - uses: actions/checkout@v7
         name: Checkout code
       
       - name: Setup node and npm
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v7
         with:
           node-version: lts/*
       
       - name: Install dependencies
-        run: npm install
+        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
@@ -41,6 +31,6 @@ jobs:
           username: ${{ secrets.SSH_USERNAME }}
           key: ${{ secrets.SSH_KEY }}
           source: "dist/*"
-          target: /srv/website/stable
+          target: /srv/website/dev
           overwrite: true
           strip_components: 1

.gitea/workflows/stable.yml

@@ -9,30 +9,20 @@ 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@v4
+      - uses: actions/checkout@v7
         name: Checkout code
       
       - name: Setup node and npm
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v7
         with:
           node-version: lts/*
       
       - name: Install dependencies
-        run: npm install
+        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,12 +1,10 @@
-import { defineConfig, fontProviders } from 'astro/config';
-import icon from 'astro-icon';
-import mdx from '@astrojs/mdx';
-//import { remarkModifiedTime } from './src/remark-modified-time.mjs';
-import remarkMath from "remark-math";
-import rehypeMathjax from "rehype-mathjax"
-import rehypeCallouts from "rehype-callouts";
-// @ts-ignore
-import { remarkKroki } from "remark-kroki";
+import { defineConfig, fontProviders } from "astro/config";
+import { satteri } from '@astrojs/markdown-satteri';
+import icon from "astro-icon";
+import mdx from "@astrojs/mdx";
+import satteriCallouts from "satteri-callouts"
+import { satteriKatex } from "satteri-katex";
+import mermaid from "astro-mermaid";
 
 export default defineConfig({
   fonts: [{
@@ -15,25 +13,36 @@ export default defineConfig({
     cssVariable: "--font-cascadia-code",
     fallbacks: ["monospace"],
   }],
-  integrations: [icon(), mdx()],
-  markdown: {
-    remarkPlugins: [
-//      remarkModifiedTime,
-      remarkMath, [
-        remarkKroki, { 
-          alias: ["mermaid", "tikz"],
-          server: process.env.KROKI_SERVER || "https://kroki.io",
-          target: "mdx3",
-          output: "inline-svg"
+  integrations: [
+    mermaid({
+      theme: "dark",
+      autoTheme: false,
+      mermaidConfig: {
+        flowchart: {curve:"linear"},
+        startOnLoad: false,
+        logLevel: "error",
+        securityLevel: "strict",
       }
-    ]],
-    rehypePlugins: [rehypeMathjax, [rehypeCallouts, { theme: "obsidian" }]],
+    }),
+    icon(),
+    mdx()
+  ],
+  markdown: {
+    processor: satteri({
+      features: {
+        math: true,
+        rawHtml: true,
+        smartPunctuation: true,
+      },
+      mdastPlugins: [satteriKatex()],
+      hastPlugins: [satteriCallouts({theme: "obsidian"})],
+    }),
     shikiConfig: {
         theme: "one-dark-pro",
     },
     syntaxHighlight: {
-      type: 'shiki',
-      excludeLangs: ['mermaid', 'math'],
+      type: "shiki",
+      excludeLangs: ["mermaid", "math"],
     },
   }
 });

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "website-ag",
+  "name": "c0ntroller.de",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "engines": {
     "node": ">=22.12.0"
   },
@@ -12,14 +12,21 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^5.0.2",
+    "@astrojs/mdx": "^8.0.0",
     "@iconify-json/lucide": "^1.2.98",
     "@iconify-json/simple-icons": "^1.2.74",
-    "astro": "^6.0.8",
+    "@mermaid-js/layout-elk": "^0.2.3",
+    "astro": "^7.3.1",
     "astro-icon": "^1.1.5",
-    "rehype-callouts": "^2.1.2",
-    "rehype-mathjax": "^7.1.0",
-    "remark-kroki": "^0.3.8",
-    "remark-math": "^6.0.0"
+    "astro-mermaid": "^2.1.0",
+    "mermaid": "^11.17.2",
+    "satteri-callouts": "^1.0.1",
+    "satteri-katex": "^0.1.1"
+  },
+  "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: rgba(var(--accent-base), 0.15);
-    border: 1px solid rgba(var(--accent-base), 0.3);
-    color: rgb(var(--accent-base));
+    background: rgb(from var(--accent-base) r g b / 0.15);
+    border: 1px solid rgb(from var(--accent-base) r g b / 0.3);
+    color: var(--accent-base);
     transition: all 0.2s ease;
     user-select: none;
   }
   .toc-label:hover {
-    background: rgba(var(--accent-base), 0.25);
+    background: rgb(from var(--accent-base) r g b / 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: rgb(var(--accent-base));
+    color: var(--accent-base);
   }
   .links a[href="/portfolio"]:hover {
-    color: rgb(var(--accent-base--portfolio));
+    color: var(--accent-base--portfolio);
   }
   .links a[href="/blog"]:hover {
-    color: rgb(var(--accent-base--blog));
+    color: var(--accent-base--blog);
   }
   .links a[href="/book"]:hover {
-    color: rgb(var(--accent-base--book));
+    color: var(--accent-base--book);
   }
   .links a.active {
-    color: rgb(var(--accent-base));
+    color: 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: rgb(var(--accent-base));
+        color: 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 rgb(var(--accent-base));
+        border-right: 2px solid 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 rgb(var(--accent-base));
+        border-right: 2px solid var(--accent-base);
         animation: blink-caret 1s step-end infinite;
     }
 
@@ -79,7 +79,7 @@
     }
 
     @keyframes blink-caret {
-        from, to { border-color: rgb(var(--accent-base)) }
+        from, to { border-color: var(--accent-base); }
         50% { border-color: transparent; }
     }
 

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

@@ -35,7 +35,6 @@ 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
@@ -72,7 +71,6 @@ 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
@@ -97,7 +95,6 @@ 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
@@ -122,9 +119,9 @@ 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="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
@@ -152,6 +149,7 @@ flowchart TD
         FA01 -- c_0 --> FA11
     end
 ```
+    </div>
 </div>
 
 > [!info] Nomenklatur

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

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

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

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

src/pages/index.astro

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

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

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

src/styles/global.css

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