Update pipeline for dev

Add TS lint comment
Update astro
2026-09-04 08:09:28 +02:00 · 2026-08-29 16:06:09 +02:00 · 2026-08-29 16:01:24 +02:00
16 changed files with 3035 additions and 2278 deletions
@@ -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
@@ -31,6 +41,6 @@ jobs:
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          source: "dist/*"
-          target: /srv/website/dev
+          target: /srv/website/stable
          overwrite: true
          strip_components: 1
@@ -9,20 +9,30 @@ 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
+      - uses: actions/checkout@v4
        name: Checkout code
      
      - name: Setup node and npm
-        uses: actions/setup-node@v7
+        uses: actions/setup-node@v3
        with:
          node-version: lts/*
      
      - name: Install dependencies
-        run: npm ci
+        run: npm install
      
      - name: Check and build
        run: npm run build
+        # env:
+        #   KROKI_SERVER: "http://kroki:8000"
      
      - name: Copy files via ssh
        uses: appleboy/scp-action@v1
@@ -1,10 +1,13 @@
-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";
+import { defineConfig, fontProviders } from 'astro/config';
+import { unified } from '@astrojs/markdown-remark';
+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";

 export default defineConfig({
  fonts: [{
@@ -13,36 +16,30 @@ export default defineConfig({
    cssVariable: "--font-cascadia-code",
    fallbacks: ["monospace"],
  }],
-  integrations: [
-    mermaid({
-      theme: "dark",
-      autoTheme: false,
-      mermaidConfig: {
-        flowchart: {curve:"linear"},
-        startOnLoad: false,
-        logLevel: "error",
-        securityLevel: "strict",
-      }
-    }),
-    icon(),
-    mdx()
-  ],
+  integrations: [icon(), mdx()],
  markdown: {
-    processor: satteri({
-      features: {
-        math: true,
-        rawHtml: true,
-        smartPunctuation: true,
-      },
-      mdastPlugins: [satteriKatex()],
-      hastPlugins: [satteriCallouts({theme: "obsidian"})],
+    processor: unified({
+      remarkPlugins: [
+        // remarkModifiedTime,
+        remarkMath,
+        [remarkKroki, { 
+            alias: ["mermaid", "tikz"],
+            server: process.env.KROKI_SERVER || "https://kroki.io",
+            target: "mdx3",
+            output: "inline-svg"
+        }]
+      ],
+      rehypePlugins: [
+        rehypeMathjax,
+        [rehypeCallouts, { theme: "obsidian" }]
+      ],
    }),
    shikiConfig: {
        theme: "one-dark-pro",
    },
    syntaxHighlight: {
-      type: "shiki",
-      excludeLangs: ["mermaid", "math"],
+      type: 'shiki',
+      excludeLangs: ['mermaid', 'math'],
    },
  }
 });
@@ -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.3.1",
+    "astro": "^7.2.9",
    "astro-icon": "^1.1.5",
-    "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
+    "rehype-callouts": "^2.1.2",
+    "rehype-mathjax": "^7.1.0",
+    "remark-kroki": "^0.3.8",
+    "remark-math": "^6.0.0"
  }
 }
@@ -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);
-    border: 1px solid rgb(from var(--accent-base) r g b / 0.3);
-    color: var(--accent-base);
+    background: rgba(var(--accent-base), 0.15);
+    border: 1px solid rgba(var(--accent-base), 0.3);
+    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 {
@@ -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;
  }

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

@@ -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
@@ -119,9 +122,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="min-width: 700px;">
+<div style="overflow-x: auto;width: 100%;">
 ```mermaid
+%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
 flowchart TD
    subgraph FA3
        A3@{ shape: circle, label: "a_3" } --> FA31
@@ -149,7 +152,6 @@ flowchart TD
        FA01 -- c_0 --> FA11
    end
 ```
-    </div>
 </div>

 > [!info] Nomenklatur
@@ -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');
@@ -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);
-    color: var(--accent-base);
+    background: rgba(var(--accent-base), 0.1);
+    color: rgb(var(--accent-base));
  }
  .mini-chapter a.active {
-    background: rgb(from var(--accent-base) r g b / 0.2);
-    color: var(--accent-base);
+    background: rgba(var(--accent-base), 0.2);
+    color: rgb(var(--accent-base));
    font-weight: 600;
  }
 </style>
@@ -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%,
-      rgb(from var(--accent-base--portfolio) r g b / 0.15) 100%
+      rgba(var(--accent-base--portfolio), 0.5) 0%,
+      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%,
-      rgb(from var(--accent-base--blog) r g b / 0.15) 100%
+      rgba(var(--accent-base--blog), 0.8) 0%,
+      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%,
-      rgb(from var(--accent-base--book) r g b / 0.15) 100%
+      rgba(var(--accent-base--book), 0.8) 0%,
+      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 {
@@ -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;
@@ -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>
@@ -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--portfolio: rgb(255, 181, 102);
-  --accent-base--blog: rgb(111, 221, 246);
-  --accent-base--book: rgb(247, 110, 138);
+  --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: 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);
-  box-shadow: 0 8px 32px 0 rgba(from var(--accent-base) r g b / 0.1);
+  border-color: rgba(var(--accent-base), 0.3);
+  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;
Author	SHA1	Message	Date
c0ntroller	2cf117f92b	Update pipeline for dev Deploy Dev Website / Build and Deploy (push) Failing after 2m22s Details	2026-09-04 08:09:28 +02:00
c0ntroller	8909906898	Add TS lint comment	2026-08-29 16:06:09 +02:00
c0ntroller	3c237b8fa6	Update astro	2026-08-29 16:01:24 +02:00