add vite bundler

assets/scripts/main.ts

@@ -0,0 +1,65 @@
+const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+/** @param {Event} evt */
+function removeEffect({ target }) {
+  const effectsLayer = document.querySelector("#effects");
+  if (effectsLayer == null) { return };
+  const effects = Array.from(effectsLayer.children).filter(
+    (e) => e['__effectParent'] === target,
+  );
+  effects.forEach((e) => {
+    e.getAnimations().forEach((anim) => {
+      if (+(anim.currentTime ?? 0) < 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);
+        }
+      });
+    });
+  });
+}
+
+function isElement(target: EventTarget | null): target is Element {
+  return target !== null && typeof target["matches"] === 'function'
+}
+
+function addEffect({ target }: UIEvent) {
+  const effectsLayer = document.querySelector("#effects");
+  if (
+    !isElement(target) ||
+    !target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
+  ) {
+    return;
+  }
+  const color = window.getComputedStyle(target).getPropertyValue('--glowColor');
+  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})`;
+    newEffect.style.setProperty('--glowColor', color);
+    effectsLayer?.appendChild(newEffect);
+  });
+}
+
+document.addEventListener("mouseenter", addEffect, true);
+document.addEventListener("focus", addEffect, true);
+
+document.addEventListener("mouseleave", removeEffect, true);
+document.addEventListener("blur", removeEffect, true);