hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make scripts defered for (potential) load time boost

Browse Source
This commit is contained in:
daudix
2024-09-28 02:41:11 +03:00
parent 42c78c8557
commit 72389f8b6d
4 changed files with 83 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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) ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.2.0...main)
### Added
- Add `defer` attribute to scripts.
### Changed ### Changed
- Restly the heading anchors. - Restly the heading anchors.

50
static/closable.js
View File

@ -1,29 +1,27 @@
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", () => { detail.addEventListener("toggle", () => {
if (detail.open) setTargetDetail(detail); if (detail.open) setTargetDetail(detail);
});
});
function setTargetDetail(targetDetail) {
closable.forEach((detail) => {
if (detail !== targetDetail) {
detail.open = false;
}
});
}
document.addEventListener("click", function (event) {
const isClickInsideDetail = [...closable].some((detail) =>
detail.contains(event.target)
);
if (!isClickInsideDetail) {
closable.forEach((detail) => {
detail.open = false;
});
}
}); });
}); });
function setTargetDetail(targetDetail) {
closable.forEach((detail) => {
if (detail !== targetDetail) {
detail.open = false;
}
});
}
document.addEventListener("click", function (event) {
const isClickInsideDetail = [...closable].some((detail) =>
detail.contains(event.target)
);
if (!isClickInsideDetail) {
closable.forEach((detail) => {
detail.open = false;
});
}
});

110
static/theme-switcher.js
View File

@ -24,73 +24,71 @@
window.defaultTheme = defaultTheme; 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") {
if (theme === "system") { document.documentElement.removeAttribute("data-theme");
document.documentElement.removeAttribute("data-theme"); } else {
} else { document.documentElement.setAttribute("data-theme", theme);
document.documentElement.setAttribute("data-theme", theme);
}
if (saveToLocalStorage) {
localStorage.setItem("theme", theme);
} else {
localStorage.removeItem("theme");
}
// Update icon class based on the selected theme.
updateIconClass(theme);
// Update the active button based on the selected theme.
updateActiveButton(theme);
} }
function resetTheme() { if (saveToLocalStorage) {
// Reset the theme to the default or system preference if no default is set. localStorage.setItem("theme", theme);
setTheme(window.defaultTheme || "system"); } else {
localStorage.removeItem("theme");
} }
function switchTheme(theme) { // Update icon class based on the selected theme.
if (theme === "system") { updateIconClass(theme);
resetTheme();
} else { // Update the active button based on the selected theme.
setTheme(theme, true); updateActiveButton(theme);
} }
function resetTheme() {
// Reset the theme to the default or system preference if no default is set.
setTheme(window.defaultTheme || "system");
}
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"); const iconElement = document.querySelector("#theme-switcher summary .icon");
// Remove any existing theme classes // Remove any existing theme classes
iconElement.classList.remove("light", "dark"); iconElement.classList.remove("light", "dark");
// Add the appropriate class based on the selected theme // Add the appropriate class based on the selected theme
if (theme === "light") { if (theme === "light") {
iconElement.classList.add("light"); iconElement.classList.add("light");
} else if (theme === "dark") { } else if (theme === "dark") {
iconElement.classList.add("dark"); iconElement.classList.add("dark");
}
} }
}
function updateActiveButton(theme) { function updateActiveButton(theme) {
// Remove .active class from all buttons // Remove .active class from all buttons
document.querySelectorAll('#theme-switcher button').forEach(button => { document.querySelectorAll('#theme-switcher button').forEach(button => {
button.classList.remove('active'); button.classList.remove('active');
}); });
// Add .active class to the button corresponding to the current theme // Add .active class to the button corresponding to the current theme
const activeButton = document.querySelector(`#theme-${theme}`); const activeButton = document.querySelector(`#theme-${theme}`);
if (activeButton) { if (activeButton) {
activeButton.classList.add('active'); 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;
});

2
templates/partials/head.html
View File

@ -104,7 +104,7 @@
{%- if scripts | length > 0 %} {%- if scripts | length > 0 %}
{%- for script in scripts %} {%- 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 %} {%- endfor %}
{%- endif %} {%- endif %}