Merge bb5923f1138ec19ce96c62e4568a7e66adf8f957 into fe2271b60bd34476726447fd9361aee59eb2a92f

Make mermaid render diagrams on manual toggle between themes, after initial page load

exampleSite/content/showcase/index.md

@@ -12,6 +12,13 @@ Open source projects powered by Hextra
 </p>
 
 {{< cards >}}
+  {{< card
+        link="https://github.com/modelcontextprotocol/specification"
+        title="Model Context Protocol Specification"
+        image="https://github.com/user-attachments/assets/1bb4f952-b8fc-43b5-9cbd-cd7213c2ba90"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
   {{< card
         link="https://github.com/jonaspleyer/cellular_raza"
         title="cellular_raza"

layouts/partials/navbar.html

@@ -56,6 +56,12 @@
             {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
             class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
           >
+            {{ with .Params.hero_icon -}}
+              <span style="float: left; padding-right: 0.3em; padding-top: 2px; opacity: 0.75">
+                {{ partial "utils/icon.html" (dict "name" . "attributes" "height=18") }}
+              </span>
+            {{- end }}
+
             <span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- end -}}

layouts/partials/scripts.html

@@ -37,9 +37,32 @@
   {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
   <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
   <script>
-    document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", () => {
+      // Store original mermaid code for each diagram
+      document.querySelectorAll(".mermaid").forEach(el => {
+        el.dataset.original = el.innerHTML;
+      });
+
       const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
       mermaid.initialize({ startOnLoad: true, theme: theme });
+
+      let timeout;
+      new MutationObserver(() => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
+          document.querySelectorAll(".mermaid").forEach(el => {
+            // Reset to original content, preserving HTML
+            el.innerHTML = el.dataset.original;
+            el.removeAttribute("data-processed");
+          });
+          mermaid.initialize({ startOnLoad: true, theme: theme });
+          mermaid.init();
+        }, 150);
+      }).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
     });
   </script>
 {{- end -}}