Add mermaid for rendering graphs and other diagrams

content/ceph-benchmarking/index.md

@@ -39,6 +39,14 @@ Setup the benchmark itself:
 5. `mount /dev/rbd0 /mnt/bench`
 
 ## Benchmarks
+{% mermaid() %}
+xychart
+    title "Random Read"
+    x-axis "Block Size" ["4k", "8k", "4M", "8M"]
+    y-axis "IOPS" 0000 --> 5000
+    bar [0, 0, 0, 0]
+
+{% end %}
 
 ## TODO
 - Try directly on the block device

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>