feat: added mermaid support for displaying diagrams (#359)

* add mermaid support for making diagrams

Co-authored-by: Jeffrey Forman <jforman@gmail.com>
Co-authored-by: Alexander Bilz <mail@alexbilz.com>

README.md

@@ -30,6 +30,7 @@ Anatole's aims to be minimalistic and sleek but still brings some great function
 - Custom JavaScript and CSS (optional)
 - Compliant to strict CSP
 - Post Series
+- Mermaid diagram support (optional)
 
 ## Preview the Example Site
 

exampleSite/config/_default/params.toml

@@ -73,3 +73,6 @@ url = "https://www.instagram.com/"
 icon = "fas fa-envelope"
 title = "e-mail"
 url = "mailto:mail@example.com"
+
+[mermaid]
+# enable = true

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

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

layouts/_default/single.html

@@ -67,6 +67,12 @@
         {{- partial "contact.html" . -}}
 
 
+      {{- end -}}
+
+      {{- if (eq .Site.Params.mermaid.enable true) -}}
+        {{- partial "mermaid.html" . -}}
+
+
       {{- end -}}
     </div>
     <div class="post__footer">

layouts/partials/mermaid.html

@@ -0,0 +1,7 @@
+{{ if .Page.Store.Get "hasMermaid" }}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+
+{{ end }}