Use global script instead of Mermaid component to avoid wrapping all the code fences into it

Author: psd-coder

src/components/Mermaid.astro

@@ -512,6 +512,11 @@ astro-island[component-export="GraphQLEditor"] {
   }
 }
 
+/* Using attribute selector instead of :has() for better compatibility */
+figure pre[data-language="mermaid"] {
+  display: none;
+}
+
 header.header {
   padding-top: 0;
   padding-bottom: 0;

src/globals.css

@@ -0,0 +1,80 @@
+import { cssId } from "./random/cssId";
+import { ensureNonNullable } from "~/lib/ensureNonNullable";
+import type { Theme } from "~/lib/theme";
+import { $theme } from "~/stores/theme";
+import { createIntersectionObserverAtom } from "~/lib/nanostores/createIntersectionObserverAtom";
+import { effect } from "~/lib/nanostores/effect";
+
+interface MermaidOptions {
+  id: string;
+  container: HTMLElement;
+  graph: string;
+  theme: Theme;
+}
+
+async function renderMermaid({ id, container, graph, theme }: MermaidOptions) {
+  const { default: mermaid } = await import("mermaid");
+
+  try {
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: "loose",
+      fontFamily: "inherit",
+      themeCSS: "margin: 1.5rem auto 0;",
+      theme: theme === "dark" ? "dark" : "default",
+    });
+
+    container.innerHTML = (await mermaid.render(id, graph)).svg;
+  } catch (error) {
+    // eslint-disable-next-line no-console -- show error
+    console.error("Error while rendering mermaid", error);
+  }
+}
+
+function upsertGraphContainer(element: HTMLDivElement) {
+  let container: HTMLDivElement | null = element.querySelector(".mermaid-graph");
+
+  if (!container) {
+    container = document.createElement("div");
+    container.classList.add("mermaid-graph");
+    element.appendChild(container);
+  }
+
+  return container;
+}
+
+export function processMermaidExpressiveCodeBlock() {
+  const expressiveCodeBlocks = document.querySelectorAll<HTMLDivElement>(".expressive-code");
+
+  for (const codeBlock of expressiveCodeBlocks) {
+    const { $atom: $diagramIsVisible, intersectionObserver } = createIntersectionObserverAtom({
+      element: codeBlock,
+      initialValue: false,
+      mapper: (entry) => entry.isIntersecting,
+      observerOptions: {
+        rootMargin: "0px 0px 100% 0px", // Trigger when it is on the next screen
+      },
+    });
+    const id = cssId();
+
+    effect([$diagramIsVisible, $theme], (diagramIsVisible, theme) => {
+      if (!diagramIsVisible) {
+        return;
+      }
+
+      // Disconnect the observer once the diagram is visible
+      // $diagramIsVisible will never change after this point
+      intersectionObserver?.disconnect();
+
+      const container = upsertGraphContainer(codeBlock);
+      const copyButton = ensureNonNullable(
+        codeBlock.querySelector<HTMLButtonElement>(".copy button"),
+      );
+      const graphData = (copyButton.dataset.code ?? "")
+        .replace(/\u007F/g, "\n")
+        .replaceAll("\\n", "\n");
+
+      void renderMermaid({ id, theme, graph: graphData, container });
+    });
+  }
+}

src/lib/mermaid.ts

@@ -0,0 +1,12 @@
+const alphabet = "abcdefghijklmnopqrstuvwxyz";
+
+export function cssId(length = 20) {
+  const randomArray = crypto.getRandomValues(new Uint8Array(length));
+  let id = "";
+
+  for (const i of randomArray) {
+    id += alphabet[i % alphabet.length] ?? "";
+  }
+
+  return id;
+}

src/lib/random/cssId.ts

@@ -42,7 +42,13 @@ const ogImageUrl = await getImageUrl(new URL("/api/og-image.png", Astro.site), {
 }
 <meta name="twitter:title" content={entryData.title} />
 {entryData.description && <meta name="twitter:description" content={entryData.description} />}
+<script>
+  import { processMermaidExpressiveCodeBlock } from "~/lib/mermaid";
 
+  document.addEventListener("DOMContentLoaded", () => {
+    processMermaidExpressiveCodeBlock();
+  });
+</script>
 <!-- <style is:global>
   ::view-transition-old(root),
   ::view-transition-new(root) {