Merge branch 'main' of github.com:rot1024/astrotion

Author: rot1024

package-lock.json

@@ -32,7 +32,7 @@
     "ezog": "^0.4.0",
     "katex": "^0.16.25",
     "mermaid": "^11.12.1",
-    "notiondown": "^0.3.0",
+    "notiondown": "^0.3.1",
     "sharp": "^0.34.4",
     "tailwindcss": "^4.1.16"
   },

package.json

@@ -56,6 +56,9 @@ const { database, post, html } = await getPost(slug);
     </article>
   </main>
 </Layout>
+<script>
+  import "../../scripts/mermaid";
+</script>
 <style
   define:vars={{
     titleFontFamily: config.index?.titleFontFamily || "inherit",

src/pages/posts/[slug].astro

@@ -0,0 +1,47 @@
+import mermaid from "mermaid";
+
+// Initialize mermaid with default configuration
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "default",
+  securityLevel: "loose",
+});
+
+// Wait for DOM to be ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initMermaid);
+} else {
+  initMermaid();
+}
+
+function initMermaid() {
+  // Find all code blocks with language-mermaid class
+  const mermaidBlocks = document.querySelectorAll<HTMLElement>(
+    "pre code.language-mermaid, pre.language-mermaid code",
+  );
+
+  if (mermaidBlocks.length === 0) {
+    return;
+  }
+
+  mermaidBlocks.forEach((block, index) => {
+    const code = block.textContent || "";
+    const pre = block.closest("pre");
+
+    if (pre && code.trim()) {
+      // Create a new div to hold the mermaid diagram
+      const div = document.createElement("div");
+      div.className = "mermaid";
+      div.textContent = code.trim();
+      div.id = `mermaid-diagram-${index}`;
+
+      // Replace the pre element with the mermaid div
+      pre.replaceWith(div);
+    }
+  });
+
+  // Trigger mermaid rendering
+  mermaid.run({
+    querySelector: ".mermaid",
+  });
+}

src/scripts/mermaid.ts

@@ -125,3 +125,12 @@
 .markdown .youtube {
   @apply aspect-video w-full h-auto;
 }
+
+.markdown .mermaid {
+  @apply my-8 flex justify-center;
+}
+
+.markdown .mermaid svg {
+  max-width: 100%;
+  height: auto;
+}