From 9d9f2bc46589f017dbfca714380bcc017de5ea49 Mon Sep 17 00:00:00 2001
From: Vladislav <24293461+kusyka911@users.noreply.github.com>
Date: Sun, 21 May 2023 14:56:23 +0300
Subject: [PATCH] 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 | 28 ++++++----
assets/js/main.js | 1 +
assets/js/theme.js | 77 ++++++++++++++++++++++++++
assets/js/themeLoader.js | 38 -------------
assets/js/themeSwitchnMenu.js | 26 ---------
exampleSite/config.toml | 6 ++
layouts/partials/scriptsBodyEnd.html | 36 +++++++++---
layouts/partials/scriptsBodyStart.html | 9 ++-
layouts/partials/webmanifest.html | 2 +-
9 files changed, 137 insertions(+), 86 deletions(-)
create mode 100644 assets/js/main.js
create mode 100644 assets/js/theme.js
delete mode 100644 assets/js/themeLoader.js
delete mode 100644 assets/js/themeSwitchnMenu.js
diff --git a/assets/js/goToTop.js b/assets/js/goToTop.js
index 3dacd2c3..8182ae2e 100644
--- a/assets/js/goToTop.js
+++ b/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";
+ }
+ };
+});
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 00000000..ad9a93a7
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 00000000..630f0d01
--- /dev/null
+++ b/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)
+})();
diff --git a/assets/js/themeLoader.js b/assets/js/themeLoader.js
deleted file mode 100644
index 7d008883..00000000
--- a/assets/js/themeLoader.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const body = document.body;
-const config = body.getAttribute("data-theme");
-
-const getThemeState = () => {
- const lsState = localStorage.getItem("theme");
- if (lsState) return lsState;
-
- let state;
- switch (config) {
- case "dark":
- state = "dark";
- break;
- case "light":
- state = "light";
- break;
- case "auto":
- default:
- state = window.matchMedia("(prefers-color-scheme: dark)").matches
- ? "dark"
- : "light";
- break;
- }
- return state;
-};
-
-const initTheme = (state) => {
- if (state === "dark") {
- document.documentElement.classList.add("dark");
- document.documentElement.classList.remove("light");
- } else if (state === "light") {
- document.documentElement.classList.remove("dark");
- document.documentElement.classList.add("light");
- }
-};
-
-initTheme(getThemeState());
-
-setTimeout(() => body.classList.remove("notransition"), 75);
diff --git a/assets/js/themeSwitchnMenu.js b/assets/js/themeSwitchnMenu.js
deleted file mode 100644
index 4f1b743d..00000000
--- a/assets/js/themeSwitchnMenu.js
+++ /dev/null
@@ -1,26 +0,0 @@
-(() => {
- // Theme switch
- const lamp = document.getElementById("mode");
-
- const toggleTheme = (state) => {
- if (state === "dark") {
- localStorage.setItem("theme", "light");
- initTheme("light");
- } else if (state === "light") {
- localStorage.setItem("theme", "dark");
- initTheme("dark");
- }
- };
-
- lamp.addEventListener("click", () => toggleTheme(getThemeState()));
-
- // Blur the content when the menu is open
- const cbox = document.getElementById("menu-trigger");
-
- cbox.addEventListener("change", function () {
- const area = document.querySelector(".wrapper");
- this.checked
- ? area.classList.add("blurry")
- : area.classList.remove("blurry");
- });
-})();
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 857b5a84..1de49163 100644
--- a/exampleSite/config.toml
+++ b/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
diff --git a/layouts/partials/scriptsBodyEnd.html b/layouts/partials/scriptsBodyEnd.html
index 3e35baee..b8e39e0e 100644
--- a/layouts/partials/scriptsBodyEnd.html
+++ b/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 }}
-
+ {{ $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 }}
+
+
+ {{ if gt (len $custom) 0 }}
+ {{ $custom = $custom | resources.Concat "js/custom.js" | resources.Minify | resources.Fingerprint }}
+
+ {{ end }}
{{ else }}
- {{ $js := $theme | resources.Minify | resources.Fingerprint }}
-
+ {{ $main = $main | resources.Concat "js/main.js" }}
+
+
+ {{ if gt (len $custom) 0 }}
+ {{ $custom = $custom | resources.Concat "js/custom.js" }}
+
+ {{ end }}
{{ end }}
diff --git a/layouts/partials/scriptsBodyStart.html b/layouts/partials/scriptsBodyStart.html
index d0c61193..785457d6 100644
--- a/layouts/partials/scriptsBodyStart.html
+++ b/layouts/partials/scriptsBodyStart.html
@@ -1,2 +1,7 @@
-{{ $script_main := resources.Get "js/themeLoader.js" | minify | fingerprint }}
-
+{{ if hugo.IsProduction }}
+{{ $theme_script := resources.Get "js/theme.js" | minify | fingerprint }}
+
+{{ else }}
+{{ $theme_script := resources.Get "js/theme.js" }}
+
+{{ end}}
diff --git a/layouts/partials/webmanifest.html b/layouts/partials/webmanifest.html
index 507f12f3..70841fdd 100644
--- a/layouts/partials/webmanifest.html
+++ b/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" }}