From 649e3cf75291623534ed462db59d8855fc0107cb Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Fri, 21 May 2021 11:33:17 +0200
Subject: [PATCH] fix: remove inline script usage (#133)

---
 gulpfile.js                     |  4 ++--
 layouts/partials/foot.html      |  6 +-----
 layouts/shortcodes/mermaid.html | 25 +------------------------
 src/js/clipboard-loader.js      |  3 +++
 src/js/mermaid-loader.js        | 25 +++++++++++++++++++++++++
 5 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 src/js/clipboard-loader.js
 create mode 100644 src/js/mermaid-loader.js

diff --git a/gulpfile.js b/gulpfile.js
index 59e84ca..1db6624 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -213,10 +213,10 @@ gulp.task("iconfont", function () {
 gulp.task("js", function () {
   return gulp
     .src(["src/js/*.js"])
-    .pipe(sourcemaps.init())
+    .pipe(devBuild ? sourcemaps.init() : noop())
     .pipe(uglify())
     .pipe(rename({ extname: ".min.js" }))
-    .pipe(sourcemaps.write("."))
+    .pipe(devBuild ? sourcemaps.write(".") : noop())
     .pipe(gulp.dest(JS_BUILD));
 });
 
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
index bbb9e3f..2a8def8 100644
--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@@ -8,9 +8,5 @@
 
 {{ if default true .Site.Params.GeekdocAnchorCopy }}
 <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 }}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index 4ef9597..e37137f 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,30 +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) {
-        let currentMode = localStorage.getItem(THEME);
-        let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        let primaryColor = "#ececff";
-        let darkMode = false;
-
-        console.log(currentMode)
-
-        if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) {
-            primaryColor = "#6C617E";
-            darkMode = true;
-        }
-
-        mermaid.initialize({
-            flowchart: { useMaxWidth: true },
-            theme: "base",
-            themeVariables: {
-                darkMode: darkMode,
-                primaryColor: primaryColor,
-            },
-        });
-    });
-</script>
+<script defer src="{{ index .Site.Data.assets "js/mermaid-loader.min.js" | relURL }}"></script>
 {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}
 
diff --git a/src/js/clipboard-loader.js b/src/js/clipboard-loader.js
new file mode 100644
index 0000000..9fa843b
--- /dev/null
+++ b/src/js/clipboard-loader.js
@@ -0,0 +1,3 @@
+document.addEventListener("DOMContentLoaded", function (event) {
+  var clipboard = new ClipboardJS(".clip");
+});
diff --git a/src/js/mermaid-loader.js b/src/js/mermaid-loader.js
new file mode 100644
index 0000000..ee00577
--- /dev/null
+++ b/src/js/mermaid-loader.js
@@ -0,0 +1,25 @@
+document.addEventListener("DOMContentLoaded", function (event) {
+  let currentMode = localStorage.getItem(THEME);
+  let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  let primaryColor = "#ececff";
+  let darkMode = false;
+
+  console.log(currentMode);
+
+  if (
+    currentMode === DARK_MODE ||
+    (currentMode === AUTO_MODE && darkModeQuery.matches)
+  ) {
+    primaryColor = "#6C617E";
+    darkMode = true;
+  }
+
+  mermaid.initialize({
+    flowchart: { useMaxWidth: true },
+    theme: "base",
+    themeVariables: {
+      darkMode: darkMode,
+      primaryColor: primaryColor,
+    },
+  });
+});