feat: added options lazySizes, clipBoard, instantPage, flexSearch, and darkMode

.eslintrc.json

@@ -11,7 +11,8 @@
     "SharedArrayBuffer": "readonly"
   },
   "parserOptions": {
-    "ecmaVersion": 2018
+    "ecmaVersion": 2018,
+    "sourceType": "module"
   },
   "rules": {
     "no-console": 0,

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 */

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);
+});

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');
+
+}

assets/js/instant.page.js

@@ -0,0 +1 @@
+import 'instant.page';

assets/js/lazysizes.js

@@ -0,0 +1 @@
+import 'lazysizes';

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"

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

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" -}}
+{{ $app := resources.Get "js/app.js" -}}
-{{ $clipboard := resources.Get "js/vendor/clipboard/dist/clipboard.min.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 -}}
+  {{ $js := $js | minify | fingerprint "sha512" -}}
-  {{ $app := resources.Get "js/app.js" | minify -}}
+  {{ $index := $index | minify | fingerprint "sha512" -}}
-  {{ $js := slice $lazysizes $clipboard $flexsearch $instantPage $app | resources.Concat "main.js" -}}
+  <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
-  {{ $jsProd := $js | resources.Fingerprint "sha512" -}}
+  {{ if .Site.Params.options.flexSearch -}}
-  {{ $indexProd := $index | resources.Minify | resources.Fingerprint "sha512" -}}
+    <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
-  <script src="{{ $jsProd.Permalink }}" integrity="{{ $jsProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ end -}}
-  <script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
 {{ end -}}

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>