Update index.html

index.html

@@ -60,8 +60,15 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 
+  <!-- Load mermaid first, prevent default DOM -->
+  <script>
+    window.mermaid = { startOnLoad: false };
+  </script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  
   <!-- AOS (Animate On Scroll) -->
   <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />
+  
   <script defer src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
 
   <!-- Lucide Icons -->
@@ -1336,6 +1343,19 @@ L_t = α * CE(y_t) + (1-α) * τ^2 * KL( p_T(·|τ) || p_S(·) )</code></pre>
     const $ = (sel, root = document) => root.querySelector(sel);
     const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
 
+    const MERMAID_SRC = new WeakMap();
+
+    function cacheMermaidSources() {
+      document.querySelectorAll('.mermaid').forEach(el => {
+        if (!MERMAID_SRC.has(el)) {
+          MERMAID_SRC.set(el, (el.textContent || '').trim());
+        }
+      });
+    }
+    
+    // Cache mermaid src (before any render)
+    cacheMermaidSources();
+
     function showToast(msg) {
       const t = $('#toast');
       if (!t) return;
@@ -1403,45 +1423,45 @@ L_t = α * CE(y_t) + (1-α) * τ^2 * KL( p_T(·|τ) || p_S(·) )</code></pre>
     }
 
     // ---------- Mermaid ----------
+    let _mermaidRendering = false;
+    
     async function renderMermaid() {
       if (!window.mermaid) return;
+      if (_mermaidRendering) return;
+      _mermaidRendering = true;
     
-      const isDark = document.documentElement.classList.contains('dark');
-      mermaid.initialize({
-        startOnLoad: false,
-        theme: isDark ? 'dark' : 'default',
-        securityLevel: 'loose',
-        fontFamily: 'Inter, ui-sans-serif, system-ui',
-        flowchart: { useMaxWidth: true, htmlLabels: true }
-      });
+      try {
+        const isDark = document.documentElement.classList.contains('dark');
     
-      const blocks = document.querySelectorAll('.mermaid');
-      let idx = 0;
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: isDark ? 'dark' : 'default',
+          securityLevel: 'loose',
+          fontFamily: 'Inter, ui-sans-serif, system-ui',
+          flowchart: { useMaxWidth: true, htmlLabels: true }
+        });
     
-      for (const el of blocks) {
-        // 1) Cache original source once (before SVG replacement)
-        if (!el.dataset.mermaidSrc) {
-          const src = (el.textContent || '').trim();
-          // If the element already contains svg (e.g., from previous render), don't overwrite cache
-          if (src.startsWith('<svg')) continue;
-          el.dataset.mermaidSrc = src;
-        }
+        const blocks = document.querySelectorAll('.mermaid');
+        let idx = 0;
     
-        const code = (el.dataset.mermaidSrc || '').trim();
-        if (!code) continue;
+        for (const el of blocks) {
+          const code = (MERMAID_SRC.get(el) || '').trim();
+          if (!code) continue;
     
-        // 2) Render from cached source
-        const id = `mmd-${idx++}-${Date.now()}`;
+          const id = `mmd-${idx++}-${Date.now()}`;
     
-        try {
-          const { svg, bindFunctions } = await mermaid.render(id, code);
-          el.innerHTML = svg;
-          if (typeof bindFunctions === 'function') bindFunctions(el);
-        } catch (err) {
-          console.error('Mermaid render error:', err, code);
-          const safe = String(err).replace(/</g, '&lt;').replace(/>/g, '&gt;');
-          el.innerHTML = `<div class="text-red-300 text-sm">Mermaid render failed: ${safe}</div>`;
+          try {
+            const { svg, bindFunctions } = await mermaid.render(id, code);
+            el.innerHTML = svg;
+            if (typeof bindFunctions === 'function') bindFunctions(el);
+          } catch (err) {
+            console.error('Mermaid render error:', err, code);
+            const safe = String(err).replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            el.innerHTML = `<div class="text-red-300 text-sm">Mermaid render failed: ${safe}</div>`;
+          }
         }
+      } finally {
+        _mermaidRendering = false;
       }
     }
 
@@ -1475,7 +1495,7 @@ L_t = α * CE(y_t) + (1-α) * τ^2 * KL( p_T(·|τ) || p_S(·) )</code></pre>
           if (panel) panel.classList.remove('hidden');
 
           // re-render mermaid if panel contains diagrams
-          requestAnimationFrame(() => renderMermaid());
+          requestAnimationFrame(() => await renderMermaid());
         });
       });
     }
@@ -1785,7 +1805,7 @@ L_t = α * CE(y_t) + (1-α) * τ^2 * KL( p_T(·|τ) || p_S(·) )</code></pre>
       // Render math + mermaid after libs load
       setTimeout(() => {
         renderMath();
-        renderMermaid();
+        await renderMermaid();
       }, 0);
 
       initGSAP();