add mermaid integration

Makefile

@@ -45,6 +45,9 @@ katex:
 	cd ./../../ && \
 	rm -rf ./tmp
 
+mermaid:
+	curl https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js -o ./assets/js/mermaid.min.js
+
 update: submodule goatcounter instantpage katex
 
 debug-make-posts:

assets/css/mermaid/mermaid_tweak.css

@@ -0,0 +1,7 @@
+.language-mermaid + button {
+    display: none !important;
+}
+
+.language-mermaid, .mermaid {
+    text-align: center;
+}

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

@@ -0,0 +1,9 @@
+
+
+{{- $result := transform.HighlightCodeBlock . -}}
+
+<div>
+    {{- $result.Wrapped | safeHTML -}}
+</div>
+
+{{- .Page.Store.Set "hasMermaid" true -}}

layouts/partials/extend_head.html

@@ -1,7 +1,5 @@
 {{- partialCached "head/goatcounter.html" . -}}
 
-{{- partial "head/katex.html" . -}}
-
 {{- partial "head/seo.html" . -}}
 
 {{/* {{- partialCached "head/anti_adblock.html" . -}} */}}
@@ -17,3 +15,11 @@
 {{- partial "head/css/spoiler_css.html" . -}}
 
 {{- partial "head/css/color_css.html" . -}}
+
+{{- partial "head/css/mermaid_css.html" . -}}
+
+{{/* libraries */}}
+
+{{- partial "head/katex.html" . -}}
+
+{{- partial "head/mermaid.html" . -}}

layouts/partials/head/css/mermaid_css.html

@@ -0,0 +1,9 @@
+{{/*  mermaid form css  */}}
+
+{{- if or (.Page.Store.Get "hasMermaid") (.HasShortcode "mermaid") -}}
+    <style>
+        {{- with resources.Get "css/mermaid/mermaid_tweak.css" | toCSS | minify -}}
+            {{- .Content | safeCSS -}}
+        {{- end -}}
+    </style>
+{{- end -}}

layouts/partials/head/mermaid.html

@@ -0,0 +1,29 @@
+{{- if or (.Page.Store.Get "hasMermaid") (.HasShortcode "mermaid") -}}
+
+    {{- $mermaid_license_body     := "/*\nSPDX-License-Identifier: MIT\nLicensed under the MIT license.\nhttps://github.com/mermaid-js/mermaid/blob/develop/LICENSE\nhttps://opensource.org/license/mit/\n*/\n" -}}
+    {{- $mermaid_license_js       := $mermaid_license_body | resources.FromString "js/mermaid_license.js" -}}
+
+    {{- with (slice $mermaid_license_js (resources.Get "js/mermaid.min.js")) | resources.Concat "assets/js/mermaid.min.js" | fingerprint -}}
+        <script
+            defer
+            crossorigin="anonymous"
+            type="module"
+            src="{{- .RelPermalink -}}"
+            integrity="{{- .Data.Integrity -}}"
+        ></script>
+    {{- end -}}
+
+    <script>
+        document.addEventListener("DOMContentLoaded", async function() {
+            mermaid.initialize({ startOnLoad: false })
+            await mermaid.run({
+                querySelector: ".language-mermaid, .mermaid",
+                suppressErrors: true,
+            });
+            document.querySelectorAll(".language-mermaid").forEach(function(e) {
+                e.style.cssText += "background: none !important;"
+            })
+        })
+    </script>
+
+{{- end -}}

layouts/shortcodes/katex.html

@@ -1,7 +1,7 @@
 {{- if eq (.Get 0) "display" -}}
-    <p class="katex_sc" data-katex="\displaystyle {{ trim .Inner "\n\r" -}}">{{- trim .Inner "\n\r" -}}</p>
+    <p class="katex_sc" data-katex="\displaystyle {{ trim .Inner "\n\r" | safeHTMLAttr -}}">{{- trim .Inner "\n\r" | safeHTML -}}</p>
 {{- else if eq (.Get 0) "inline" -}}
-    <span class="katex_sc" data-katex="{{- trim .Inner "\n\r" -}}">{{- trim .Inner "\n\r" -}}</span>
+    <span class="katex_sc" data-katex="{{- trim .Inner "\n\r" | safeHTMLAttr -}}">{{- trim .Inner "\n\r" | safeHTML -}}</span>
 {{- else -}}
-    <p class="katex_sc" data-katex="\displaystyle {{ trim .Inner "\n\r" -}}">{{- trim .Inner "\n\r" -}}</p>
+    <p class="katex_sc" data-katex="\displaystyle {{ trim .Inner "\n\r" | safeHTMLAttr -}}">{{- trim .Inner "\n\r" | safeHTML -}}</p>
 {{- end -}}

layouts/shortcodes/mermaid.html

@@ -0,0 +1,3 @@
+<p class="mermaid">
+    {{ .Inner | safeHTML }}
+</p>