refactor: refactor JS (#39)

* fix: refactor js code

(cherry picked from commit 5163fd1532995d81b22bbcc908629b28111a9e71)

* docs: refactor docs regarding addition of scripts

* chore: remove `| fingerprint` in development environment

---------

Co-authored-by: Vladyslav Shurbin <24293461+kusyka911@users.noreply.github.com>
Co-authored-by: Sid <122173059+hugo-sid@users.noreply.github.com>

assets/js/goToTop.js

@@ -1,12 +1,16 @@
-const gttButton = document.getElementById("totop");
-
-window.onscroll = () =>
-{
-  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
-    gttButton.style.visibility = "visible";
-    gttButton.style.opacity = "1";
-  } else {
-    gttButton.style.visibility = "hidden";
-    gttButton.style.opacity = "0";
-  }
-}
+window.addEventListener('load', () => {
+    const gttButton = document.getElementById("totop");
+    if (!gttButton) return;
+    window.onscroll = () => {
+        if (
+            document.body.scrollTop > 300 ||
+            document.documentElement.scrollTop > 300
+        ) {
+            gttButton.style.visibility = "visible";
+            gttButton.style.opacity = "1";
+        } else {
+            gttButton.style.visibility = "hidden";
+            gttButton.style.opacity = "0";
+        }
+    };
+});

assets/js/main.js

@@ -0,0 +1 @@
+'use strict';

assets/js/theme.js

@@ -0,0 +1,77 @@
+(() => {
+    "use strict";
+    const LS_THEME_KEY = "theme";
+    const THEMES = {
+        LIGHT: "light",
+        DARK: "dark",
+        AUTO: "auto",
+    };
+
+    const body = document.body;
+    const config = body.getAttribute("data-theme");
+
+    const getThemeState = () => {
+        const lsState = localStorage.getItem(LS_THEME_KEY);
+        if (lsState) return lsState;
+
+        let state;
+        switch (config) {
+            case THEMES.DARK:
+                state = THEMES.DARK;
+                break;
+            case THEMES.LIGHT:
+                state = THEMES.LIGHT;
+                break;
+            case THEMES.AUTO:
+            default:
+                state = window.matchMedia("(prefers-color-scheme: dark)")
+                    .matches
+                    ? THEMES.DARK
+                    : THEMES.LIGHT;
+                break;
+        }
+        return state;
+    };
+
+    const initTheme = (state) => {
+        if (state === THEMES.DARK) {
+            document.documentElement.classList.add(THEMES.DARK);
+            document.documentElement.classList.remove(THEMES.LIGHT);
+        } else if (state === THEMES.LIGHT) {
+            document.documentElement.classList.remove(THEMES.DARK);
+            document.documentElement.classList.add(THEMES.LIGHT);
+        }
+    };
+
+    // init theme ASAP, then do the rest.
+    initTheme(getThemeState());
+    requestAnimationFrame(() => body.classList.remove("notransition"))
+    setTimeout(() => {
+        const toggleTheme = () => {
+            const state = getThemeState();
+            if (state === THEMES.DARK) {
+                localStorage.setItem(LS_THEME_KEY, THEMES.LIGHT);
+                initTheme(THEMES.LIGHT);
+            } else if (state === THEMES.LIGHT) {
+                localStorage.setItem(LS_THEME_KEY, THEMES.DARK);
+                initTheme(THEMES.DARK);
+            }
+        };
+
+        window.addEventListener("DOMContentLoaded", () => {
+            // Theme switch
+            const lamp = document.getElementById("mode");
+
+            lamp.addEventListener("click", () => toggleTheme());
+
+            // Blur the content when the menu is open
+            const cbox = document.getElementById("menu-trigger");
+
+            cbox.addEventListener("change", function () {
+                const area = document.querySelector(".wrapper");
+                if (this.checked) return area.classList.add("blurry");
+                area.classList.remove("blurry");
+            });
+        });
+    }, 0)
+})();

exampleSite/config.toml

@@ -15,6 +15,7 @@ googleAnalytics = '' # G-MEASUREMENT_ID
 
 # Enable emojis globally
 enableEmoji = true
+ignoreErrors = ["additional-script-loading-error"] # ignore error of loading additional scripts.
 
 # To enable Disqus comments, provide Disqus Shortname below.
 # To disable Disqus comments, simply leave the field empty or remove the next line
@@ -56,6 +57,11 @@ disqusShortname = ''
   mainSections = ['posts']
   toc = true # set to false to disable table of contents 'globally'
   goToTop = true # set to false to disable 'go to top' button
+  additionalScripts = ['js/custom.js', 'js/custom-2.js']
+  # Will try to load 'assets/js/custom.js' and 'assets/js/custom-2.js'.
+  # Your custom scripts will be concatinated to one file `custom.js`.
+  # When building for production it will be minified.
+  # The file `custom.js` is loaded on each page (before body tag ends).
 
 [params.author]
   avatar = "avatar.jpg" # put the file in assets folder; also ensure that image has same height and width

layouts/partials/scriptsBodyEnd.html

@@ -1,11 +1,33 @@
-{{ $theme := resources.Get "js/themeSwitchnMenu.js" }}
+{{ $main := slice (resources.Get "js/main.js") }}
 
 {{ if .Site.Params.goToTop }}
-    {{ $goToTop := resources.Get "js/goToTop.js" }}
-    {{ $js := slice $theme $goToTop | resources.Concat "js/script.js" }}
-    {{ $js := $js | resources.Minify | resources.Fingerprint }}
-    <script src="{{ $js.Permalink }}" {{ if not .Site.IsServer }}integrity="{{ $js.Data.Integrity }}"{{ end }}></script>
+    {{ $main = $main | append (resources.Get "js/goToTop.js") }}
+{{ end }}
+
+{{ $custom := slice }}
+{{ range $script := .Site.Params.additionalScripts }}
+    {{ $script_res := resources.Get $script }}
+    {{ if not $script_res}}
+        {{ erroridf "additional-script-loading-error" "Failed to load script \"%s\"" $script }}
+    {{ else }}
+        {{ $custom = $custom | append (resources.Get .) }}
+    {{ end }}
+{{ end }}
+
+{{ if hugo.IsProduction }}
+    {{ $main = $main | resources.Concat "js/main.js" | resources.Minify | resources.Fingerprint }}
+    <script src="{{  $main.Permalink }}" integrity="{{ $main.Data.Integrity }}"></script>
+
+    {{ if gt (len $custom) 0 }}
+        {{ $custom = $custom | resources.Concat "js/custom.js" | resources.Minify | resources.Fingerprint }}
+        <script src="{{  $custom.Permalink }}" integrity="{{ $custom.Data.Integrity }}"></script>
+    {{ end }}
 {{ else }}
-    {{ $js := $theme | resources.Minify | resources.Fingerprint }}
-    <script src="{{  $js.Permalink }}" {{ if not .Site.IsServer }}integrity="{{ $js.Data.Integrity }}"{{ end }}></script>
+    {{ $main = $main | resources.Concat "js/main.js" }}
+    <script async src="{{  $main.Permalink }}" ></script>
+
+    {{ if gt (len $custom) 0 }}
+        {{ $custom = $custom | resources.Concat "js/custom.js" }}
+        <script async src="{{  $custom.Permalink }}" ></script>
+    {{ end }}
 {{ end }}

layouts/partials/scriptsBodyStart.html

@@ -1,2 +1,7 @@
-{{ $script_main := resources.Get "js/themeLoader.js" | minify | fingerprint }}
-<script src="{{ $script_main.RelPermalink }}"></script>
+{{ if hugo.IsProduction }}
+{{ $theme_script := resources.Get "js/theme.js" | minify | fingerprint }}
+<script src="{{ $theme_script.RelPermalink }}" integrity="{{ $theme_script.Data.Integrity }}"></script>
+{{ else }}
+{{ $theme_script := resources.Get "js/theme.js" }}
+<script src="{{ $theme_script.RelPermalink }}"></script>
+{{ end}}

layouts/partials/webmanifest.html

@@ -1,6 +1,6 @@
 {{ define "partials/hugo-blog-awesome/manifest-background-color" }}
     {{ $bg := ""}}
-    {{ if isset .Site.Params.webmanifest "background_color" }}
+    {{ if .Site.Params.webmanifest.background_color }}
         {{ $bg = .Site.Params.webmanifest.background_color }}
     {{ else if eq .Site.Params.defaultColor "dark" }}
         {{ $bg = "#131418" }}