DOC-5881 enable Mermaid diagrams

Author: andy-stark-redis

assets/css/index.css

@@ -88,6 +88,12 @@ section.prose {
   @apply bg-slate-900 rounded-lg;
 }
 
+.prose pre.mermaid {
+  background-color: white !important;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
 .prose pre > code {
   @apply bg-none font-monogeist;
 }

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,7 @@
+{{ $width := (index .Attributes "width") | default "75%" }}
+<div style="width: {{ $width }};">
+<pre class="mermaid" style="background-color: white; padding: 1rem; border-radius: 0.5rem;">
+    {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}

layouts/_default/baseof.html

@@ -79,5 +79,20 @@
     {{ partial "toc-js.html" . }}
 
     {{ partial "search-modal.html" . }}
+
+    {{ 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: 'base',
+        themeVariables: {
+          fontFamily: 'Space Mono',
+          primaryColor: '#ffffff',
+          primaryBorderColor: '#ee0000'
+        }
+      });
+    </script>
+    {{ end }}
   </body>
 </html>