mermaid: Add mermaid workaround

For upstream hugo the only possiblity for mermaid rendering is using
external js script.

Signed-off-by: Nikita Shubin <nikita.shubin@maquefel.me>

1 files changed, 26 insertions, 0 deletions

diff --git a/layouts/partials/head-additions.html b/layouts/partials/head-additions.html
new file mode 100644
index 0000000..0aa1935
--- /dev/null
+++ b/layouts/partials/head-additions.html
@@ -0,0 +1,26 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Look for mermaid code blocks
+    const mermaidBlocks = document.querySelectorAll('pre code.language-mermaid');
+    if (mermaidBlocks.length > 0) {
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: 'default',
+        flowchart: {
+          useMaxWidth: true
+        }
+      });
+
+      mermaidBlocks.forEach((block, index) => {
+        const graphDefinition = block.textContent;
+        const div = document.createElement('div');
+        div.className = 'mermaid';
+        div.innerHTML = graphDefinition;
+        block.parentNode.parentNode.replaceChild(div, block.parentNode);
+      });
+
+      mermaid.init();
+    }
+  });
+</script>