From b4307e276b04aa270f213c6c932a666e486dd1ad Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Thu, 13 Nov 2025 00:51:09 +0100
Subject: Add mermaid support for rendering graphs

---
 assets/scss/web/_blog.scss                    | 6 ++++++
 layouts/_default/baseof.html                  | 6 ++++++
 layouts/_markup/render-codeblock-mermaid.html | 4 ++++
 3 files changed, 16 insertions(+)
 create mode 100644 layouts/_markup/render-codeblock-mermaid.html

diff --git a/assets/scss/web/_blog.scss b/assets/scss/web/_blog.scss
index 20c039b..349eaae 100644
--- a/assets/scss/web/_blog.scss
+++ b/assets/scss/web/_blog.scss
@@ -109,3 +109,9 @@
     margin-bottom: 0.25rem;
   }
 }
+
+.mermaid {
+  background-color: #eeeeee;
+  display: flex;
+  justify-content: center;
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9b0edef..36f8072 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -19,6 +19,12 @@
       {{ block "main" . }}
       {{ end }}
     </main>
+    {{ if .Store.Get "hasMermaid" }}
+      <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({ startOnLoad: true });
+      </script>
+    {{ end }}
   </body>
   <footer>
     {{ block "footer" . }}
diff --git a/layouts/_markup/render-codeblock-mermaid.html b/layouts/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..42e8abf
--- /dev/null
+++ b/layouts/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
-- 
cgit v1.2.3