From 36554b5b7b134511ba87374518b1b444d3dcc6eb Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Wed, 11 Jun 2025 16:50:47 -0400 Subject: [PATCH 1/4] improve effects, start adding search --- assets/scripts/animations.js | 123 ++++++++++++++++++----------------- eleventy.config.js | 5 ++ package-lock.json | 90 +++++++++++++++++++++++++ package.json | 3 + site/_includes/-header.njk | 2 + site/_includes/-search.njk | 4 ++ site/_includes/base.njk | 2 +- site/_includes/css/site.css | 23 ++++--- 8 files changed, 184 insertions(+), 68 deletions(-) create mode 100644 site/_includes/-search.njk diff --git a/assets/scripts/animations.js b/assets/scripts/animations.js index 678b454..b26944a 100644 --- a/assets/scripts/animations.js +++ b/assets/scripts/animations.js @@ -1,62 +1,67 @@ -'use strict' +"use strict"; -const body = document.documentElement || document.body; -function setScrollAmount() { - body.style.setProperty("--scrollLengthPx", body.scrollTop); -} -setScrollAmount(); -document.addEventListener("scroll", setScrollAmount); -document.addEventListener("resize", setScrollAmount); -function rippleListener(el) { - return(evt) => { - const rects = Array.from(evt.target.getClientRects()); - Array.from(evt.target.children).forEach(child => { - rects.push(...Array.from(child.getClientRects())); - }); - rects.forEach(rect => { - const {top, left, width, height} = rect; - const effects = body.querySelector("#effects"); - const newEffect = document.createElement("div"); - newEffect.classList.add("effect-instance"); - const padding = '10rem'; - newEffect.style.top = `calc(${ - top + window.scrollY - }px - ${padding})`; - newEffect.style.left = `calc(${ - left + window.scrollX - }px - ${padding})`; - newEffect.style.width = `calc(${ - width - }px + 2 * ${padding})`; - newEffect.style.height = `calc(${ - height - }px + 2 * ${padding})`; - effects.appendChild(newEffect); - const reverser = () => { - newEffect.getAnimations().forEach(anim => { - if (anim.currentTime < 100) { - anim.pause(); - effects.removeChild(newEffect); - return; - } - anim.pause(); - anim.updatePlaybackRate(0.25); - anim.reverse(); - anim.addEventListener('finish', () => { - if (effects.contains(newEffect)) { - effects.removeChild(newEffect); - } - }); - }); - }; - el.addEventListener('mouseleave', reverser); - el.addEventListener('blur', reverser); - }); +// function setScrollAmount() { +// (document.documentElement || document.body).style.setProperty("--scrollLengthPx", body.scrollTop); +// } +// setScrollAmount(); +// document.addEventListener("scroll", setScrollAmount); +// document.addEventListener("resize", setScrollAmount); + +/** @param {Event} evt */ +function addEffect({ target }) { + const effectsLayer = document.querySelector("#effects"); + if ( + target == null || + !target["matches"] || + !target.matches( + "a[href],.nav-toggle-button,button,input,label:not(:has(input))", + ) + ) { + return; } + const rects = Array.from(target.getClientRects()); + Array.from(target.children).forEach((child) => { + rects.push(...Array.from(child.getClientRects())); + }); + rects.forEach((rect) => { + const { top, left, width, height } = rect; + const newEffect = document.createElement("div"); + newEffect.__effectParent = target; + newEffect.classList.add("effect-instance"); + const padding = "10rem"; + newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`; + newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`; + newEffect.style.width = `calc(${width}px + 2 * ${padding})`; + newEffect.style.height = `calc(${height}px + 2 * ${padding})`; + effectsLayer.appendChild(newEffect); + }); } -Array.from( - document.querySelectorAll('a[href],.nav-toggle-button,button,input') -).forEach(el => { - el.addEventListener('mouseenter', rippleListener(el)); - el.addEventListener('focus', rippleListener(el)); -}); +document.addEventListener("mouseenter", addEffect, true); +document.addEventListener("focus", addEffect, true); + +/** @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); + } + }); + }); + }) +}; +document.addEventListener('mouseleave', removeEffect, true); +document.addEventListener('blur', removeEffect, true); diff --git a/eleventy.config.js b/eleventy.config.js index 2e93222..8552a94 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -11,6 +11,7 @@ import utc from "dayjs/plugin/utc.js"; import clean from "eleventy-plugin-clean"; import site from "./site/_data/site.js"; import { feedPlugin } from "@11ty/eleventy-plugin-rss"; +import { execSync } from 'child_process'; dayjs.extend(utc); @@ -133,6 +134,10 @@ export default (config) => { stylesheet: "/simple-atom.xslt", }); + config.on('eleventy.after', () => { + execSync(`npx pagefind --site dist --glob \"**/*.html\"`, { encoding: 'utf-8' }); + }); + return { dir: { input: "site", diff --git a/package-lock.json b/package-lock.json index e7bec67..eff28c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,9 @@ "markdown-it-anchor": "^9.0.1", "markdown-it-link-attributes": "^4.0.1", "prettier": "^3.3.1" + }, + "devDependencies": { + "pagefind": "^1.3.0" } }, "node_modules/@11ty/dependency-tree": { @@ -520,6 +523,76 @@ "win32" ] }, + "node_modules/@pagefind/darwin-arm64": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.3.0.tgz", + "integrity": "sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@pagefind/darwin-x64": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.3.0.tgz", + "integrity": "sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@pagefind/linux-arm64": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.3.0.tgz", + "integrity": "sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@pagefind/linux-x64": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.3.0.tgz", + "integrity": "sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@pagefind/windows-x64": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.3.0.tgz", + "integrity": "sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -1896,6 +1969,23 @@ "license": "BlueOak-1.0.0", "peer": true }, + "node_modules/pagefind": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.3.0.tgz", + "integrity": "sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==", + "dev": true, + "license": "MIT", + "bin": { + "pagefind": "lib/runner/bin.cjs" + }, + "optionalDependencies": { + "@pagefind/darwin-arm64": "1.3.0", + "@pagefind/darwin-x64": "1.3.0", + "@pagefind/linux-arm64": "1.3.0", + "@pagefind/linux-x64": "1.3.0", + "@pagefind/windows-x64": "1.3.0" + } + }, "node_modules/parse-srcset": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", diff --git a/package.json b/package.json index 6e417a9..e80c0b9 100644 --- a/package.json +++ b/package.json @@ -22,5 +22,8 @@ "markdown-it-anchor": "^9.0.1", "markdown-it-link-attributes": "^4.0.1", "prettier": "^3.3.1" + }, + "devDependencies": { + "pagefind": "^1.3.0" } } diff --git a/site/_includes/-header.njk b/site/_includes/-header.njk index af59891..c561816 100644 --- a/site/_includes/-header.njk +++ b/site/_includes/-header.njk @@ -49,8 +49,10 @@ /recipes /music /books + + {% include "-search.njk" %}

{{ tag | capitalize if tag else title }}

{%- if author -%} diff --git a/site/_includes/-search.njk b/site/_includes/-search.njk new file mode 100644 index 0000000..299a595 --- /dev/null +++ b/site/_includes/-search.njk @@ -0,0 +1,4 @@ +
+ + +
diff --git a/site/_includes/base.njk b/site/_includes/base.njk index 0902283..da3541c 100644 --- a/site/_includes/base.njk +++ b/site/_includes/base.njk @@ -28,7 +28,7 @@ title: Joshua's Homepage {% include "-header.njk" %} -
+
{{ content | safe }}
{% include "-footer.njk" %} diff --git a/site/_includes/css/site.css b/site/_includes/css/site.css index 710eb10..abc6c5d 100644 --- a/site/_includes/css/site.css +++ b/site/_includes/css/site.css @@ -113,17 +113,24 @@ body { a { color: inherit; } -a[href] { +a[href], button#search { + appearance: none; text-decoration-line: underline; box-decoration-break: clone; padding: 0.1em; margin: -0.1em; position: relative; } -a[href]:hover, -a[href]:focus-visible, -nav label:hover, -nav label:focus-visible, +button#search { + background: transparent; + border: none; + color: inherit; + font-family: inherit; + font-size: inherit; + margin-left: auto; +} +:is(a, nav label, button#search):hover, +:is(a, nav label, button#search):focus-visible, nav label:has(input:focus-visible), nav label:has(input:checked) { outline: none; @@ -139,8 +146,7 @@ nav label:has(input:checked) { 0 0 1rem var(--c-accent); } } -a[href]:focus-visible, -nav label:focus-visible, +:is(a[href], button, button#search, nav label):focus-visible, nav label:has(input:focus-visible) { z-index: 1; outline: 2px solid var(--c-text-dark); @@ -396,7 +402,8 @@ footer section { position: relative; cursor: pointer; text-decoration-line: underline; - display: inline-block; + display: inline-flex; + align-items: center; border-radius: 0; padding: 0.1rem 0.25rem; margin: 0; From bb3af95d1971abd9063848913393f1dbe44658a5 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Wed, 11 Jun 2025 18:11:49 -0400 Subject: [PATCH 2/4] add search --- assets/scripts/animations.js | 2 +- site/_includes/-header.njk | 3 +-- site/_includes/-search.njk | 4 ---- site/_includes/css/site.css | 37 +++++++++++++++++++++++------------- site/pages/search.njk | 9 +++++++++ 5 files changed, 35 insertions(+), 20 deletions(-) delete mode 100644 site/_includes/-search.njk create mode 100644 site/pages/search.njk diff --git a/assets/scripts/animations.js b/assets/scripts/animations.js index b26944a..81b531d 100644 --- a/assets/scripts/animations.js +++ b/assets/scripts/animations.js @@ -14,7 +14,7 @@ function addEffect({ target }) { target == null || !target["matches"] || !target.matches( - "a[href],.nav-toggle-button,button,input,label:not(:has(input))", + "a[href],.nav-toggle-button,button,input[type='radio']", ) ) { return; diff --git a/site/_includes/-header.njk b/site/_includes/-header.njk index c561816..dbafc2a 100644 --- a/site/_includes/-header.njk +++ b/site/_includes/-header.njk @@ -49,10 +49,9 @@ /recipes /music /books - + /search
- {% include "-search.njk" %}

{{ tag | capitalize if tag else title }}

{%- if author -%} diff --git a/site/_includes/-search.njk b/site/_includes/-search.njk deleted file mode 100644 index 299a595..0000000 --- a/site/_includes/-search.njk +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/site/_includes/css/site.css b/site/_includes/css/site.css index abc6c5d..67ea45f 100644 --- a/site/_includes/css/site.css +++ b/site/_includes/css/site.css @@ -113,7 +113,7 @@ body { a { color: inherit; } -a[href], button#search { +a[href] { appearance: none; text-decoration-line: underline; box-decoration-break: clone; @@ -121,16 +121,8 @@ a[href], button#search { margin: -0.1em; position: relative; } -button#search { - background: transparent; - border: none; - color: inherit; - font-family: inherit; - font-size: inherit; - margin-left: auto; -} -:is(a, nav label, button#search):hover, -:is(a, nav label, button#search):focus-visible, +:is(a, nav label):hover, +:is(a, nav label):focus-visible, nav label:has(input:focus-visible), nav label:has(input:checked) { outline: none; @@ -146,7 +138,7 @@ nav label:has(input:checked) { 0 0 1rem var(--c-accent); } } -:is(a[href], button, button#search, nav label):focus-visible, +:is(a[href], button, nav label):focus-visible, nav label:has(input:focus-visible) { z-index: 1; outline: 2px solid var(--c-text-dark); @@ -575,6 +567,7 @@ body .isso-input-wrapper label { } body .isso-input-wrapper input, +input[type='text'], body .isso-textarea, body .isso-preview { color: inherit; @@ -607,7 +600,7 @@ body .isso-preview { var(--c-text-background-light) 20px ); } -body .isso-post-action > input { +body .isso-post-action > input, button { color: inherit; background-color: var(--c-text-background-light); font-size: 1rem; @@ -674,3 +667,21 @@ body .isso-post-action { ); animation: 1s ease normal forwards ripple; } +.pagefind-ui__form { + display: grid; + gap: 0.5rem; + grid-template-columns: 1fr min-content; +} +.pagefind-ui__search-input { + margin-right: 0.5rem; + grid-column-start: 0; + grid-column-end: span 1; +} +.pagefind-ui__drawer { + grid-column-start: 0; + grid-column-end: span 2; + width: 100%; +} +.pagefind-ui__result-excerpt { + margin: 0.5rem 0; +} diff --git a/site/pages/search.njk b/site/pages/search.njk new file mode 100644 index 0000000..3745a59 --- /dev/null +++ b/site/pages/search.njk @@ -0,0 +1,9 @@ +--- +layout: base.njk +permalink: search/index.html +title: Search +--- +
+ + +
From 49dc3c20a0f730d0617b0bd091afd72781812617 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Wed, 11 Jun 2025 20:48:56 -0400 Subject: [PATCH 3/4] trailing slashes, cache-busting get params --- assets/scripts/{animations.js => effects.js} | 0 eleventy.config.js | 3 + package-lock.json | 65 ++++++-------------- package.json | 1 + site/_includes/-footer.njk | 2 +- site/_includes/base.njk | 4 +- 6 files changed, 25 insertions(+), 50 deletions(-) rename assets/scripts/{animations.js => effects.js} (100%) diff --git a/assets/scripts/animations.js b/assets/scripts/effects.js similarity index 100% rename from assets/scripts/animations.js rename to assets/scripts/effects.js diff --git a/eleventy.config.js b/eleventy.config.js index 8552a94..8718a5a 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -12,6 +12,7 @@ import clean from "eleventy-plugin-clean"; import site from "./site/_data/site.js"; import { feedPlugin } from "@11ty/eleventy-plugin-rss"; import { execSync } from 'child_process'; +import eleventyAutoCacheBuster from "eleventy-auto-cache-buster"; dayjs.extend(utc); @@ -134,6 +135,8 @@ export default (config) => { stylesheet: "/simple-atom.xslt", }); + config.addPlugin(eleventyAutoCacheBuster); + config.on('eleventy.after', () => { execSync(`npx pagefind --site dist --glob \"**/*.html\"`, { encoding: 'utf-8' }); }); diff --git a/package-lock.json b/package-lock.json index eff28c0..ca6fb2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@mdit/plugin-footnote": "^0.22.0", "@mdit/plugin-spoiler": "^0.21.0", "dayjs": "^1.11.11", + "eleventy-auto-cache-buster": "^0.8.1", "eleventy-plugin-clean": "^2.0.1", "markdown-it-anchor": "^9.0.1", "markdown-it-link-attributes": "^4.0.1", @@ -319,7 +320,6 @@ "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", "license": "ISC", - "peer": true, "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -599,7 +599,6 @@ "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=14" } @@ -692,7 +691,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -705,7 +703,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -858,7 +855,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "license": "MIT", - "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -870,8 +866,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/commander": { "version": "10.0.1", @@ -893,7 +888,6 @@ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "license": "MIT", - "peer": true, "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -1021,8 +1015,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/ee-first": { "version": "1.1.1", @@ -1030,6 +1023,15 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", "license": "MIT" }, + "node_modules/eleventy-auto-cache-buster": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/eleventy-auto-cache-buster/-/eleventy-auto-cache-buster-0.8.1.tgz", + "integrity": "sha512-w2YilXXgOOdRMrdYt6PRbEbnDuS8huR4fTW3ky+yvMEfNz/O55QEM5+Ti1D2oXQ80QLu+QytBRQyyYSTX48Jog==", + "license": "MIT", + "dependencies": { + "glob": "^10.3.10" + } + }, "node_modules/eleventy-plugin-clean": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/eleventy-plugin-clean/-/eleventy-plugin-clean-2.0.1.tgz", @@ -1052,8 +1054,7 @@ "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/encodeurl": { "version": "2.0.0", @@ -1218,7 +1219,6 @@ "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", "license": "ISC", - "peer": true, "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" @@ -1258,7 +1258,6 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "license": "ISC", - "peer": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", @@ -1291,7 +1290,6 @@ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", "license": "MIT", - "peer": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -1301,7 +1299,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "license": "ISC", - "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -1456,7 +1453,6 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -1492,8 +1488,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/iso-639-1": { "version": "3.1.5", @@ -1509,7 +1504,6 @@ "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", "license": "BlueOak-1.0.0", - "peer": true, "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -1625,8 +1619,7 @@ "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/luxon": { "version": "3.6.1", @@ -1966,8 +1959,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "license": "BlueOak-1.0.0", - "peer": true + "license": "BlueOak-1.0.0" }, "node_modules/pagefind": { "version": "1.3.0", @@ -2006,7 +1998,6 @@ "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2016,7 +2007,6 @@ "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", "license": "BlueOak-1.0.0", - "peer": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" @@ -2249,7 +2239,6 @@ "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", "license": "MIT", - "peer": true, "dependencies": { "shebang-regex": "^3.0.0" }, @@ -2262,7 +2251,6 @@ "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2272,7 +2260,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "license": "ISC", - "peer": true, "engines": { "node": ">=14" }, @@ -2331,7 +2318,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", "license": "MIT", - "peer": true, "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -2350,7 +2336,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "license": "MIT", - "peer": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -2365,7 +2350,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2374,15 +2358,13 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/string-width-cjs/node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -2395,7 +2377,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -2412,7 +2393,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -2425,7 +2405,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2534,7 +2513,6 @@ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", "license": "ISC", - "peer": true, "dependencies": { "isexe": "^2.0.0" }, @@ -2550,7 +2528,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", "license": "MIT", - "peer": true, "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", @@ -2569,7 +2546,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "license": "MIT", - "peer": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -2587,7 +2563,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2597,7 +2572,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "license": "MIT", - "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -2612,15 +2586,13 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/wrap-ansi-cjs/node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "license": "MIT", - "peer": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -2635,7 +2607,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, diff --git a/package.json b/package.json index e80c0b9..e1566c2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@mdit/plugin-footnote": "^0.22.0", "@mdit/plugin-spoiler": "^0.21.0", "dayjs": "^1.11.11", + "eleventy-auto-cache-buster": "^0.8.1", "eleventy-plugin-clean": "^2.0.1", "markdown-it-anchor": "^9.0.1", "markdown-it-link-attributes": "^4.0.1", diff --git a/site/_includes/-footer.njk b/site/_includes/-footer.njk index 8770ebb..51b73e1 100644 --- a/site/_includes/-footer.njk +++ b/site/_includes/-footer.njk @@ -8,7 +8,7 @@ - Contact - - Unoffice Hours + Unoffice Hours
Webrings: diff --git a/site/_includes/base.njk b/site/_includes/base.njk index da3541c..b02d990 100644 --- a/site/_includes/base.njk +++ b/site/_includes/base.njk @@ -8,7 +8,7 @@ title: Joshua's Homepage - + {{ computedTitle }} - {{ site.title }} @@ -24,7 +24,7 @@ title: Joshua's Homepage - + {% include "-header.njk" %} From c6989a5710ea48b596b01c090280f930bae7c65e Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Wed, 11 Jun 2025 21:08:05 -0400 Subject: [PATCH 4/4] insight into dark vs light --- assets/scripts/effects.js | 62 +++++++++++++++++++++++++++----------- site/_includes/-header.njk | 27 ----------------- 2 files changed, 45 insertions(+), 44 deletions(-) diff --git a/assets/scripts/effects.js b/assets/scripts/effects.js index 81b531d..aa1167c 100644 --- a/assets/scripts/effects.js +++ b/assets/scripts/effects.js @@ -1,11 +1,41 @@ "use strict"; -// function setScrollAmount() { -// (document.documentElement || document.body).style.setProperty("--scrollLengthPx", body.scrollTop); -// } -// setScrollAmount(); -// document.addEventListener("scroll", setScrollAmount); -// document.addEventListener("resize", setScrollAmount); +const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); +const defaultPrefs = { + language: "english", + theme: "auto", +}; +if (umami != null) { + umami.identify({ deviceTheme: darkModeMediaQuery ? "dark" : "light" }); +} +Object.entries(defaultPrefs).forEach(([key, defaultPref]) => { + const currentPref = localStorage.getItem(key) ?? defaultPref; + 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) { + if (umami !== null) { + umami.identify({ + [`pref-${key}`]: value, + }); + if (shouldSave) { + umami.track(`Set ${key} to ${value}`); + } + } + document.body.setAttribute(`data-${key}`, value); + document.querySelectorAll(`input[name=${key}]`).forEach((input) => { + if (input.value === value) { + input.checked = true; + } + }); + if (shouldSave) { + localStorage.setItem(key, value); + } +} /** @param {Event} evt */ function addEffect({ target }) { @@ -13,9 +43,7 @@ function addEffect({ target }) { if ( target == null || !target["matches"] || - !target.matches( - "a[href],.nav-toggle-button,button,input[type='radio']", - ) + !target.matches("a[href],.nav-toggle-button,button,input[type='radio']") ) { return; } @@ -40,13 +68,13 @@ document.addEventListener("mouseenter", addEffect, true); document.addEventListener("focus", addEffect, true); /** @param {Event} evt */ -function removeEffect({target}) { +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 => { + effects.forEach((e) => { + e.getAnimations().forEach((anim) => { if (anim.currentTime < 100) { anim.pause(); effectsLayer.removeChild(e); @@ -55,13 +83,13 @@ function removeEffect({target}) { anim.pause(); anim.updatePlaybackRate(-0.25); anim.play(); - anim.addEventListener('finish', () => { + anim.addEventListener("finish", () => { if (effectsLayer.contains(e)) { effectsLayer.removeChild(e); } }); }); - }) -}; -document.addEventListener('mouseleave', removeEffect, true); -document.addEventListener('blur', removeEffect, true); + }); +} +document.addEventListener("mouseleave", removeEffect, true); +document.addEventListener("blur", removeEffect, true); diff --git a/site/_includes/-header.njk b/site/_includes/-header.njk index dbafc2a..5881337 100644 --- a/site/_includes/-header.njk +++ b/site/_includes/-header.njk @@ -11,33 +11,6 @@
-