Add mermaid for rendering graphs and other diagrams

templates/_base.html

@@ -0,0 +1,21 @@
+{% extends "radion/templates/_base.html" %}
+{% block scripts %}
+  {{ super() }}
+
+  <!-- mermaid -->
+  <!-- Based on the following blog -->
+  <!-- https://www.hahwul.com/dev/zola/mermaid-in-zola/ -->
+  <script src="/js/mermaid.min.js"></script>
+  <script type="module">
+    mermaid.initialize({ startOnLoad: false, theme: 'dark' });
+    document.addEventListener('DOMContentLoaded', async () => {
+      const mermaidElements = document.querySelectorAll('.mermaid');
+
+      if (mermaidElements.length > 0) {
+          await mermaid.run({
+              nodes: mermaidElements
+          });
+      }
+    });
+  </script>
+{% endblock %}

templates/shortcodes/mermaid.html

@@ -0,0 +1,3 @@
+<pre class="mermaid">
+ {{ body }}
+</pre>