joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

faster loading with async, less flash of wrong-theme

Browse source
This commit is contained in:
Joshua Seigler 2025-06-19 02:16:44 -04:00
parent b5c0f1e180
commit 8de53a9320
2 changed files with 45 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

80
assets/scripts/effects.js vendored
View file

@ -5,18 +5,13 @@ const defaultPrefs = {
language: "english", language: "english",
theme: "auto", theme: "auto",
}; };
if (umami != null) {
umami.identify({ deviceTheme: darkModeMediaQuery ? "dark" : "light" }); document.querySelector('script[data-website-id]').addEventListener('load', () => {
} try {
Object.entries(defaultPrefs).forEach(([key, defaultPref]) => { umami.identify({ deviceTheme: darkModeMediaQuery ? "dark" : "light" });
const currentPref = localStorage.getItem(key) ?? defaultPref; } catch {}
applyPreference(key, currentPref, false);
document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
input.addEventListener("change", (e) => {
applyPreference(key, e.currentTarget.value, true);
});
});
}); });
function applyPreference(key, value, shouldSave) { function applyPreference(key, value, shouldSave) {
if (umami !== null) { if (umami !== null) {
umami.identify({ umami.identify({
@ -37,6 +32,31 @@ function applyPreference(key, value, shouldSave) {
} }
} }
/** @param {Event} evt */
function removeEffect({ target }) {
const effectsLayer = document.querySelector("#effects");
const effects = Array.from(effectsLayer.children).filter(
(e) => e.__effectParent === target,
);
effects.forEach((e) => {
e.getAnimations().forEach((anim) => {
if (anim.currentTime < 100) {
anim.pause();
effectsLayer.removeChild(e);
return;
}
anim.pause();
anim.updatePlaybackRate(-0.25);
anim.play();
anim.addEventListener("finish", () => {
if (effectsLayer.contains(e)) {
effectsLayer.removeChild(e);
}
});
});
});
}
/** @param {Event} evt */ /** @param {Event} evt */
function addEffect({ target }) { function addEffect({ target }) {
const effectsLayer = document.querySelector("#effects"); const effectsLayer = document.querySelector("#effects");
@ -64,32 +84,20 @@ function addEffect({ target }) {
effectsLayer.appendChild(newEffect); effectsLayer.appendChild(newEffect);
}); });
} }
document.addEventListener("mouseenter", addEffect, true);
document.addEventListener("focus", addEffect, true);
/** @param {Event} evt */ document.addEventListener('DOMContentLoaded', () => {
function removeEffect({ target }) { Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
const effectsLayer = document.querySelector("#effects"); const currentPref = localStorage.getItem(key) ?? defaultPref;
const effects = Array.from(effectsLayer.children).filter( applyPreference(key, currentPref, false);
(e) => e.__effectParent === target, document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
); input.addEventListener("change", (e) => {
effects.forEach((e) => { applyPreference(key, e.currentTarget.value, true);
e.getAnimations().forEach((anim) => {
if (anim.currentTime < 100) {
anim.pause();
effectsLayer.removeChild(e);
return;
}
anim.pause();
anim.updatePlaybackRate(-0.25);
anim.play();
anim.addEventListener("finish", () => {
if (effectsLayer.contains(e)) {
effectsLayer.removeChild(e);
}
}); });
}); });
}); });
} document.addEventListener("mouseenter", addEffect, true);
document.addEventListener("mouseleave", removeEffect, true); document.addEventListener("focus", addEffect, true);
document.addEventListener("blur", removeEffect, true);
document.addEventListener("mouseleave", removeEffect, true);
document.addEventListener("blur", removeEffect, true);
});

2
site/_includes/base.njk
View file

@ -11,7 +11,7 @@ title: Joshua's Homepage
<link rel="stylesheet" href="{{ "/site.css" | url }}"/> <link rel="stylesheet" href="{{ "/site.css" | url }}"/>
<link rel="preload" as="font" href="/fonts/inter/InterVariable.woff2"/> <link rel="preload" as="font" href="/fonts/inter/InterVariable.woff2"/>
<script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script> <script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
<script src="/scripts/effects.js"></script> <script async src="/scripts/effects.js"></script>
<link rel="prefetch" href="/fonts/inter/InterVariable-Italic.woff2"/> <link rel="prefetch" href="/fonts/inter/InterVariable-Italic.woff2"/>
<link rel="prefetch" href="/fonts/ftaurebesh/ftaurebesh-medium.woff2"/> <link rel="prefetch" href="/fonts/ftaurebesh/ftaurebesh-medium.woff2"/>
<link rel="prefetch" href="/fonts/ftaurebesh/ftaurebesh-bold.woff2"/> <link rel="prefetch" href="/fonts/ftaurebesh/ftaurebesh-bold.woff2"/>