add vite bundler

.gitignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 .plugin-clean
-.cache
+.cache
+.11ty-vite

assets/scripts/main.ts

@@ -1,22 +1,15 @@
-"use strict";
-
 const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
-document.querySelector('script[data-website-id]').addEventListener('load', () => {
-  try {
-    umami.identify({ deviceTheme: darkModeMediaQuery ? "dark" : "light" });
-  } catch {}
-});
-
 /** @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,
+    (e) => e['__effectParent'] === target,
   );
   effects.forEach((e) => {
     e.getAnimations().forEach((anim) => {
-      if (anim.currentTime < 100) {
+      if (+(anim.currentTime ?? 0) < 100) {
         anim.pause();
         effectsLayer.removeChild(e);
         return;
@@ -33,12 +26,14 @@ function removeEffect({ target }) {
   });
 }
 
-/** @param {Event} evt */
+function isElement(target: EventTarget | null): target is Element {
-function addEffect({ target }) {
+  return target !== null && typeof target["matches"] === 'function'
+}
+
+function addEffect({ target }: UIEvent) {
   const effectsLayer = document.querySelector("#effects");
   if (
-    target == null ||
+    !isElement(target) ||
-    !target["matches"] ||
     !target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
   ) {
     return;
@@ -51,7 +46,7 @@ function addEffect({ target }) {
   rects.forEach((rect) => {
     const { top, left, width, height } = rect;
     const newEffect = document.createElement("div");
-    newEffect.__effectParent = target;
+    newEffect['__effectParent'] = target;
     newEffect.classList.add("effect-instance");
     const padding = "10rem";
     newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`;
@@ -59,7 +54,7 @@ function addEffect({ target }) {
     newEffect.style.width = `calc(${width}px + 2 * ${padding})`;
     newEffect.style.height = `calc(${height}px + 2 * ${padding})`;
     newEffect.style.setProperty('--glowColor', color);
-    effectsLayer.appendChild(newEffect);
+    effectsLayer?.appendChild(newEffect);
   });
 }
 

eleventy.config.js

@@ -5,18 +5,18 @@ import mdAnchor from "markdown-it-anchor";
 import { spoiler as mdSpoiler } from "@mdit/plugin-spoiler";
 import { footnote as mdFootnote } from "@mdit/plugin-footnote";
 import mdLinkAttributes from "markdown-it-link-attributes";
-import prettier from "prettier";
+import mdPrism from "markdown-it-prism";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc.js";
 import clean from "eleventy-plugin-clean";
 import toc from "eleventy-plugin-toc";
 import site from "./site/_data/site.js";
-import { feedPlugin } from "@11ty/eleventy-plugin-rss";
+import { feedPlugin as EleventyFeedPlugin } from "@11ty/eleventy-plugin-rss";
+import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
 import { execSync } from "child_process";
-import eleventyAutoCacheBuster from "eleventy-auto-cache-buster";
-import mdPrism from "markdown-it-prism";
 import fetch from "@11ty/eleventy-fetch";
 import { XMLValidator, XMLParser } from "fast-xml-parser";
+import { ViteMinifyPlugin } from "vite-plugin-minify";
 
 dayjs.extend(utc);
 
@@ -116,26 +116,6 @@ export default async (config) => {
 
   config.addCollection("webroll", fetchShaarliWebroll);
 
-  config.addTransform("prettier", (content, outputPath) => {
-    if (typeof outputPath !== "string") {
-      return content;
-    }
-    const extname = path.extname(outputPath);
-    switch (extname) {
-      case ".html":
-      case ".css":
-      case ".json":
-        // Strip leading period from extension and use as the Prettier parser.
-        const parser = extname.replace(/^./, "");
-        return prettier.format(content, { parser });
-      default:
-        return content;
-    }
-  });
-
-  config.addFilter("absoluteURL", (url) => {
-    return new URL(url, site.baseUrl).href;
-  });
   config.addFilter("toISOString", (dateString) => {
     return new Date(dateString).toISOString();
   });
@@ -151,7 +131,7 @@ export default async (config) => {
   const buildTime = new Date().toISOString().replace(/[:.-]/g, "");
   config.addGlobalData("buildTime", buildTime);
 
-  config.addPlugin(feedPlugin, {
+  config.addPlugin(EleventyFeedPlugin, {
     type: "atom", // "atom", ""rss", or "json"
     outputPath: "/feed.xml",
     collection: {
@@ -171,7 +151,20 @@ export default async (config) => {
     stylesheet: "/simple-atom.xslt",
   });
 
-  config.addPlugin(eleventyAutoCacheBuster);
+  config.addPlugin(EleventyVitePlugin, {
+    viteOptions: {
+      server: {
+        port: 8080
+      },
+      build: {
+        mode: 'production',
+        sourcemap: true,
+      },
+      plugins: [
+        ViteMinifyPlugin({})
+      ]
+    }
+  });
 
   config.addPlugin(toc);
 

package.json

@@ -5,9 +5,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "npx @11ty/eleventy --serve",
+    "dev": "npx @11ty/eleventy --incremental --serve",
     "build": "npx @11ty/eleventy",
-    "publish": "npx @11ty/eleventy && gh-pages -d dist -b gh-pages"
+    "publish": "npx @11ty/eleventy && npx gh-pages -d dist -b gh-pages"
   },
   "keywords": [],
   "author": "Joshua Seigler",
@@ -16,21 +16,20 @@
     "@11ty/eleventy": "^3.1.0",
     "@11ty/eleventy-fetch": "^5.1.0",
     "@11ty/eleventy-plugin-rss": "^2.0.4",
+    "@11ty/eleventy-plugin-vite": "^6.0.0",
     "@mdit/plugin-footnote": "^0.22.0",
     "@mdit/plugin-spoiler": "^0.21.0",
     "@types/node": "^24.0.5",
+    "@types/umami": "^2.10.0",
     "dayjs": "^1.11.11",
-    "eleventy-auto-cache-buster": "^0.8.1",
     "eleventy-plugin-clean": "^2.0.1",
     "eleventy-plugin-toc": "^1.1.5",
     "fast-xml-parser": "^5.2.5",
+    "gh-pages": "^6.3.0",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-prism": "^3.0.0",
-    "prettier": "^3.3.1"
+    "pagefind": "^1.3.0",
-  },
+    "vite-plugin-minify": "^2.1.0"
-  "devDependencies": {
-    "gh-pages": "^6.3.0",
-    "pagefind": "^1.3.0"
   }
 }

site/_includes/base.njk

@@ -11,7 +11,7 @@ title: Joshua's Homepage
     <link rel="stylesheet" href="{{ "/site.css" | url }}"/>
     <style>{% include "-inline-css.njk" %}</style>
     <script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
-    <script defer src="/scripts/effects.js"></script>
+    <script defer src="/scripts/main.ts" type="module"></script>
     <link rel="me" href="https://github.com/seigler"/>
     <link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention"/>
     <title>{{ computedTitle }} - {{ site.title }}</title>
@@ -21,13 +21,13 @@ title: Joshua's Homepage
     {%- endif %}
     <meta property="og:title" content="{{ computedTitle }}"/>
     <meta property="og:type" content="{{ article }}"/>
-    <meta property="og:url" content="{{ page.url | absoluteURL }}"/>
+    <meta property="og:url" content="{{ page.url | url }}"/>
     <meta name="twitter:title" content="{{ computedTitle }}"/>
     <meta name="twitter:description" content="{{ description }}"/>
-    {% if cover %}
+    {%- if cover %}
-      <meta property="og:image" content="{{ cover | absoluteURL }}"/>
+    <meta property="og:image" content="{{ cover | url }}"/>
-      <meta name="twitter:image" content="{{ cover | absoluteURL }}"/>
+    <meta name="twitter:image" content="{{ cover | url }}"/>
-    {% endif %}
+    {%- endif %}
     <meta name="twitter:card" content="summary"/>
     <meta name="generator" content="{{ eleventy.generator }}">
   </head>

site/pages/search.njk

@@ -7,6 +7,6 @@ title: Search
 <main>
   <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>
+  <script src="/pagefind/pagefind-ui.js" type="module" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false, autofocus: true });"></script>
   </div>
 </main>