Merge f66c915d5b499ba53d8253b99807fe4a4c654e46 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/head.html

@@ -10,6 +10,10 @@
   <title>
     {{- if .IsHome -}}
       {{ .Site.Title -}}
+    {{ else if eq .Kind "page" -}}
+      {{ with .Title }}{{ . }} – {{ end -}}
+      {{ $sectionTitle := index .Site.Params.sectionsTitles .Section }}
+      {{ $sectionTitle | default .Site.Title }}
     {{ else -}}
       {{ with .Title }}{{ . }} – {{ end -}}
       {{ .Site.Title -}}

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 -}}