Merge pull request #82 from rupert648/main

feat: mermaid support

content/posts/mermaid.md

@@ -0,0 +1,21 @@
++++
+title = "Mermaid Example"
+date = "2024-12-26"
+
+[taxonomies]
+tags=["example"]
+
+[extra]
+comment = true
++++
+
+{% mermaid() %}
+graph LR
+    A[Start] --> B[Initialize]
+    B --> C[Processing]
+    C --> D[Complete]
+    D --> E[Success]
+
+    style A fill:#f9f,stroke:#333
+    style E fill:#9f9,stroke:#333
+{% end %}

sass/main.scss

@@ -7,6 +7,7 @@
 @import "parts/misc.scss";
 @import "parts/table.scss";
 @import "parts/tags.scss";
+@import "parts/_mermaid";
 
 :root {
   /* Used for: block comment, hr, ... */
@@ -48,4 +49,4 @@ html {
   html {
     font-size: 18px;
   }
-}
+}

sass/parts/_image.scss

@@ -29,7 +29,3 @@ figure h4 {
 figure h4::before {
   content: "↳ ";
 }
-
-svg {
-  max-height: 15px;
-}

sass/parts/_mermaid.scss

@@ -0,0 +1,9 @@
+.mermaid {
+  text-align: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  strong {
+    font-weight: bold;
+  }
+}

static/js/main.js

@@ -0,0 +1,25 @@
+mmdElements = document.getElementsByClassName("mermaid");
+const mmdHTML = [];
+for (let i = 0; i < mmdElements.length; i++) {
+	mmdHTML[i] = mmdElements[i].innerHTML;
+}
+
+function mermaidRender(theme) {
+	if (theme == "dark") {
+		initOptions = {
+			startOnLoad: false,
+			theme: "dark",
+		};
+	} else {
+		initOptions = {
+			startOnLoad: false,
+			theme: "neutral",
+		};
+	}
+	for (let i = 0; i < mmdElements.length; i++) {
+		delete mmdElements[i].dataset.processed;
+		mmdElements[i].innerHTML = mmdHTML[i];
+	}
+	mermaid.initialize(initOptions);
+	mermaid.run();
+}

templates/partials/header.html

@@ -170,4 +170,5 @@
             <link rel="stylesheet" href="{{ get_url(path=stylesheet) }}">
         {% endfor %}
     {% endif %}
+    <script src="{{config.base_url | safe }}js/mermaid.js"></script>
 </head>

templates/shortcodes/mermaid.html

@@ -0,0 +1,3 @@
+<pre class="mermaid">
+  {{ body | safe }}
+</pre>