🐛 fix: Preserve Mermaid indentation disrupted by Hugo minify (#2069)

Add a pre tag to the Mermaid class to preserve indentation and ensure data retrieval on DOMContentLoaded

assets/js/mermaid.js

@@ -2,6 +2,17 @@ function css(name) {
   return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
 }
 
+document.addEventListener("DOMContentLoaded", () => {
+  const mermaidDivs = document.querySelectorAll("div.mermaid");
+
+  for (const div of mermaidDivs) {
+    const preElement = div.querySelector("pre");
+    if (preElement) {
+      div.textContent = preElement.textContent;
+    }
+  }
+});
+
 mermaid.initialize({
   theme: "base",
   themeVariables: {
@@ -17,4 +28,4 @@ mermaid.initialize({
       "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
     fontSize: "16px",
   },
-});
+});

layouts/shortcodes/mermaid.html

@@ -1,3 +1,3 @@
 <div class="mermaid" align="center">
-  {{ .Inner }}
+  <pre>{{ .Inner | safeHTML }}</pre>
 </div>