Merge pull request #22 from microsoft/sethjuarez/web

mermaid theme agnostic rendering (punt)
microsoft · Jun 19, 2024 · 0e607a4 · 0e607a4
2 parents 6480124 + 73bbb15
commit 0e607a4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 17 deletions.
diff --git a/web/docs/_example/page.mdx b/web/docs/_example/page.mdx
@@ -20,15 +20,32 @@ Nice Diagram
 
 
 ```mermaid
-gantt
-    title A Gantt Diagram
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d
+---
+title: Animal example
+---
+classDiagram
+    note "From Duck till Zebra"
+    Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
 ```
 
 Some code

diff --git a/web/src/app/docs/[[...slug]]/page.tsx b/web/src/app/docs/[[...slug]]/page.tsx
@@ -163,7 +163,7 @@ export default async function Page({ params }: Props) {
           <div className="bg-zinc-100 dark:bg-zinc-700 rounded-md md:w-[250px] p-2 mb-2 md:mb-0">
             <Toc index={index.children} visible={true} />
           </div>
-          <div className="ml-6 grow">
+          <div className="ml-1 md:ml-6 grow">
             <div className="flex flex-row mb-4 gap-4">
               <div className="text-2xl md:text-4xl font-bold ">
                 {metadata.title}

diff --git a/web/src/components/mermaid.tsx b/web/src/components/mermaid.tsx
@@ -2,6 +2,7 @@
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import mermaid from "mermaid";
+import { useTheme } from "next-themes";
 
 type Props = {
   code: string;
@@ -10,20 +11,40 @@ type Props = {
 let loaded = false;
 
 const Mermaid = ({ code }: Props) => {
+  const { theme } = useTheme();
+  const [svg, setSvg] = useState<string>("");
+
   useEffect(() => {
-    if (!loaded) {
+    const init = async () => {
       mermaid.initialize({
-        startOnLoad: true,
-        darkMode: true,
+        startOnLoad: false,
+        //theme: "base",
+        //darkMode: false,
+        themeVariables: {
+          //fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji',    
+          //fontSize: "32px",    
+        },
       });
+      const { svg } = await mermaid.render("graphDiv", code);
+      setSvg(svg);
+    };
+
+    if (!loaded) {
+      console.log(theme);
+      init();
       loaded = true;
     }
-  }, []);
+
+  }, [code]);
 
   return (
-    <div>
-      <pre className="mermaid">{code}</pre>
-    </div>
+    <div
+      className={clsx(
+        "bg-zinc-50 rounded-xl p-3 mb-3 dark:border dark:border-zinc-800",
+        svg === "" ? "hidden" : "block"
+      )}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    ></div>
   );
 };