Use page level configuration for mermaid + use local file

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

layouts/_default/baseof.html

@@ -5,9 +5,6 @@
     <!------ ADD COMMON HEADERS -------->
     {{- partial "header.html" . -}}
     {{ template "_internal/opengraph.html" . }}
-    {{ if site.Params.features.mermaid.enabled}}
-      {{ partial "mermaid.html" . }}
-    {{ end }}
 
     <!------ ADD PAGE SPECIFIC HEADERS ------->
     {{ block "header" . }} {{ end }}

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 Math support for this page  ---------------->
+{{ if .Params.mermaid }}
+    {{ partial "mermaid.html" . }}
+{{ end }}
+
 {{ end }}

layouts/partials/mermaid.html

@@ -1,2 +1,6 @@
-<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-<script>mermaid.initialize({startOnLoad:true});</script>
+<script src="{{ "/js/mermaid-8.14.0.min.js" | relURL }}"></script>
+<script>
+    mermaid.initialize({
+        startOnLoad:true
+    });
+</script>

layouts/shortcodes/mermaid.html

@@ -1,2 +1,13 @@
-{{ $_hugo_config := `{ "version": 1 }` }}
-<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">{{ safeHTML .Inner }}</div>
+{{ $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>