Update css post + Add languages for highlight.min.js + Add mermaid

markdowns/posts/test.md

@@ -66,3 +66,11 @@ FROM rust
 RUN cargo build --release
 CMD ["./target/release/hello_world"]
 ```
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```

markdowns/posts/test_2.md

@@ -66,3 +66,11 @@ FROM rust
 RUN cargo build --release
 CMD ["./target/release/hello_world"]
 ```
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```

src/app/mod.rs

@@ -14,13 +14,24 @@ pub fn App() -> impl IntoView {
         <Stylesheet id="leptos" href="/pkg/portfolio.css"/>
         <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
         <Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"/>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+        <script src="/js/highlight.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
         <Router>
             <Routes>
                 <Route path="" view=pages::Home/>
                 <Route path="posts" view=pages::PostList/>
                 <Route path="posts/:slug" view=|| view! {
-                    <script>hljs.highlightAll();</script>
+                    <script>
+                        r#"
+                            document.onreadystatechange = () => {
+                                if (document.readyState === "complete") {
+                                    hljs.highlightAll();
+                                    mermaid.initialize();
+                                    mermaid.run({ querySelector: ".language-mermaid" });
+                                }
+                            };
+                        "#
+                    </script>
                     <pages::PostElement/>
                 }/>
             </Routes>

style/post.css

@@ -4,27 +4,43 @@
         @apply min-h-screen py-5;
 
         & h1 {
-            @apply font-bold text-3xl;
+            @apply text-5xl;
         }
 
         & h2 {
-            @apply font-bold text-2xl;
+            @apply text-4xl;
         }
 
         & h3 {
-            @apply font-bold text-xl;
+            @apply text-3xl;
         }
 
         & h4 {
-            @apply font-bold text-lg;
+            @apply text-2xl;
         }
 
         & h5 {
-            @apply font-bold text-base;
+            @apply text-xl;
         }
 
         & h6 {
-            @apply font-bold text-sm;
+            @apply text-lg;
+        }
+
+        & h1, & h2, & h3, & h4, & h5, & h6 {
+            @apply my-5 font-bold;
+        }
+
+        & p {
+            @apply text-base my-2;
+        }
+
+        & ul li {
+            @apply list-disc list-inside;
+        }
+
+        & ol li {
+            @apply list-decimal list-inside;
         }
     }