feat: mermaid support

README.md

@@ -24,6 +24,7 @@ As well as some additional **features**:
 - Added `inlineimg` shortcode to render images (e.g. SVGs) in-line
 - Added support for `![](image title="title")` syntax for image titles
 - Random, somewhat humorous messages at the end of each post
+- Added support for [mermaid](https://mermaid.js.org/) diagrams (*loads via CDN by default, can be set via `mermaidCDN`*)
 
 And some **bugfixes**:
 - Modified the CSS to
@@ -86,7 +87,7 @@ cd into your hugo site's root directory and:
 
 ```sh
 cd themes
-git submodule add https://github.com/chollinger93/ink-free 
+git submodule add https://github.com/chollinger93/ink-free
 ```
 
 For more information read the [official setup guide](https://gohugo.io/overview/installing/) of Hugo.

exampleSite/config.toml

@@ -18,6 +18,7 @@ copyright = "© Copyright notice"
 	#avatar = "https://image.freepik.com/free-vector/young-man-head-with-beard-avatar-character_24877-36786.jpg"
 
 	featherIconsCDN = false
+	mermaidCDN = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs"
 
 	# Site color - dark/light/auto
 	mode = "auto"
@@ -36,7 +37,7 @@ copyright = "© Copyright notice"
 	wpm = 250
 
 	# Stupid footers :)
-	footers = [ 
+	footers = [
 		"What Tiger King can teach us about x86 Assembly",
 		"10 Reasons why gcc SHOULD be re-written in JavaScript - You won't believe #8!"
 	]
@@ -104,4 +105,4 @@ url = "/index.xml"
   [markup.tableOfContents]
     endLevel = 3
     ordered = true
-    startLevel = 2 
+    startLevel = 2

exampleSite/content/posts/post-6.md

@@ -29,6 +29,18 @@ tags: [markdown]
 
 {{< vimeo id="146022717" >}}
 
-## Instagram
-
-
+## Mermaid
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<pre class="mermaid">
+    {{- .Inner | htmlEscape | safeHTML }}
+  </pre>
+{{ .Page.Store.Set "hasMermaid" true }}

layouts/partials/footer.html

@@ -8,3 +8,39 @@
 {{- with .Site.Params.Social -}}
 <script>feather.replace()</script>
 {{- end -}}
+
+{{ if .Store.Get "hasMermaid" }}
+{{ $jsUrl:= default "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs" .Site.Params.mermaidCDN }}
+<script type="module">
+	import mermaid from {{ $jsUrl }};
+
+	const getMermaidTheme = () => {
+		const savedScheme = localStorage.getItem('scheme');
+		if (savedScheme) {
+			return savedScheme === 'dark' ? 'dark' : 'default';
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+	};
+
+	mermaid.initialize({
+		startOnLoad: true,
+		theme: getMermaidTheme()
+	});
+
+	const applyTheme = () => {
+		const newTheme = getMermaidTheme();
+		mermaid.initialize({
+			startOnLoad: true,
+			theme: newTheme
+		});
+	};
+
+	window.addEventListener('storage', (event) => {
+		if (event.key === 'scheme') {
+			applyTheme();
+		}
+	});
+
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
+</script>
+{{ end }}