Make scripts defered for (potential) load time boost

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.2.0...main)
 
+### Added
+
+- Add `defer` attribute to scripts.
+
 ### Changed
 
 - Restly the heading anchors.

static/closable.js

@@ -1,21 +1,20 @@
-document.addEventListener("DOMContentLoaded", function () {
+const closable = document.querySelectorAll("details.closable");
-	const closable = document.querySelectorAll("details.closable");
 
-	closable.forEach((detail) => {
+closable.forEach((detail) => {
 	detail.addEventListener("toggle", () => {
 		if (detail.open) setTargetDetail(detail);
 	});
-	});
+});
 
-	function setTargetDetail(targetDetail) {
+function setTargetDetail(targetDetail) {
 	closable.forEach((detail) => {
 		if (detail !== targetDetail) {
 			detail.open = false;
 		}
 	});
-	}
+}
 
-	document.addEventListener("click", function (event) {
+document.addEventListener("click", function (event) {
 	const isClickInsideDetail = [...closable].some((detail) =>
 		detail.contains(event.target)
 	);
@@ -25,5 +24,4 @@ document.addEventListener("DOMContentLoaded", function () {
 			detail.open = false;
 		});
 	}
-	});
 });

static/theme-switcher.js

@@ -24,9 +24,8 @@
 	window.defaultTheme = defaultTheme;
 })();
 
-// Deferred Icon Update and Theme Switching
+// Icon Update and Theme Switching
-document.addEventListener("DOMContentLoaded", function () {
+function setTheme(theme, saveToLocalStorage = false) {
-	function setTheme(theme, saveToLocalStorage = false) {
 	if (theme === "system") {
 		document.documentElement.removeAttribute("data-theme");
 	} else {
@@ -44,22 +43,22 @@ document.addEventListener("DOMContentLoaded", function () {
 
 	// Update the active button based on the selected theme.
 	updateActiveButton(theme);
-	}
+}
 
-	function resetTheme() {
+function resetTheme() {
 	// Reset the theme to the default or system preference if no default is set.
 	setTheme(window.defaultTheme || "system");
-	}
+}
 
-	function switchTheme(theme) {
+function switchTheme(theme) {
 	if (theme === "system") {
 		resetTheme();
 	} else {
 		setTheme(theme, true);
 	}
-	}
+}
 
-	function updateIconClass(theme) {
+function updateIconClass(theme) {
 	const iconElement = document.querySelector("#theme-switcher summary .icon");
 
 	// Remove any existing theme classes
@@ -71,9 +70,9 @@ document.addEventListener("DOMContentLoaded", function () {
 	} else if (theme === "dark") {
 		iconElement.classList.add("dark");
 	}
-	}
+}
 
-	function updateActiveButton(theme) {
+function updateActiveButton(theme) {
 	// Remove .active class from all buttons
 	document.querySelectorAll('#theme-switcher button').forEach(button => {
 		button.classList.remove('active');
@@ -84,13 +83,12 @@ document.addEventListener("DOMContentLoaded", function () {
 	if (activeButton) {
 		activeButton.classList.add('active');
 	}
-	}
+}
 
-	// Update icon class on page load based on current theme
+// Update icon class on page load based on current theme
-	const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
+const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
-	updateIconClass(currentTheme);
+updateIconClass(currentTheme);
-	updateActiveButton(currentTheme);
+updateActiveButton(currentTheme);
 
-	// Make the switchTheme function accessible globally
+// Make the switchTheme function accessible globally
-	window.switchTheme = switchTheme;
+window.switchTheme = switchTheme;
-});

templates/partials/head.html

@@ -104,7 +104,7 @@
 
 	{%- if scripts | length > 0 %}
 		{%- for script in scripts %}
-			<script type="text/javascript" {% if script == "count.js" %}data-goatcounter="https://{{ config.extra.goatcounter.user }}.{{ config.extra.goatcounter.host | default(value='goatcounter.com') }}/count"{% endif %} src="{{ get_url(path=script) | safe }}"></script>
+			<script type="text/javascript" defer {% if script == "count.js" %}data-goatcounter="https://{{ config.extra.goatcounter.user }}.{{ config.extra.goatcounter.host | default(value='goatcounter.com') }}/count"{% endif %} src="{{ get_url(path=script) | safe }}"></script>
 		{%- endfor %}
 	{%- endif %}