fix: workflow page admonitions, diagram, and links

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 *.png
 !website/public/logo.png
 !website/public/icon.png
+!docs/workflow-diagram.png
 .playwright-mcp/
 *:Zone.Identifier
 website/public/CONTRIBUTING.html

docs/spec-driven-workflow.de.html

@@ -598,6 +598,11 @@ <h2 id="_das_grundprinzip_kleine_schritte_hohe_autonomie">Das Grundprinzip: Klei
 <div class="sect1">
 <h2 id="_workflow_übersicht">Workflow-Übersicht</h2>
 <div class="sectionbody">
+<div class="imageblock">
+<div class="content">
+<img src="workflow-diagram.png" alt="Workflow-Übersicht" width="800">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -664,7 +669,7 @@ <h2 id="_voraussetzungen">Voraussetzungen</h2>
 <div class="sect2">
 <h3 id="_agents_md_als_projektgedächtnis">AGENTS.md als Projektgedächtnis</h3>
 <div class="paragraph">
-<p><a href="https://agents.md"><code>AGENTS.md</code></a> ist ein offener Standard zur Steuerung von KI-Coding-Agenten.
+<p><code>AGENTS.md</code> ist ein offener Standard zur Steuerung von KI-Coding-Agenten.
 Die Datei liegt im Repository-Root und wird automatisch zu Beginn jeder Session gelesen.
 Sie dient als Projektgedächtnis: Coding-Konventionen, Architekturentscheidungen, Dateistruktur und Verweise auf wichtige Dokumente.</p>
 </div>

docs/spec-driven-workflow.html

@@ -598,6 +598,11 @@ <h2 id="_the_key_principle_small_steps_high_autonomy">The Key Principle: Small S
 <div class="sect1">
 <h2 id="_workflow_overview">Workflow Overview</h2>
 <div class="sectionbody">
+<div class="imageblock">
+<div class="content">
+<img src="workflow-diagram.png" alt="Workflow Overview" width="800">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -663,7 +668,7 @@ <h2 id="_prerequisites">Prerequisites</h2>
 <div class="sect2">
 <h3 id="_agents_md_as_project_memory">AGENTS.md as Project Memory</h3>
 <div class="paragraph">
-<p><a href="https://agents.md"><code>AGENTS.md</code></a> is an open standard for guiding AI coding agents.
+<p><code>AGENTS.md</code> is an open standard for guiding AI coding agents.
 The file lives in your repository root and is read automatically at the start of every session.
 It serves as the project memory: coding conventions, architectural decisions, file structure, and pointers to important documents.</p>
 </div>

scripts/render-docs.js

@@ -100,6 +100,8 @@ function copyHtmlDoc(srcPath, destPath) {
       '#/anchor/'
     )
     html = html.replace(/https:\/\/llm-coding\.github\.io\/Semantic-Anchors\//g, '#/')
+    // Fix relative image paths for SPA context (content is injected at root level)
+    html = html.replace(/src="([^"/][^"]*\.(png|jpg|svg|gif))"/g, 'src="docs/$1"')
     fs.writeFileSync(destPath, html, 'utf-8')
     console.log(`Copied: ${path.relative(ROOT, destPath)}`)
   } catch (err) {
@@ -116,3 +118,10 @@ copyHtmlDoc(
   path.join(ROOT, 'docs/spec-driven-workflow.de.html'),
   path.join(WEB_DOCS, 'spec-driven-workflow.de.html')
 )
+
+// Copy assets referenced by workflow docs
+const workflowDiagram = path.join(ROOT, 'docs/workflow-diagram.png')
+if (fs.existsSync(workflowDiagram)) {
+  fs.copyFileSync(workflowDiagram, path.join(WEB_DOCS, 'workflow-diagram.png'))
+  console.log(`Copied: ${path.relative(ROOT, path.join(WEB_DOCS, 'workflow-diagram.png'))}`)
+}

website/index.html

@@ -13,6 +13,9 @@
     <meta name="author" content="LLM Coding Community" />
     <meta name="language" content="English, German" />
 
+    <!-- Font Awesome for AsciiDoc admonition icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+
     <!-- Canonical URL -->
     <link rel="canonical" href="https://llm-coding.github.io/Semantic-Anchors/" />
 

website/src/styles/asciidoctor-scoped.css

@@ -189,9 +189,81 @@
 
   & .admonitionblock {
     margin: 1.25rem 0;
-    padding: 1rem;
     border-left: 4px solid;
     background: #f5f5f5;
+    border-radius: 0.25rem;
+  }
+
+  & .admonitionblock > table {
+    border-collapse: separate;
+    border: 0;
+    background: none;
+    width: 100%;
+    margin: 0;
+  }
+
+  & .admonitionblock > table td {
+    border: 0;
+  }
+
+  & .admonitionblock > table td.icon {
+    text-align: center;
+    width: 80px;
+    vertical-align: middle;
+  }
+
+  & .admonitionblock > table td.icon i {
+    font-size: 2.5em;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    cursor: default;
+  }
+
+  & .admonitionblock > table td.icon .icon-note::before {
+    content: '\f05a';
+    font-family: FontAwesome;
+    color: #19407c;
+  }
+
+  & .admonitionblock > table td.icon .icon-tip::before {
+    content: '\f0eb';
+    font-family: FontAwesome;
+    text-shadow: 1px 1px 2px rgba(155, 155, 0, 0.8);
+    color: #111;
+  }
+
+  & .admonitionblock > table td.icon .icon-warning::before {
+    content: '\f071';
+    font-family: FontAwesome;
+    color: #bf6900;
+  }
+
+  & .admonitionblock > table td.icon .icon-caution::before {
+    content: '\f06d';
+    font-family: FontAwesome;
+    color: #bf3400;
+  }
+
+  & .admonitionblock > table td.icon .icon-important::before {
+    content: '\f06a';
+    font-family: FontAwesome;
+    color: #bf0000;
+  }
+
+  & .admonitionblock > table td.icon .title {
+    font-weight: bold;
+    font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
+    text-transform: uppercase;
+  }
+
+  & .admonitionblock > table td.content {
+    padding: 1rem 1.25rem;
+    border-left: 1px solid #dddddf;
+    color: rgba(0, 0, 0, 0.6);
+    word-wrap: anywhere;
+  }
+
+  & .admonitionblock > table td.content > :last-child > :last-child {
+    margin-bottom: 0;
   }
 
   & .admonitionblock.note {