diff options
| author | triethyl <triethylammonium@pm.me> | 2025-10-13 12:00:03 -0400 |
|---|---|---|
| committer | triethyl <triethylammonium@pm.me> | 2025-10-13 12:00:03 -0400 |
| commit | 2496db965db4fa48197cb31c7750b2a16523ed32 (patch) | |
| tree | ce174f1f94426c8727a31680e0c8e415e998ba66 /site/themes/hugo-starter/static/js | |
| parent | b2393801585b7e152ffbffb3226f720e66454ea6 (diff) | |
renamed theme and added content
Diffstat (limited to 'site/themes/hugo-starter/static/js')
| -rw-r--r-- | site/themes/hugo-starter/static/js/background.js | 82 | ||||
| -rw-r--r-- | site/themes/hugo-starter/static/js/switch-theme.js | 88 |
2 files changed, 0 insertions, 170 deletions
diff --git a/site/themes/hugo-starter/static/js/background.js b/site/themes/hugo-starter/static/js/background.js deleted file mode 100644 index e9b61a2..0000000 --- a/site/themes/hugo-starter/static/js/background.js +++ /dev/null @@ -1,82 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const canvas = document.getElementById("background"); - if (!canvas) return; - const ctx = canvas.getContext("2d"); - - // Grab config from the embedded <script> - const configEl = document.getElementById("background-config"); - const config = configEl ? JSON.parse(configEl.textContent) : {}; - - // Use config values with defaults as fallback - const spacing = config.spacing ?? 24; - const maxRadius = config.maxRadius ?? 8; - const baseOffset = config.baseOffset ?? 120; - const freq = config.freq ?? 0.008; - const speed = config.speed ?? 0.02; - - const baseAmp = config.baseAmp ?? 100; - const env1Freq = config.envelope1Freq ?? 0.002; - const env1Amp = config.envelope1Amp ?? 120; - const env2Freq = config.envelope2Freq ?? 0.0005; - const env2Amp = config.envelope2Amp ?? 200; - - let t = parseFloat(localStorage.getItem("waveProgress")) || 0; - let widthCss = window.innerWidth; - let heightCss = window.innerHeight; - let pixelRatio = window.devicePixelRatio || 1; - - function resize() { - widthCss = window.innerWidth; - heightCss = window.innerHeight; - pixelRatio = window.devicePixelRatio || 1; - - canvas.width = Math.floor(widthCss * pixelRatio); - canvas.height = Math.floor(heightCss * pixelRatio); - canvas.style.width = widthCss + "px"; - canvas.style.height = heightCss + "px"; - ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); - } - window.addEventListener("resize", resize); - resize(); - - function draw() { - const styles = getComputedStyle(document.documentElement); - const fg = styles.getPropertyValue("--fg").trim(); - - ctx.clearRect(0, 0, widthCss, heightCss); - ctx.fillStyle = fg; - - for (let x = 0; x <= widthCss + spacing; x += spacing) { - // envelope: controls crest variance - const envelope = - baseAmp - + Math.sin(x * env1Freq + t * 0.1) * env1Amp - + Math.sin(x * env2Freq + t * 0.05) * env2Amp; - - const waveY = heightCss - (Math.sin(x * freq + t) * envelope + baseOffset); - // const waveY = Math.max(heightCss - 50, heightCss - (Math.sin(x * freq + t) * envelope + baseOffset)); - - for (let y = heightCss; y >= 0; y -= spacing) { - const dist = Math.max(0, y - waveY); - const radius = Math.min(maxRadius, dist / 40); - if (radius > 0.2) { - ctx.beginPath(); - // ctx.arc(x + spacing / 2, y - spacing / 2, radius, 0, Math.PI * 2); - ctx.fillRect( - x + spacing / 2 - radius, - y - spacing / 2 - radius, - radius * 2, - radius * 2 - ); - ctx.fill(); - } - } - } - - t += speed; - localStorage.setItem("waveProgress", t); - requestAnimationFrame(draw); - } - - draw(); -}); diff --git a/site/themes/hugo-starter/static/js/switch-theme.js b/site/themes/hugo-starter/static/js/switch-theme.js deleted file mode 100644 index 5052f39..0000000 --- a/site/themes/hugo-starter/static/js/switch-theme.js +++ /dev/null @@ -1,88 +0,0 @@ -// const root = document.documentElement; // <html>, not <body> -// const btn = document.getElementById("toggleTheme"); -// -// const savedTheme = localStorage.getItem("theme") || "light"; -// root.className = savedTheme; -// btn.innerHTML = savedTheme === "dark" ? "✧" : "☾"; -// -// btn.addEventListener("click", () => { -// const newTheme = root.classList.contains("light") ? "dark" : "light"; -// root.className = newTheme; -// localStorage.setItem("theme", newTheme); -// btn.innerHTML = newTheme === "dark" ? "✧" : "☾"; -// }); - -/** -* Utility function to calculate the current theme setting. -* Look for a local storage value. -* Fall back to system setting. -* Fall back to light mode. -*/ -function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { - if (localStorageTheme !== null) { - return localStorageTheme; - } - - if (systemSettingDark.matches) { - return "dark"; - } - - return "light"; -} - -/** -* Utility function to update the button text and aria-label. -*/ -function updateButton({ buttonEl, isDark }) { - const newCta = isDark ? "Change to light theme" : "Change to dark theme"; - - const newInnerText = isDark ? "✧" : "☾"; - // use an aria-label if you are omitting text on the button - // and using a sun/moon icon, for example - buttonEl.setAttribute("aria-label", newCta); - buttonEl.innerText = newInnerText; -} - -/** -* Utility function to update the theme setting on the html tag -*/ -function updateThemeOnHtmlEl({ theme }) { - document.querySelector("html").setAttribute("data-theme", theme); -} - - -/** -* On page load: -*/ - -/** -* 1. Grab what we need from the DOM and system settings on page load -*/ -const button = document.querySelector("[data-theme-toggle]"); -const localStorageTheme = localStorage.getItem("theme"); -const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); - -/** -* 2. Work out the current site settings -*/ -let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); - -/** -* 3. Update the theme setting and button text accoridng to current settings -*/ -updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" }); -updateThemeOnHtmlEl({ theme: currentThemeSetting }); - -/** -* 4. Add an event listener to toggle the theme -*/ -button.addEventListener("click", (event) => { - const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; - - localStorage.setItem("theme", newTheme); - updateButton({ buttonEl: button, isDark: newTheme === "dark" }); - updateThemeOnHtmlEl({ theme: newTheme }); - - currentThemeSetting = newTheme; -}); - |
