Add optional mermaid shortcode (#551)

* add optional mermaid shotcode

* Use page level configuration for mermaid + use local file

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix comment

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
Co-authored-by: Emruz Hossain <emruz@appscode.com>

layouts/_default/single.html

@@ -210,7 +210,15 @@
 <script>
   hljs.initHighlightingOnLoad();
 </script>
+
+<!-------------- Enable Math support for this page  ---------------->
 {{ if .Params.math }}
     {{ partial "math.html" . }}
 {{ end }}
+
+<!-------------- Enable mermaid support for this page  ---------------->
+{{ if .Params.mermaid }}
+    {{ partial "mermaid.html" . }}
+{{ end }}
+
 {{ end }}

layouts/partials/mermaid.html

@@ -0,0 +1,6 @@
+<script src="{{ "/js/mermaid-8.14.0.min.js" | relURL }}"></script>
+<script>
+    mermaid.initialize({
+        startOnLoad:true
+    });
+</script>

layouts/shortcodes/mermaid.html

@@ -0,0 +1,13 @@
+{{ $alignment:= .Get "align"}}
+{{ if not $alignment }}
+    {{ $alignment = "center"}}
+{{ end }}
+
+{{ $background:= .Get "background" }}
+{{ if not $background }}
+    {{ $background = "none"}}
+{{ end }}
+
+<div class="mermaid" align="{{ $alignment }}" style="background-color: {{ $background }}; border-radius: 5px;">
+    {{ safeHTML .Inner }}
+</div>