Catch mermaid errors

Author: dave2wave

content/theme/templates/page.html

@@ -17,24 +17,29 @@
       </div>
     </main>
     <script>
+      document.addEventListener("DOMContentLoaded", () => {
       function decodeHtmlEntities(str) {
         const txt = document.createElement("textarea");
         txt.innerHTML = str;
         return txt.value;
       }
-      document.addEventListener("DOMContentLoaded", () => {
-        document.querySelectorAll("pre > code.language-mermaid").forEach(code => {
-          const rawHtml = code.innerHTML;
-          const decoded = decodeHtmlEntities(rawHtml);
-          console.log("=== Mermaid block decoded text ===");
-          console.log(Array.from(decoded).map(c => c.charCodeAt(0)));
-          const div = document.createElement("div");
-          div.className = "mermaid";
-          // Replace <pre><code>…</code></pre> with <div class="mermaid">…</div>
-          code.parentElement.replaceWith(div);
+      document.querySelectorAll("pre > code.language-mermaid").forEach((code, i) => {
+        let decoded = decodeHtmlEntities(code.innerHTML);
+        // Normalize whitespace
+        decoded = decoded.replace(/\t/g, "    ");
+        decoded = decoded.replace(/^\s*\n/, "").replace(/\n\s*$/, "");
+        const div = document.createElement("div");
+        div.className = "mermaid";
+        div.textContent = decoded;
+        code.parentElement.replaceWith(div);
+        console.log(`=== Mermaid block ${i} ===`);
+        console.log(decoded);
+      });
+      // Mermaid v10+ runs asynchronously
+      mermaid.run({ querySelector: ".mermaid" })
+        .catch(err => {
+          console.error("Mermaid rendering failed:", err);
         });
-        // Now render them
-        mermaid.run({ querySelector: ".mermaid" });
       });
     </script>
     <script>hljs.highlightAll();</script>