fix: remove inline script usage (#49)

layouts/partials/foot.html

@@ -1,8 +1,4 @@
 {{ if default true .Site.Params.GeekblogAnchorCopy }}
 <script defer src="{{ index .Site.Data.assets "js/clipboard.min.js" | relURL }}"></script>
-<script>
-    document.addEventListener("DOMContentLoaded", function(event) {
-        var clipboard = new ClipboardJS('.clip');
-    });
-</script>
+<script defer src="{{ index .Site.Data.assets "js/clipboard-loader.min.js" | relURL }}"></script>
 {{ end }}

layouts/shortcodes/mermaid.html

@@ -1,13 +1,7 @@
 {{ if not (.Page.Scratch.Get "mermaid") }}
 <!-- Include mermaid only first time -->
 <script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
-<script>
-    document.addEventListener("DOMContentLoaded", function(event) {
-        mermaid.initialize({
-            flowchart: { useMaxWidth: true }
-        });
-    });
-</script>
+<script defer src="{{ index .Site.Data.assets "js/mermaid-loader.min.js" | relURL }}"></script>
 {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}
 

src/js/clipboard-loader.js

@@ -0,0 +1,3 @@
+document.addEventListener("DOMContentLoaded", function (event) {
+  var clipboard = new ClipboardJS(".clip");
+});

src/js/mermaid-loader.js

@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", function (event) {
+  let primaryColor = "#ececff";
+  let darkMode = false;
+
+  mermaid.initialize({
+    flowchart: { useMaxWidth: true },
+    theme: "base",
+    themeVariables: {
+      darkMode: darkMode,
+      primaryColor: primaryColor,
+    },
+  });
+});