From dacad20d1e26422db964011128ff5f06a561c1b1 Mon Sep 17 00:00:00 2001
From: miklz <mikael_ferraz@hotmail.com>
Date: Mon, 6 Oct 2025 06:58:46 -0300
Subject: [PATCH] Add support for Mermaid diagrams in markdown content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces native Mermaid diagram rendering to the theme.

Following Hugo’s official documentation, a new custom code block renderer
(`render-codeblock-mermaid.html`) was added under `layouts/_default/` to
detect Mermaid code blocks and inject the necessary script flag into the
page context.

Additionally, the `baseof.html` template now conditionally includes the
Mermaid JS module from the CDN when a page contains a Mermaid diagram:

  {{ 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, theme: 'neutral' });
    </script>
  {{ end }}

This enables rendering of fenced code blocks using the `mermaid` language
in markdown files without requiring any external preprocessing.
---
 layouts/_default/_markup/render-codeblock-mermaid.html | 4 ++++
 layouts/_default/baseof.html                           | 9 +++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html

diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 000000000..42e8abfd8
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 83fdaa325..e5d4dbd0a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -23,6 +23,15 @@
                 {{- block "main" . }}{{- end }}
             </main>
         </div>
+        {{ 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,
+              theme: 'neutral',
+            });
+          </script>
+        {{ end }}
         {{ partial "footer/include.html" . }}
     </body>
 </html>