chore: use remote search

2024-10-18 18:12:30 -07:00 · 2024-10-18 18:12:30 -07:00 · 482e13569f
commit 482e13569f
parent 7a2a2aa951
53 changed files with 1184 additions and 3735 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,59 +1,49 @@
+import { createRequire } from 'module'
 import dotenvFlow from 'dotenv-flow'
 import filters from './config/filters/index.js'
+import htmlmin from 'html-minifier-terser'
 import markdownIt from 'markdown-it'
 import markdownItAnchor from 'markdown-it-anchor'
 import markdownItFootnote from 'markdown-it-footnote'
 import markdownItPrism from 'markdown-it-prism'
-import EleventyVitePlugin from '@11ty/eleventy-plugin-vite'
-import { ViteMinifyPlugin } from 'vite-plugin-minify'
-import { resolve } from 'path';
 import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
 import tablerIcons from '@cdransf/eleventy-plugin-tabler-icons'
+import { copyErrorPages, minifyJsComponents } from './config/events/index.js'
 import { albumReleasesCalendar } from './config/collections/index.js'
+import { cssConfig } from './config/plugins/css-config.js'

 // load .env
 dotenvFlow.config()

+// get app version
+const require = createRequire(import.meta.url)
+const appVersion = require('./package.json').version
+
 export default async function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight)
  eleventyConfig.addPlugin(tablerIcons)

-  eleventyConfig.addPassthroughCopy('src/assets')
-  eleventyConfig.addPassthroughCopy('_redirects')
-  eleventyConfig.addPassthroughCopy('_headers')
-
-  eleventyConfig.addPlugin(EleventyVitePlugin, {
-    tempFolderName: '.11ty-vite',
-    viteOptions: {
-      clearScreen: false,
-			appType: 'mpa',
-      server: {
-				middlewareMode: true,
-			},
-      assetsInclude: ['src/assets/fonts/*.woff2'],
-      build: {
-        emptyOutDir: true,
-        rollupOptions: {
-          external: ['/js/script.js'],
-          input: {
-            main: resolve('./src/assets/index.js'),
-          },
-          output: {
-            assetFileNames: 'assets/css/[name][extname]',
-						chunkFileNames: 'assets/js/[name].[hash].js',
-						entryFileNames: 'assets/js/[name].[hash].js'
-          },
-        },
-      },
-      plugins: [ViteMinifyPlugin({})],
-    },
-  })
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.addPlugin(cssConfig)

  eleventyConfig.setServerOptions({ domdiff: false })
  eleventyConfig.setWatchThrottleWaitTime(200)
  eleventyConfig.setQuietMode(true)
  eleventyConfig.configureErrorReporting({ allowMissingExtensions: true })
-  eleventyConfig.setLiquidOptions({ jsTruthy: true })
+  eleventyConfig.setLiquidOptions({
+    jsTruthy: true,
+  })
+
+  eleventyConfig.addPassthroughCopy('src/assets')
+  eleventyConfig.addPassthroughCopy('_redirects')
+  eleventyConfig.addPassthroughCopy('_headers')
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@cdransf/api-text/api-text.js': 'assets/scripts/components/api-text.js',
+    'node_modules/@cdransf/select-pagination/select-pagination.js': 'assets/scripts/components/select-pagination.js',
+    'node_modules/@cdransf/theme-toggle/theme-toggle.js': 'assets/scripts/components/theme-toggle.js',
+    'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/components/mastodon-post.js',
+    'node_modules/minisearch/dist/umd/index.js': 'assets/scripts/components/minisearch.js',
+    'node_modules/youtube-video-element/youtube-video-element.js': 'assets/scripts/components/youtube-video-element.js'
+  })

  eleventyConfig.addCollection('albumReleasesCalendar', albumReleasesCalendar)

@ -66,7 +56,6 @@ export default async function (eleventyConfig) {
  })
  md.use(markdownItFootnote)
  md.use(markdownItPrism)
-
  eleventyConfig.setLibrary('md', md)

  eleventyConfig.addLiquidFilter('markdown', (content) => {
@ -78,6 +67,34 @@ export default async function (eleventyConfig) {
    eleventyConfig.addLiquidFilter(filterName, filters[filterName])
  })

+  eleventyConfig.addShortcode('appVersion', () => appVersion)
+
+  // events
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', copyErrorPages)
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', minifyJsComponents)
+
+  // transforms
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.addTransform('html-minify', (content, path) => {
+    if (path && path.endsWith('.html')) {
+      return htmlmin.minify(content, {
+        collapseBooleanAttributes: true,
+        collapseWhitespace: true,
+        decodeEntities: true,
+        includeAutoGeneratedTags: false,
+        minifyCSS: true,
+        minifyJS: true,
+        minifyURLs: true,
+        noNewlinesBeforeTagClose: true,
+        quoteCharacter: '"',
+        removeComments: true,
+        sortAttributes: true,
+        sortClassName: true,
+        useShortDoctype: true,
+      })
+    }
+    return content
+  })
+
  return {
    passthroughFileCopy: true,
    dir: {
--- a/config/events/index.js
+++ b/config/events/index.js
@ -0,0 +1,59 @@
+import fs from 'fs'
+import path from 'path'
+import { minify } from 'terser'
+
+const errorPages = ['404', '500', '1000', 'broken', 'error', 'js-challenge', 'not-allowed', 'rate-limit']
+
+export const copyErrorPages = () => {
+  errorPages.forEach((errorPage) => {
+    const sourcePath = path.join('_site', errorPage, 'index.html')
+    const destinationPath = path.join('_site', `${errorPage}.html`)
+    const directoryPath = path.join('_site', errorPage)
+
+    fs.copyFile(sourcePath, destinationPath, (err) => {
+      if (err) {
+        console.error(`Error copying ${errorPage} page:`, err)
+        return
+      }
+
+      fs.unlink(sourcePath, (unlinkErr) => {
+        if (unlinkErr) {
+          console.error(`Error deleting source file for ${errorPage} page:`, unlinkErr)
+          return
+        }
+
+        fs.rmdir(directoryPath, (rmdirErr) => {
+          if (rmdirErr) console.error(`Error removing directory for ${errorPage} page:`, rmdirErr)
+        })
+      })
+    })
+  })
+}
+
+export const minifyJsComponents = async () => {
+  const scriptsDir = '_site/assets/scripts'
+
+  const minifyJsFilesInDir = async (dir) => {
+    const files = fs.readdirSync(dir)
+    for (const fileName of files) {
+      const filePath = path.join(dir, fileName)
+      const stat = fs.statSync(filePath)
+
+      if (stat.isDirectory()) {
+        await minifyJsFilesInDir(filePath)
+      } else if (fileName.endsWith('.js')) {
+        const fileContent = fs.readFileSync(filePath, 'utf8')
+        const minified = await minify(fileContent)
+        if (minified.error) {
+          console.error(`Error minifying ${filePath}:`, minified.error)
+        } else {
+          fs.writeFileSync(filePath, minified.code)
+        }
+      } else {
+        console.log(`No .js files to minify in ${filePath}`)
+      }
+    }
+  }
+
+  await minifyJsFilesInDir(scriptsDir)
+}
--- a/config/plugins/css-config.js
+++ b/config/plugins/css-config.js
@ -0,0 +1,33 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import postcss from 'postcss'
+import postcssImport from 'postcss-import'
+import postcssImportExtGlob from 'postcss-import-ext-glob'
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+
+export const cssConfig = (eleventyConfig) => {
+  eleventyConfig.addTemplateFormats('css')
+  eleventyConfig.addExtension('css', {
+    outputFileExtension: 'css',
+    compile: async (inputContent, inputPath) => {
+      const outputPath = '_site/assets/css/index.css'
+
+      if (inputPath.endsWith('index.css')) {
+        return async () => {
+          let result = await postcss([
+            postcssImportExtGlob,
+            postcssImport,
+            autoprefixer,
+            cssnano,
+          ]).process(inputContent, { from: inputPath })
+
+          await fs.mkdir(path.dirname(outputPath), { recursive: true })
+          await fs.writeFile(outputPath, result.css)
+
+          return result.css
+        }
+      }
+    },
+  })
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "1.4.0",
+  "version": "1.3.0",
  "description": "The source for my personal site. Built using 11ty (and other tools).",
  "type": "module",
  "engines": {
@ -38,12 +38,14 @@
  "devDependencies": {
    "@11ty/eleventy": "v3.0.0",
    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "@11ty/eleventy-plugin-vite": "5.0.0",
    "@cdransf/eleventy-plugin-tabler-icons": "^2.0.3",
    "@supabase/supabase-js": "^2.45.5",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
    "dotenv-flow": "^4.1.0",
    "express": "4.21.1",
    "fast-xml-parser": "^4.5.0",
+    "html-minifier-terser": "^7.2.0",
    "html-to-text": "^9.0.5",
    "ics": "^3.8.1",
    "linkedom": "0.18.5",
@ -52,9 +54,12 @@
    "markdown-it-anchor": "^9.2.0",
    "markdown-it-footnote": "^4.0.0",
    "markdown-it-prism": "^2.3.0",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
+    "postcss-import-ext-glob": "^2.1.1",
    "rimraf": "^6.0.1",
    "slugify": "^1.6.6",
-    "truncate-html": "^1.1.2",
-    "vite-plugin-minify": "2.0.0"
+    "terser": "^5.36.0",
+    "truncate-html": "^1.1.2"
  }
 }
--- a/scripts/install-components.mjs
+++ b/scripts/install-components.mjs
@ -1,31 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const components = [
-  { src: '@cdransf/api-text/api-text.js', dest: 'api-text.js' },
-  { src: '@cdransf/select-pagination/select-pagination.js', dest: 'select-pagination.js' },
-  { src: '@daviddarnes/mastodon-post/mastodon-post.js', dest: 'mastodon-post.js' },
-  { src: 'minisearch/dist/es/index.js', dest: 'mini-search.js' },
-  { src: '@cdransf/theme-toggle/theme-toggle.js', dest: 'theme-toggle.js' },
-  { src: 'youtube-video-element/youtube-video-element.js', dest: 'youtube-video-element.js' }
-]
-
-const destDir = path.resolve(__dirname, '../src/assets/js/components')
-
-if (!fs.existsSync(destDir)) {
-  fs.mkdirSync(destDir, { recursive: true })
-  console.log(`Created directory: ${destDir}`)
-}
-
-components.forEach(({ src, dest }) => {
-  const srcPath = path.resolve(__dirname, '../node_modules', src)
-  const destPath = path.join(destDir, dest)
-
-  fs.copyFile(srcPath, destPath, err => {
-    if (err) console.error(`Failed to copy ${src}:`, err)
-    else console.log(`Copied ${src} to ${destPath}`)
-  })
-})
--- a/src/assets/js/components/api-text.js
+++ b/src/assets/js/components/api-text.js
@ -1,69 +0,0 @@
-class ApiText extends HTMLElement {
-  static tagName = 'api-text'
-
-  static register(tagName = this.tagName, registry = globalThis.customElements) {
-    registry.define(tagName, this)
-  }
-
-  static attr = {
-    url: 'api-url',
-  }
-
-  get url() {
-    return this.getAttribute(ApiText.attr.url) || ''
-  }
-
-  async connectedCallback() {
-    if (this.shadowRoot) return
-
-    this.attachShadow({ mode: 'open' }).appendChild(document.createElement('slot'))
-
-    const loading = this.querySelector('.loading')
-    const content = this.querySelector('.content')
-    const cacheKey = this.url || 'api-text-cache'
-    const cache = sessionStorage?.getItem(cacheKey)
-    const noscriptContent = this.querySelector('noscript')?.innerHTML.trim() || ''
-
-    const loadText = (string) => {
-      if (!string) {
-        if (noscriptContent) {
-          content.innerHTML = noscriptContent
-          loading.style.display = 'none'
-          content.style.display = 'block'
-        } else {
-          this.style.display = 'none'
-        }
-        return
-      }
-      loading.style.display = 'none'
-      content.style.display = 'block'
-      content.innerHTML = string
-    }
-
-    if (cache) {
-      loadText(JSON.parse(cache))
-    } else {
-      loading.style.display = 'block'
-      content.style.display = 'none'
-    }
-
-    try {
-      const data = await this.data
-      const value = data.content
-      if (value) {
-        loadText(value)
-        sessionStorage?.setItem(cacheKey, JSON.stringify(value))
-      } else {
-        loadText('')
-      }
-    } catch (error) {
-      loadText('')
-    }
-  }
-
-  get data() {
-    return fetch(this.url).then(response => response.json()).catch(() => ({}))
-  }
-}
-
-ApiText.register()
--- a/src/assets/js/components/mastodon-post.js
+++ b/src/assets/js/components/mastodon-post.js
@ -1,115 +0,0 @@
-const mastodonPostTemplate = document.createElement("template");
-
-mastodonPostTemplate.innerHTML = `
-<figure>
-  <blockquote data-key="content"></blockquote>
-  <figcaption>
-    <cite>
-      <a data-key="url"><span data-key="username"></span>@<span data-key="hostname"></span></a>
-    </cite>
-    <dl>
-      <dt>Reposts</dt><dd data-key="reblogs_count"></dd>
-      <dt>Replies</dt><dd data-key="replies_count"></dd>
-      <dt>Favourites</dt><dd data-key="favourites_count"></dd>
-    </dl>
-  </figcaption>
-</figure>
-`;
-
-mastodonPostTemplate.id = "mastodon-post-template";
-
-if (!document.getElementById(mastodonPostTemplate.id)) {
-  document.body.appendChild(mastodonPostTemplate);
-}
-
-class MastodonPost extends HTMLElement {
-  static register(tagName) {
-    if ("customElements" in window) {
-      customElements.define(tagName || "mastodon-post", MastodonPost);
-    }
-  }
-
-  async connectedCallback() {
-    this.append(this.template);
-
-    const data = { ...(await this.data), ...this.linkData };
-
-    this.slots.forEach((slot) => {
-      slot.dataset.key.split(",").forEach((keyItem) => {
-        const value = this.getValue(keyItem, data);
-        if (keyItem === "content") {
-          slot.innerHTML = value;
-        } else {
-          this.populateSlot(slot, value);
-        }
-      });
-    });
-  }
-
-  populateSlot(slot, value) {
-    if (typeof value == "string" && value.startsWith("http")) {
-      if (slot.localName === "img") slot.src = value;
-      if (slot.localName === "a") slot.href = value;
-    } else {
-      slot.textContent = value;
-    }
-  }
-
-  handleKey(object, key) {
-    const parsedKeyInt = parseFloat(key);
-
-    if (Number.isNaN(parsedKeyInt)) {
-      return object[key];
-    }
-
-    return object[parsedKeyInt];
-  }
-
-  getValue(string, data) {
-    let keys = string.trim().split(/\.|\[|\]/g);
-    keys = keys.filter((string) => string.length);
-
-    const value = keys.reduce(
-      (object, key) => this.handleKey(object, key),
-      data
-    );
-    return value;
-  }
-
-  get template() {
-    return document
-      .getElementById(
-        this.getAttribute("template") || `${this.localName}-template`
-      )
-      .content.cloneNode(true);
-  }
-
-  get slots() {
-    return this.querySelectorAll("[data-key]");
-  }
-
-  get link() {
-    return this.querySelector("a").href;
-  }
-
-  get linkData() {
-    const url = new URL(this.link);
-    const paths = url.pathname.split("/").filter((string) => string.length);
-    return {
-      url: this.link,
-      hostname: url.hostname,
-      username: paths.find((path) => path.startsWith("@")),
-      postId: paths.find((path) => !path.startsWith("@"))
-    };
-  }
-
-  get endpoint() {
-    return `https://${this.linkData.hostname}/api/v1/statuses/${this.linkData.postId}`;
-  }
-
-  get data() {
-    return fetch(this.endpoint).then((response) => response.json());
-  }
-}
-
-MastodonPost.register();
--- a/src/assets/js/components/mini-search.js
+++ b/src/assets/js/components/mini-search.js
--- a/src/assets/js/components/select-pagination.js
+++ b/src/assets/js/components/select-pagination.js
@ -1,48 +0,0 @@
-class SelectPagination extends HTMLElement {
-  static register(tagName = 'select-pagination') {
-    if ("customElements" in window) customElements.define(tagName, this)
-  }
-
-  static get observedAttributes() {
-    return ['data-base-index']
-  }
-
-  get baseIndex() {
-    return this.getAttribute('data-base-index') || 0
-  }
-
-  connectedCallback() {
-    if (this.shadowRoot) return
-
-    this.attachShadow({ mode: 'open' }).appendChild(document.createElement('slot'))
-
-    const uriSegments = window.location.pathname.split('/').filter(Boolean)
-    let pageNumber = this.extractPageNumber(uriSegments) || 0
-
-    this.control = this.querySelector('select')
-    this.control.value = pageNumber
-    this.control.addEventListener('change', (event) => {
-      pageNumber = parseInt(event.target.value)
-      const updatedUrlSegments = this.updateUrlSegments(uriSegments, pageNumber)
-      window.location.href = `${window.location.origin}/${updatedUrlSegments.join('/')}`
-    })
-  }
-
-  extractPageNumber(segments) {
-    const lastSegment = segments[segments.length - 1]
-    return !isNaN(lastSegment) ? parseInt(lastSegment) : null
-  }
-
-  updateUrlSegments(segments, pageNumber) {
-    if (!isNaN(segments[segments.length - 1])) {
-      segments[segments.length - 1] = pageNumber.toString()
-    } else {
-      segments.push(pageNumber.toString())
-    }
-
-    if (pageNumber === parseInt(this.baseIndex)) segments.pop()
-    return segments
-  }
-}
-
-SelectPagination.register()
--- a/src/assets/js/components/theme-toggle.js
+++ b/src/assets/js/components/theme-toggle.js
@ -1,45 +0,0 @@
-class ThemeToggle extends HTMLElement {
-  static tagName = 'theme-toggle'
-
-  static register(tagName = this.tagName, registry = globalThis.customElements) {
-    registry.define(tagName, this)
-  }
-
-  connectedCallback() {
-    if (this.shadowRoot) return
-    this.attachShadow({ mode: 'open' }).appendChild(document.createElement('slot'))
-    this.root = document.documentElement
-    this.button = this.querySelector('button')
-    this.prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
-    this.currentTheme = sessionStorage.getItem('theme')
-
-    this.setTheme()
-
-    this.button.addEventListener('click', () => this.toggleTheme())
-    this.prefersDarkScheme.addEventListener('change', (event) => this.onPreferredColorSchemeChange(event))
-  }
-
-  setTheme() {
-    if (!this.currentTheme) {
-      this.currentTheme = this.prefersDarkScheme.matches ? 'dark' : 'light'
-    }
-
-    this.theme = this.currentTheme
-    this.root.setAttribute('data-theme', this.theme)
-  }
-
-  toggleTheme() {
-    this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark'
-    sessionStorage.setItem('theme', this.currentTheme)
-    this.setTheme()
-  }
-
-  onPreferredColorSchemeChange(event) {
-    if (!sessionStorage.getItem('theme')) {
-      this.currentTheme = event.matches ? 'dark' : 'light'
-      this.setTheme()
-    }
-  }
-}
-
-ThemeToggle.register()
--- a/src/assets/js/components/youtube-video-element.js
+++ b/src/assets/js/components/youtube-video-element.js
@ -1,547 +0,0 @@
-// https://developers.google.com/youtube/iframe_api_reference
-
-const EMBED_BASE = 'https://www.youtube.com/embed';
-const API_URL = 'https://www.youtube.com/iframe_api';
-const API_GLOBAL = 'YT';
-const API_GLOBAL_READY = 'onYouTubeIframeAPIReady';
-const MATCH_SRC =
-  /(?:youtu\.be\/|youtube\.com\/(?:shorts\/|embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})/;
-
-function getTemplateHTML(attrs) {
-  const iframeAttrs = {
-    src: serializeIframeUrl(attrs),
-    frameborder: 0,
-    width: '100%',
-    height: '100%',
-    allow: 'accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture',
-  };
-
-  return /*html*/`
-    <style>
-      :host {
-        display: inline-block;
-        line-height: 0;
-        position: relative;
-        min-width: 300px;
-        min-height: 150px;
-      }
-      iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-    </style>
-    <iframe${serializeAttributes(iframeAttrs)}></iframe>
-  `;
-}
-
-function serializeIframeUrl(attrs) {
-  if (!attrs.src) return;
-
-  const matches = attrs.src.match(MATCH_SRC);
-  const srcId = matches && matches[1];
-
-  const params = {
-    // ?controls=true is enabled by default in the iframe
-    controls: attrs.controls === '' ? null : 0,
-    autoplay: attrs.autoplay,
-    loop: attrs.loop,
-    mute: attrs.muted,
-    playsinline: attrs.playsinline,
-    preload: attrs.preload ?? 'metadata',
-    // origin: globalThis.location?.origin,
-    enablejsapi: 1,
-    showinfo: 0,
-    rel: 0,
-    iv_load_policy: 3,
-    modestbranding: 1,
-  };
-
-  return `${EMBED_BASE}/${srcId}?${serialize(params)}`;
-}
-
-class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
-  static getTemplateHTML = getTemplateHTML;
-  static shadowRootOptions = { mode: 'open' };
-  static observedAttributes = [
-    'autoplay',
-    'controls',
-    'crossorigin',
-    'loop',
-    'muted',
-    'playsinline',
-    'poster',
-    'preload',
-    'src',
-  ];
-
-  loadComplete = new PublicPromise();
-  #loadRequested;
-  #hasLoaded;
-  #readyState = 0;
-  #seeking = false;
-  #seekComplete;
-  isLoaded = false;
-
-  async load() {
-    if (this.#loadRequested) return;
-
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-    }
-
-    if (this.#hasLoaded) {
-      this.loadComplete = new PublicPromise();
-      this.isLoaded = false;
-    }
-    this.#hasLoaded = true;
-
-    // Wait 1 tick to allow other attributes to be set.
-    await (this.#loadRequested = Promise.resolve());
-    this.#loadRequested = null;
-
-    this.#readyState = 0;
-    this.dispatchEvent(new Event('emptied'));
-
-    let oldApi = this.api;
-    this.api = null;
-
-    if (!this.src) {
-      // Removes the <iframe> containing the player.
-      oldApi?.destroy();
-      return;
-    }
-
-    this.dispatchEvent(new Event('loadstart'));
-
-    let iframe = this.shadowRoot.querySelector('iframe');
-    let attrs = namedNodeMapToObject(this.attributes);
-
-    if (!iframe?.src || iframe.src !== serializeIframeUrl(attrs)) {
-      this.shadowRoot.innerHTML = getTemplateHTML(attrs);
-      iframe = this.shadowRoot.querySelector('iframe');
-    }
-
-    const YT = await loadScript(API_URL, API_GLOBAL, API_GLOBAL_READY);
-    this.api = new YT.Player(iframe, {
-      events: {
-        onReady: () => {
-          this.#readyState = 1; // HTMLMediaElement.HAVE_METADATA
-          this.dispatchEvent(new Event('loadedmetadata'));
-          this.dispatchEvent(new Event('durationchange'));
-          this.dispatchEvent(new Event('volumechange'));
-          this.dispatchEvent(new Event('loadcomplete'));
-          this.isLoaded = true;
-          this.loadComplete.resolve();
-        },
-        onError: (error) => console.error(error),
-      },
-    });
-
-    /* onStateChange
-      -1 (unstarted)
-      0 (ended)
-      1 (playing)
-      2 (paused)
-      3 (buffering)
-      5 (video cued).
-    */
-
-    let playFired = false;
-    this.api.addEventListener('onStateChange', (event) => {
-      const state = event.data;
-      if (
-        state === YT.PlayerState.PLAYING ||
-        state === YT.PlayerState.BUFFERING
-      ) {
-        if (!playFired) {
-          playFired = true;
-          this.dispatchEvent(new Event('play'));
-        }
-      }
-
-      if (state === YT.PlayerState.PLAYING) {
-        if (this.seeking) {
-          this.#seeking = false;
-          this.#seekComplete?.resolve();
-          this.dispatchEvent(new Event('seeked'));
-        }
-        this.#readyState = 3; // HTMLMediaElement.HAVE_FUTURE_DATA
-        this.dispatchEvent(new Event('playing'));
-      } else if (state === YT.PlayerState.PAUSED) {
-        const diff = Math.abs(this.currentTime - lastCurrentTime);
-        if (!this.seeking && diff > 0.1) {
-          this.#seeking = true;
-          this.dispatchEvent(new Event('seeking'));
-        }
-        playFired = false;
-        this.dispatchEvent(new Event('pause'));
-      }
-      if (state === YT.PlayerState.ENDED) {
-        playFired = false;
-        this.dispatchEvent(new Event('pause'));
-        this.dispatchEvent(new Event('ended'));
-
-        if (this.loop) {
-          this.play();
-        }
-      }
-    });
-
-    this.api.addEventListener('onPlaybackRateChange', () => {
-      this.dispatchEvent(new Event('ratechange'));
-    });
-
-    this.api.addEventListener('onVolumeChange', () => {
-      this.dispatchEvent(new Event('volumechange'));
-    });
-
-    this.api.addEventListener('onVideoProgress', () => {
-      this.dispatchEvent(new Event('timeupdate'));
-    });
-
-    await this.loadComplete;
-
-    let lastCurrentTime = 0;
-    setInterval(() => {
-      const diff = Math.abs(this.currentTime - lastCurrentTime);
-      const bufferedEnd = this.buffered.end(this.buffered.length - 1);
-      if (this.seeking && bufferedEnd > 0.1) {
-        this.#seeking = false;
-        this.#seekComplete?.resolve();
-        this.dispatchEvent(new Event('seeked'));
-      } else if (!this.seeking && diff > 0.1) {
-        this.#seeking = true;
-        this.dispatchEvent(new Event('seeking'));
-      }
-      lastCurrentTime = this.currentTime;
-    }, 50);
-
-    let lastBufferedEnd;
-    const progressInterval = setInterval(() => {
-      const bufferedEnd = this.buffered.end(this.buffered.length - 1);
-      if (bufferedEnd >= this.duration) {
-        clearInterval(progressInterval);
-        this.#readyState = 4; // HTMLMediaElement.HAVE_ENOUGH_DATA
-      }
-      if (lastBufferedEnd != bufferedEnd) {
-        lastBufferedEnd = bufferedEnd;
-        this.dispatchEvent(new Event('progress'));
-      }
-    }, 100);
-  }
-
-  async attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue === newValue) return;
-
-    // This is required to come before the await for resolving loadComplete.
-    switch (attrName) {
-      case 'src':
-      case 'autoplay':
-      case 'controls':
-      case 'loop':
-      case 'playsinline': {
-        this.load();
-      }
-    }
-  }
-
-  async play() {
-    this.#seekComplete = null;
-    await this.loadComplete;
-    // yt.playVideo doesn't return a play promise.
-    this.api?.playVideo();
-    return createPlayPromise(this);
-  }
-
-  async pause() {
-    await this.loadComplete;
-    return this.api?.pauseVideo();
-  }
-
-  get seeking() {
-    return this.#seeking;
-  }
-
-  get readyState() {
-    return this.#readyState;
-  }
-
-  // If the getter from SuperVideoElement is overridden, it's required to define
-  // the setter again too unless it's a read only property! It's a JS thing.
-
-  get src() {
-    return this.getAttribute('src');
-  }
-
-  set src(val) {
-    if (this.src == val) return;
-    this.setAttribute('src', val);
-  }
-
-  /* onStateChange
-    -1 (unstarted)
-    0 (ended)
-    1 (playing)
-    2 (paused)
-    3 (buffering)
-    5 (video cued).
-  */
-
-  get paused() {
-    if (!this.isLoaded) return !this.autoplay;
-    return [-1, 0, 2, 5].includes(this.api?.getPlayerState?.());
-  }
-
-  get duration() {
-    return this.api?.getDuration?.() ?? NaN;
-  }
-
-  get autoplay() {
-    return this.hasAttribute('autoplay');
-  }
-
-  set autoplay(val) {
-    if (this.autoplay == val) return;
-    this.toggleAttribute('autoplay', Boolean(val));
-  }
-
-  get buffered() {
-    if (!this.isLoaded) return createTimeRanges();
-    const progress =
-      this.api?.getVideoLoadedFraction() * this.api?.getDuration();
-    if (progress > 0) {
-      return createTimeRanges(0, progress);
-    }
-    return createTimeRanges();
-  }
-
-  get controls() {
-    return this.hasAttribute('controls');
-  }
-
-  set controls(val) {
-    if (this.controls == val) return;
-    this.toggleAttribute('controls', Boolean(val));
-  }
-
-  get currentTime() {
-    return this.api?.getCurrentTime?.() ?? 0;
-  }
-
-  set currentTime(val) {
-    if (this.currentTime == val) return;
-    this.#seekComplete = new PublicPromise();
-    this.loadComplete.then(() => {
-      this.api?.seekTo(val, true);
-      if (this.paused) {
-        this.#seekComplete?.then(() => {
-          if (!this.#seekComplete) return;
-          this.api?.pauseVideo();
-        });
-      }
-    });
-  }
-
-  set defaultMuted(val) {
-    if (this.defaultMuted == val) return;
-    this.toggleAttribute('muted', Boolean(val));
-  }
-
-  get defaultMuted() {
-    return this.hasAttribute('muted');
-  }
-
-  get loop() {
-    return this.hasAttribute('loop');
-  }
-
-  set loop(val) {
-    if (this.loop == val) return;
-    this.toggleAttribute('loop', Boolean(val));
-  }
-
-  set muted(val) {
-    if (this.muted == val) return;
-    this.loadComplete.then(() => {
-      val ? this.api?.mute() : this.api?.unMute();
-    });
-  }
-
-  get muted() {
-    if (!this.isLoaded) return this.defaultMuted;
-    return this.api?.isMuted?.();
-  }
-
-  get playbackRate() {
-    return this.api?.getPlaybackRate?.() ?? 1;
-  }
-
-  set playbackRate(val) {
-    if (this.playbackRate == val) return;
-    this.loadComplete.then(() => {
-      this.api?.setPlaybackRate(val);
-    });
-  }
-
-  get playsInline() {
-    return this.hasAttribute('playsinline');
-  }
-
-  set playsInline(val) {
-    if (this.playsInline == val) return;
-    this.toggleAttribute('playsinline', Boolean(val));
-  }
-
-  get poster() {
-    return this.getAttribute('poster');
-  }
-
-  set poster(val) {
-    if (this.poster == val) return;
-    this.setAttribute('poster', `${val}`);
-  }
-
-  set volume(val) {
-    if (this.volume == val) return;
-    this.loadComplete.then(() => {
-      this.api?.setVolume(val * 100);
-    });
-  }
-
-  get volume() {
-    if (!this.isLoaded) return 1;
-    return this.api?.getVolume() / 100;
-  }
-}
-
-function serializeAttributes(attrs) {
-  let html = '';
-  for (const key in attrs) {
-    const value = attrs[key];
-    if (value === '') html += ` ${key}`;
-    else html += ` ${key}="${value}"`;
-  }
-  return html;
-}
-
-function serialize(props) {
-  return String(new URLSearchParams(boolToBinary(props)));
-}
-
-function boolToBinary(props) {
-  let p = {};
-  for (let key in props) {
-    let val = props[key];
-    if (val === true || val === '') p[key] = 1;
-    else if (val === false) p[key] = 0;
-    else if (val != null) p[key] = val;
-  }
-  return p;
-}
-
-function namedNodeMapToObject(namedNodeMap) {
-  let obj = {};
-  for (let attr of namedNodeMap) {
-    obj[attr.name] = attr.value;
-  }
-  return obj;
-}
-
-const loadScriptCache = {};
-async function loadScript(src, globalName, readyFnName) {
-  if (loadScriptCache[src]) return loadScriptCache[src];
-  if (globalName && self[globalName]) {
-    await delay(0);
-    return self[globalName];
-  }
-  return (loadScriptCache[src] = new Promise(function (resolve, reject) {
-    const script = document.createElement('script');
-    script.src = src;
-    const ready = () => resolve(self[globalName]);
-    if (readyFnName) (self[readyFnName] = ready);
-    script.onload = () => !readyFnName && ready();
-    script.onerror = reject;
-    document.head.append(script);
-  }));
-}
-
-const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-function promisify(fn) {
-  return (...args) =>
-    new Promise((resolve) => {
-      fn(...args, (...res) => {
-        if (res.length > 1) resolve(res);
-        else resolve(res[0]);
-      });
-    });
-}
-
-function createPlayPromise(player) {
-  return promisify((event, cb) => {
-    let fn;
-    player.addEventListener(
-      event,
-      (fn = () => {
-        player.removeEventListener(event, fn);
-        cb();
-      })
-    );
-  })('playing');
-}
-
-/**
- * A utility to create Promises with convenient public resolve and reject methods.
- * @return {Promise}
- */
-class PublicPromise extends Promise {
-  constructor(executor = () => {}) {
-    let res, rej;
-    super((resolve, reject) => {
-      executor(resolve, reject);
-      res = resolve;
-      rej = reject;
-    });
-    this.resolve = res;
-    this.reject = rej;
-  }
-}
-
-/**
- * Creates a fake `TimeRanges` object.
- *
- * A TimeRanges object. This object is normalized, which means that ranges are
- * ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are
- * folded into one bigger range).
- *
- * @param  {(Number|Array)} Start of a single range or an array of ranges
- * @param  {Number} End of a single range
- * @return {Array}
- */
-function createTimeRanges(start, end) {
-  if (Array.isArray(start)) {
-    return createTimeRangesObj(start);
-  } else if (start == null || end == null || (start === 0 && end === 0)) {
-    return createTimeRangesObj([[0, 0]]);
-  }
-  return createTimeRangesObj([[start, end]]);
-}
-
-function createTimeRangesObj(ranges) {
-  Object.defineProperties(ranges, {
-    start: {
-      value: i => ranges[i][0]
-    },
-    end: {
-      value: i => ranges[i][1]
-    }
-  });
-  return ranges;
-}
-
-if (globalThis.customElements && !globalThis.customElements.get('youtube-video')) {
-  globalThis.customElements.define('youtube-video', YoutubeVideoElement);
-}
-
-export default YoutubeVideoElement;
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@ -1,5 +1,3 @@
-import MiniSearch from './components/mini-search.js'
-
 window.addEventListener('load', () => {
  // menu keyboard controls
  ;(() => {
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
--- a/src/assets/styles/components/mastodon-post.css
+++ b/src/assets/styles/components/mastodon-post.css
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
--- a/src/assets/styles/components/paginator.css
+++ b/src/assets/styles/components/paginator.css
--- a/src/assets/styles/components/progress-bar.css
+++ b/src/assets/styles/components/progress-bar.css
--- a/src/assets/styles/components/tab-buttons.css
+++ b/src/assets/styles/components/tab-buttons.css
--- a/src/assets/styles/components/text-toggle.css
+++ b/src/assets/styles/components/text-toggle.css
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
--- a/src/assets/styles/defaults/fonts.css
+++ b/src/assets/styles/defaults/fonts.css
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
--- a/src/assets/styles/feed.xsl
+++ b/src/assets/styles/feed.xsl
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
--- a/src/assets/styles/pages/articles.css
+++ b/src/assets/styles/pages/articles.css
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
--- a/src/assets/styles/pages/feeds.css
+++ b/src/assets/styles/pages/feeds.css
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
--- a/src/assets/styles/reset.css
+++ b/src/assets/styles/reset.css
--- a/src/assets/styles/styles.json
+++ b/src/assets/styles/styles.json
--- a/src/includes/base.liquid
+++ b/src/includes/base.liquid
@ -56,9 +56,9 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title data-dynamic="title">{{ pageTitle }}</title>
-    <link rel="preload" href="/css/ml.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-    <link rel="preload" href="/css/mlb.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-    <link rel="stylesheet" href="/assets/css/index.css" type="text/css" />
+    <link rel="preload" href="/assets/fonts/ml.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="/assets/fonts/mlb.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
    <link rel="canonical" href="{{ fullUrl }}" />
    <meta property="og:title" content="{{ pageTitle }}" data-dynamic="og:title" />
    <meta name="description" content="{{ escapedPageDescription }}" data-dynamic="description" />
@ -70,17 +70,17 @@
    <meta name="fediverse:creator" content="{{ globals.mastodon }}" />
    <meta name="generator" content="Eleventy">
    <meta name="robots" content="noai, noimageai">
-    <link href="{{ globals.cdn_url }}{{ globals.avatar_transparent }}?class=w50" rel="icon" sizes="any">
-    <link href="{{ globals.cdn_url }}{{ globals.avatar_transparent }}?class=w50&type=svg" rel="icon" type="image/svg+xml">
-    <link href="{{ globals.cdn_url }}{{ globals.avatar }}?class=w800" rel="apple-touch-icon">
+    <link href="{{ globals.cdn_url }}{{ globals.avatar_transparent }}?class=w50&v={% appVersion %}" rel="icon" sizes="any">
+    <link href="{{ globals.cdn_url }}{{ globals.avatar_transparent }}?class=w50&v={% appVersion %}&type=svg" rel="icon" type="image/svg+xml">
+    <link href="{{ globals.cdn_url }}{{ globals.avatar }}?class=w800&v={% appVersion %}" rel="apple-touch-icon">
    <link type="application/atom+xml" rel="alternate" title="Posts / {{ globals.site_name }}" href="https://coryd.dev/feeds/posts">
    <link rel="alternate" href="https://coryd.dev/feeds/links" title="Links / {{ globals.site_name }}" type="application/rss+xml">
    <link rel="alternate" href="https://coryd.dev/feeds/movies" title="Movies / {{ globals.site_name }}'s movies feed" type="application/rss+xml">
    <link rel="alternate" href="https://coryd.dev/feeds/books" title="Books / {{ globals.site_name }}" type="application/rss+xml">
    <link rel="alternate" href="https://coryd.dev/feeds/album-releases" title="Album releases / {{ globals.site_name }}" type="application/rss+xml">
    <link rel="alternate" href="https://coryd.dev/feeds/all" title="All activity / {{ globals.site_name }}" type="application/rss+xml">
-    <script type="module" defer src="/assets/index.js"></script>
-    <script type="module" defer data-domain="coryd.dev" src="/js/script.js"></script>
+    <script defer src="/assets/scripts/index.js?v={% appVersion %}"></script>
+    <script defer data-domain="coryd.dev" src="/js/script.js"></script>
    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
    <noscript>
      <style>.client-side {display:none}</style>
--- a/src/includes/partials/blocks/mastodon-post.liquid
+++ b/src/includes/partials/blocks/mastodon-post.liquid
@ -1,4 +1,5 @@
 {%- if post -%}
+<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
 <template id="mastodon-post-template">
  <div class="mastodon-post-wrapper">
    <blockquote data-key="content"></blockquote>
--- a/src/includes/partials/blocks/now-playing.liquid
+++ b/src/includes/partials/blocks/now-playing.liquid
@ -1,3 +1,4 @@
+<script type="module" src="/assets/scripts/components/api-text.js?v={% appVersion %}" crossorigin="anonymous"></script>
 <api-text api-url="/api/now-playing">
  <p class="loading client-side">{{ nowPlaying }}</p>
  <p class="content"></p>
--- a/src/includes/partials/blocks/youtube-player.liquid
+++ b/src/includes/partials/blocks/youtube-player.liquid
@ -1,2 +1,3 @@
+<script type="module" src="/assets/scripts/components/youtube-video-element.js?v={% appVersion %}"></script>
 <style>youtube-video{aspect-ratio:16/9;width:100%}</style>
 <youtube-video controls src="{{ url }}"></youtube-video>
--- a/src/includes/partials/nav/paginator.liquid
+++ b/src/includes/partials/nav/paginator.liquid
@ -1,3 +1,4 @@
+<script type="module" src="/assets/scripts/components/select-pagination.js?v={% appVersion %}"></script>
 <nav aria-label="Pagination" class="pagination">
  {%- if pagination.href.previous -%}
    <a href="{{ pagination.href.previous }}" aria-label="Previous page">
--- a/src/includes/partials/nav/theme-toggle.liquid
+++ b/src/includes/partials/nav/theme-toggle.liquid
@ -1,3 +1,4 @@
+<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}" crossorigin="anonymous"></script>
 <span class="client-side">
  <theme-toggle>
    <button aria-label="Light and dark theme toggle" class="theme-toggle">
--- a/src/pages/feeds/json/all.liquid
+++ b/src/pages/feeds/json/all.liquid
@ -8,4 +8,5 @@ permalink: "/feeds/all.json"
  title:"All activity / Cory Dransfeldt"
  globals:globals
  data:activity
+  appVersion:appVersion
 %}
--- a/workers/dynamic-pages/utils/generators.js
+++ b/workers/dynamic-pages/utils/generators.js
@ -35,7 +35,7 @@ const generateAssociatedMediaHTML = (data, isGenre = false) => {
                const year = item.year ? ` (${item.year})` : ''
                const author = item.author ? ` by ${item.author}` : ''
                const totalPlays = item.total_plays
-                  ? ` <strong class="highlight-text">${item.total_plays} ${item.total_plays === 1 ? 'play' : 'plays'}</strong>`
+                  ? ` <strong class="highlight-text">${item.total_plays}</strong> ${item.total_plays === 1 ? 'play' : 'plays'}`
                  : ''
                let listItemContent = name