From 226f661966ebb68f595541b31e6605d1c71efbdd Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Mon, 1 Mar 2021 16:34:43 +0100
Subject: [PATCH] feat: added options lazySizes, clipBoard, instantPage,
 flexSearch, and darkMode

---
 .eslintrc.json                             |  3 +-
 assets/js/app.js                           | 31 ------------
 assets/js/clipboard.js                     | 18 +++++++
 assets/js/darkmode.js                      | 12 +++++
 assets/js/instant.page.js                  |  1 +
 assets/js/lazysizes.js                     |  1 +
 config/_default/config.toml                | 12 -----
 config/_default/params.toml                |  7 +++
 layouts/partials/footer/script-footer.html | 58 +++++++++++++++++-----
 layouts/partials/header/header.html        |  4 ++
 10 files changed, 90 insertions(+), 57 deletions(-)
 create mode 100644 assets/js/clipboard.js
 create mode 100644 assets/js/darkmode.js
 create mode 100644 assets/js/instant.page.js
 create mode 100644 assets/js/lazysizes.js

diff --git a/.eslintrc.json b/.eslintrc.json
index 76ff225..c926994 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,7 +11,8 @@
     "SharedArrayBuffer": "readonly"
   },
   "parserOptions": {
-    "ecmaVersion": 2018
+    "ecmaVersion": 2018,
+    "sourceType": "module"
   },
   "rules": {
     "no-console": 0,
diff --git a/assets/js/app.js b/assets/js/app.js
index fa64c92..e69de29 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,31 +0,0 @@
-document.getElementById('mode').addEventListener('click', () => {
-
-  document.body.classList.toggle('dark');
-  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
-
-});
-
-if (localStorage.getItem('theme') === 'dark') {
-
-  document.body.classList.add('dark');
-
-}
-
-/* eslint-disable */
-var clipboard = new ClipboardJS('.btn-clipboard');
-
-clipboard.on('success', function(e) {
-    /*
-    console.info('Action:', e.action);
-    console.info('Text:', e.text);
-    console.info('Trigger:', e.trigger);
-    */
-
-    e.clearSelection();
-});
-
-clipboard.on('error', function(e) {
-    console.error('Action:', e.action);
-    console.error('Trigger:', e.trigger);
-});
-/* eslint-enable */
diff --git a/assets/js/clipboard.js b/assets/js/clipboard.js
new file mode 100644
index 0000000..b216c12
--- /dev/null
+++ b/assets/js/clipboard.js
@@ -0,0 +1,18 @@
+import Clipboard from 'clipboard';
+
+var clipboard = new Clipboard('.btn-clipboard');
+
+clipboard.on('success', function(e) {
+    /*
+    console.info('Action:', e.action);
+    console.info('Text:', e.text);
+    console.info('Trigger:', e.trigger);
+    */
+
+    e.clearSelection();
+});
+
+clipboard.on('error', function(e) {
+    console.error('Action:', e.action);
+    console.error('Trigger:', e.trigger);
+});
diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 0000000..4d8bcce
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,12 @@
+document.getElementById('mode').addEventListener('click', () => {
+
+  document.body.classList.toggle('dark');
+  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+
+});
+
+if (localStorage.getItem('theme') === 'dark') {
+
+  document.body.classList.add('dark');
+
+}
diff --git a/assets/js/instant.page.js b/assets/js/instant.page.js
new file mode 100644
index 0000000..b394bcc
--- /dev/null
+++ b/assets/js/instant.page.js
@@ -0,0 +1 @@
+import 'instant.page';
diff --git a/assets/js/lazysizes.js b/assets/js/lazysizes.js
new file mode 100644
index 0000000..c12ed58
--- /dev/null
+++ b/assets/js/lazysizes.js
@@ -0,0 +1 @@
+import 'lazysizes';
diff --git a/config/_default/config.toml b/config/_default/config.toml
index 26bc675..2c5f94a 100644
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@@ -76,18 +76,6 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "static"
     target = "static"
-  [[module.mounts]]
-    source = "node_modules/lazysizes"
-    target = "assets/js/vendor/lazysizes"
-  [[module.mounts]]
-    source = "node_modules/instant.page"
-    target = "assets/js/vendor/instant.page"
-  [[module.mounts]]
-    source = "node_modules/lazysizes"
-    target = "assets/js/vendor/lazysizes"
   [[module.mounts]]
     source = "node_modules/flexsearch"
     target = "assets/js/vendor/flexsearch"
-  [[module.mounts]]
-    source = "node_modules/clipboard"
-    target = "assets/js/vendor/clipboard"
diff --git a/config/_default/params.toml b/config/_default/params.toml
index 4e039e1..40ebcdb 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -45,3 +45,10 @@ alertText = "Like Doks? <a class=\"alert-link\" href=\"https://github.com/h-enk/
 # Edit Page
 docsRepo = "https://github.com/h-enk/doks"
 editPage = false
+
+[options]
+  lazySizes = true
+  clipBoard = true
+  instantPage = true
+  flexSearch = true
+  darkMode = true
diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html
index 3ac55a5..715fe47 100644
--- a/layouts/partials/footer/script-footer.html
+++ b/layouts/partials/footer/script-footer.html
@@ -1,19 +1,51 @@
 {{ $indexTemplate := resources.Get "js/index.js" -}}
 {{ $index := $indexTemplate | resources.ExecuteAsTemplate "index.js" . -}}
-{{ $lazysizes := resources.Get "js/vendor/lazysizes/lazysizes.min.js" -}}
-{{ $flexsearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.min.js" -}}
-{{ $clipboard := resources.Get "js/vendor/clipboard/dist/clipboard.min.js" -}}
+
+{{ $app := resources.Get "js/app.js" -}}
+
+{{ $slice := slice $app -}}
+
+{{ if .Site.Params.options.lazySizes -}}
+  {{ $lazySizes := resources.Get "js/lazySizes.js" -}}
+  {{ $lazySizes := $lazySizes | js.Build -}}
+  {{ $slice = $slice | append $lazySizes -}}
+{{ end -}}
+
+{{ if .Site.Params.options.clipBoard -}}
+  {{ $clipBoard := resources.Get "js/clipBoard.js" -}}
+  {{ $clipBoard := $clipBoard | js.Build -}}
+  {{ $slice = $slice | append $clipBoard -}}
+{{ end -}}
+
+{{ if .Site.Params.options.instantPage -}}
+  {{ $instantPage := resources.Get "js/instant.page.js" -}}
+  {{ $instantPage := $instantPage | js.Build -}}
+  {{ $slice = $slice | append $instantPage -}}
+{{ end -}}
+
+{{ if .Site.Params.options.flexSearch -}}
+  {{ $flexSearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.min.js" -}}
+  {{ $slice = $slice | append $flexSearch -}}
+{{ end -}}
+
+{{ if .Site.Params.options.darkMode -}}
+  {{ $darkMode := resources.Get "js/darkmode.js" -}}
+  {{ $darkMode := $darkMode | js.Build -}}
+  {{ $slice = $slice | append $darkMode -}}
+{{ end -}}
+
+{{ $js := $slice | resources.Concat "main.js" -}}
+
 {{ if eq (hugo.Environment) "development" -}}
-  {{ $app := resources.Get "js/app.js" -}}
-  {{ $js := slice $lazysizes $clipboard $flexsearch $app | resources.Concat "main.js" -}}
   <script src="{{ $js.Permalink }}" defer></script>
-  <script src="{{ $index.Permalink }}" defer></script>
+  {{ if .Site.Params.options.flexSearch -}}
+    <script src="{{ $index.Permalink }}" defer></script>
+  {{ end -}}
 {{ else -}}
-  {{ $instantPage := resources.Get "js/vendor/instant.page/instantpage.js" | minify -}}
-  {{ $app := resources.Get "js/app.js" | minify -}}
-  {{ $js := slice $lazysizes $clipboard $flexsearch $instantPage $app | resources.Concat "main.js" -}}
-  {{ $jsProd := $js | resources.Fingerprint "sha512" -}}
-  {{ $indexProd := $index | resources.Minify | resources.Fingerprint "sha512" -}}
-  <script src="{{ $jsProd.Permalink }}" integrity="{{ $jsProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
-  <script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ $js := $js | minify | fingerprint "sha512" -}}
+  {{ $index := $index | minify | fingerprint "sha512" -}}
+  <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ if .Site.Params.options.flexSearch -}}
+    <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ end -}}
 {{ end -}}
\ No newline at end of file
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
index 71872d1..9cbc5a9 100644
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@@ -4,10 +4,12 @@
     <input class="menu-btn order-0" type="checkbox" id="menu-btn">
     <label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
     <a class="navbar-brand order-1 order-md-0 mr-auto" href="{{ .Site.BaseURL | absURL }}">{{ .Site.Params.Title }}</a>
+    {{ if .Site.Params.options.darkMode -}}
     <button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode">
       <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
       <span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
     </button>
+    {{ end -}}
     <ul class="navbar-nav social-nav order-3 order-md-5">
       {{ range .Site.Menus.social -}}
         <li class="nav-item">
@@ -30,10 +32,12 @@
         {{ end -}}
       </ul>
       <div class="break order-6 d-md-none"></div>
+      {{ if .Site.Params.options.flexSearch -}}
       <form class="navbar-form flex-grow-1 order-7 order-md-3">
         <input id="userinput" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
         <div id="suggestions" class="shadow bg-white rounded"></div>
       </form>
+      {{ end -}}
     </div>
   </div>
 </header>
\ No newline at end of file