insight into dark vs light

assets/scripts/animations.js

@@ -1,62 +0,0 @@
-'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);
-    });
-  }
-}
-Array.from(
-  document.querySelectorAll('a[href],.nav-toggle-button,button,input')
-).forEach(el => {
-  el.addEventListener('mouseenter', rippleListener(el));
-  el.addEventListener('focus', rippleListener(el));
-});

assets/scripts/effects.js

@@ -0,0 +1,95 @@
+"use strict";
+
+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 }) {
+  const effectsLayer = document.querySelector("#effects");
+  if (
+    target == null ||
+    !target["matches"] ||
+    !target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
+  ) {
+    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);
+  });
+}
+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);

eleventy.config.js

@@ -11,6 +11,8 @@ 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';
+import eleventyAutoCacheBuster from "eleventy-auto-cache-buster";
 
 dayjs.extend(utc);
 
@@ -133,6 +135,12 @@ export default (config) => {
     stylesheet: "/simple-atom.xslt",
   });
 
+  config.addPlugin(eleventyAutoCacheBuster);
+
+  config.on('eleventy.after', () => {
+    execSync(`npx pagefind --site dist --glob \"**/*.html\"`, { encoding: 'utf-8' });
+  });
+
   return {
     dir: {
       input: "site",

package-lock.json

@@ -14,10 +14,14 @@
         "@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",
         "prettier": "^3.3.1"
+      },
+      "devDependencies": {
+        "pagefind": "^1.3.0"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -316,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",
@@ -520,13 +523,82 @@
         "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",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -619,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"
       },
@@ -632,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"
       },
@@ -785,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"
       },
@@ -797,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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/commander": {
       "version": "10.0.1",
@@ -820,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",
@@ -948,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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
@@ -957,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",
@@ -979,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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/encodeurl": {
       "version": "2.0.0",
@@ -1145,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"
@@ -1185,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",
@@ -1218,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"
       }
@@ -1228,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"
       },
@@ -1383,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"
       }
@@ -1419,8 +1488,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC",
+      "license": "ISC"
-      "peer": true
     },
     "node_modules/iso-639-1": {
       "version": "3.1.5",
@@ -1436,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"
       },
@@ -1552,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",
+      "license": "ISC"
-      "peer": true
     },
     "node_modules/luxon": {
       "version": "3.6.1",
@@ -1893,8 +1959,24 @@
       "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",
+      "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",
@@ -1916,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"
       }
@@ -1926,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"
@@ -2159,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"
       },
@@ -2172,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"
       }
@@ -2182,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"
       },
@@ -2241,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",
@@ -2260,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",
@@ -2275,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"
       }
@@ -2284,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",
+      "license": "MIT"
-      "peer": true
     },
     "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"
       },
@@ -2305,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"
       },
@@ -2322,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"
       },
@@ -2335,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"
       }
@@ -2444,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"
       },
@@ -2460,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",
@@ -2479,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",
@@ -2497,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"
       }
@@ -2507,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"
       },
@@ -2522,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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
@@ -2545,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"
       },

package.json

@@ -18,9 +18,13 @@
     "@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",
     "prettier": "^3.3.1"
+  },
+  "devDependencies": {
+    "pagefind": "^1.3.0"
   }
 }

site/_includes/-footer.njk

@@ -8,7 +8,7 @@
     -
     <a rel="me" href="mailto:joshua@seigler.net?subject=Hello">Contact</a>
     -
-    <a href="/unoffice-hours">Unoffice Hours</a>
+    <a href="/unoffice-hours/">Unoffice Hours</a>
   </section>
   <section>
     Webrings:

site/_includes/-header.njk

@@ -11,33 +11,6 @@
         <div class="nav-toggles">
           <label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
           <label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
-          <script type="text/javascript">
-            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            const defaultPrefs = {
-              language: 'english',
-              theme: 'auto'
-            };
-            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) {
-              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);
-              }
-            }
-          </script>
         </div>
       </div>
     </div>
@@ -49,6 +22,7 @@
       <a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a>
       <a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a>
       <a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a>
+      <a class="{{ 'nav-active' if '/search' in page.url }}" href="{{ "/search/" | url }}">/search</a>
     </div>
   </nav>
   <h1>{{ tag | capitalize if tag else title }}</h1>

site/_includes/base.njk

@@ -8,7 +8,7 @@ title: Joshua's Homepage
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{ buildTime }}"/>
+    <link rel="stylesheet" href="{{ "/site.css" | url }}"/>
     <link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention"/>
     <title>{{ computedTitle }} - {{ site.title }}</title>
     <meta name="description" content="{{ description }}"/>
@@ -24,11 +24,11 @@ title: Joshua's Homepage
     <meta name="twitter:card" content="summary"/>
     <meta name="generator" content="{{ eleventy.generator }}">
     <script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
-    <script defer src="/scripts/animations.js"></script>
+    <script defer src="/scripts/effects.js"></script>
   </head>
   <body data-font="english" data-path="{{ page.url }}">
     {% include "-header.njk" %}
-    <main>
+    <main data-pagefind-body>
       {{ content | safe }}
     </main>
     {% include "-footer.njk" %}

site/_includes/css/site.css

@@ -114,16 +114,15 @@ a {
   color: inherit;
 }
 a[href] {
+  appearance: none;
   text-decoration-line: underline;
   box-decoration-break: clone;
   padding: 0.1em;
   margin: -0.1em;
   position: relative;
 }
-a[href]:hover,
+:is(a, nav label):hover,
-a[href]:focus-visible,
+:is(a, nav label):focus-visible,
-nav label:hover,
-nav label:focus-visible,
 nav label:has(input:focus-visible),
 nav label:has(input:checked) {
   outline: none;
@@ -139,8 +138,7 @@ nav label:has(input:checked) {
       0 0 1rem var(--c-accent);
   }
 }
-a[href]:focus-visible,
+:is(a[href], button, nav label):focus-visible,
-nav label:focus-visible,
 nav label:has(input:focus-visible) {
   z-index: 1;
   outline: 2px solid var(--c-text-dark);
@@ -396,7 +394,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;
@@ -568,6 +567,7 @@ body .isso-input-wrapper label {
 }
 
 body .isso-input-wrapper input,
+input[type='text'],
 body .isso-textarea,
 body .isso-preview {
   color: inherit;
@@ -600,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;
@@ -667,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;
+}

site/pages/search.njk

@@ -0,0 +1,9 @@
+---
+layout: base.njk
+permalink: search/index.html
+title: Search
+---
+<div class="searchCard">
+  <div id="searchbox"></div>
+  <script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false, autofocus: true });"></script>
+</div>