release v5.0.0

.cspell.json

@@ -17,13 +17,16 @@
     "changelogen",
     "changelogithub",
     "crosspost",
+    "frontmatter",
     "grotesk",
     "humanwhocodes",
     "joshuakgoldberg",
     "keyux",
     "libc",
     "lightningcss",
     "mdast",
+    "mdxjs",
+    "minisearch",
     "nanostores",
     "nocomment",
     "pcss",

astro.config.ts

@@ -56,21 +56,12 @@ export default defineConfig({
     ],
   },
   integrations: [
-    svelte({
-      compilerOptions: {
-        cssHash: ({ hash, css }) => `s-${hash(css)}`,
-        discloseVersion: false,
-      },
-    }),
+    svelte(),
     sitemap({
       filter: page => !new RegExp(`^${site}/guide$`, 'u').test(page),
     }),
     mdx(),
   ],
-  prefetch: {
-    defaultStrategy: 'viewport',
-    prefetchAll: true,
-  },
   build: {
     inlineStylesheets: 'always',
     format: 'file',
@@ -79,6 +70,9 @@ export default defineConfig({
     clientPrerender: true,
   },
   publicDir: path.join(dirname, './docs/public'),
+  prefetch: {
+    defaultStrategy: 'hover',
+  },
   server: {
     port: 3000,
     host: true,

docs/components/CodeTabs.svelte

@@ -42,7 +42,10 @@
 
   onMount(() => {
     mounted = true
-    startKeyUX(globalThis, [focusGroupKeyUX()])
+    let stop = startKeyUX(globalThis, [focusGroupKeyUX()])
+    return () => {
+      stop()
+    }
   })
 </script>
 

docs/components/Head.astro

@@ -140,7 +140,14 @@ let isProduction = import.meta.env.PROD
       localStorage.setItem('theme', theme)
     }
     initialize()
-    document.addEventListener('astro:after-swap', initialize)
+    let handlerKey = '__perfectionistThemeAfterSwap__'
+    if (!globalThis[handlerKey]) {
+      let handleAfterSwap = () => {
+        initialize()
+      }
+      document.addEventListener('astro:after-swap', handleAfterSwap)
+      globalThis[handlerKey] = handleAfterSwap
+    }
   </script>
 
   <ClientRouter />

docs/components/Header.astro

@@ -2,6 +2,7 @@
 import SkipToContent from './SkipToContent.astro'
 import Navigation from './Navigation.astro'
 import IconMenu from '../icons/menu.svg'
+import Search from './Search.svelte'
 import Logo from './Logo.astro'
 
 interface Props {
@@ -27,49 +28,92 @@ let { border = false } = Astro.props
       <span class="title">Perfectionist</span>
     </a>
   </div>
+  <Search client:load />
   <Navigation />
 </header>
 
 <script>
   import { toggleMenu } from '../stores/menu-open'
 
-  let initMenu = () => {
-    document
-      .getElementById('menu-button')!
-      .addEventListener('click', toggleMenu)
+  let menuController: AbortController | undefined
+  let scrollController: AbortController | undefined
+
+  let cleanup = () => {
+    menuController?.abort()
+    scrollController?.abort()
+    menuController = undefined
+    scrollController = undefined
   }
 
-  document.addEventListener('astro:after-swap', initMenu)
-  initMenu()
-</script>
+  let setupMenu = () => {
+    let menuButton = document.getElementById('menu-button')
+    if (!menuButton) {
+      return
+    }
 
-<script>
-  let initHeader = () => {
-    let header = document.querySelector('.header')!
-
-    document.addEventListener('scroll', () => {
-      let { scrollY } = globalThis
-
-      if (!header.classList.contains('border')) {
-        if (scrollY > 24) {
-          header.classList.add('scroll')
-        } else {
-          header.classList.remove('scroll')
-        }
+    menuController = new AbortController()
+    menuButton.addEventListener('click', toggleMenu, {
+      signal: menuController.signal,
+    })
+  }
+
+  let setupScroll = () => {
+    let header = document.querySelector('.header')
+    if (!header) {
+      return
+    }
+
+    let handleScroll = () => {
+      if (header.classList.contains('border')) {
+        return
       }
+
+      header.classList.toggle('scroll', globalThis.scrollY > 24)
+    }
+
+    scrollController = new AbortController()
+    document.addEventListener('scroll', handleScroll, {
+      signal: scrollController.signal,
+      passive: true,
     })
+    handleScroll()
+  }
+
+  let scheduleNext = () => {
+    document.addEventListener(
+      'astro:before-swap',
+      () => {
+        cleanup()
+      },
+      { once: true },
+    )
+    document.addEventListener(
+      'astro:after-swap',
+      () => {
+        setup()
+      },
+      { once: true },
+    )
+  }
+
+  let setup = () => {
+    cleanup()
+    setupMenu()
+    setupScroll()
+    scheduleNext()
   }
 
-  document.addEventListener('astro:after-swap', initHeader)
-  initHeader()
+  setup()
 </script>
 
 <style>
   .header {
     position: sticky;
     inset-block-start: 0;
     z-index: 2;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    gap: var(--space-m);
     align-items: center;
     justify-content: space-between;
     block-size: var(--header-block-size);

docs/components/HighlightText.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  let { terms, text }: { terms: string[]; text: string } = $props()
+
+  interface Chunk {
+    highlight: boolean
+    value: string
+  }
+
+  let chunks = $derived(createChunks(text, terms))
+
+  function createChunks(value: string, highlightTerms: string[]): Chunk[] {
+    if (!value) {
+      return []
+    }
+
+    let uniqueTerms = [
+      ...new Map(
+        highlightTerms.filter(Boolean).map(term => [term.toLowerCase(), term]),
+      ).values(),
+    ]
+
+    if (uniqueTerms.length === 0) {
+      return [{ highlight: false, value }]
+    }
+
+    uniqueTerms.sort((a, b) => b.length - a.length)
+
+    let escaped = uniqueTerms
+      .map(term => term.replaceAll(/[$()*+.?[\\\]^{|}]/gu, String.raw`\$&`))
+      .join('|')
+
+    let pattern = new RegExp(`(${escaped})`, 'giu')
+    let result: Chunk[] = []
+    let lastIndex = 0
+
+    value.replace(
+      pattern,
+      (match: string, _group: string, offset: number): string => {
+        if (offset > lastIndex) {
+          result.push({
+            value: value.slice(lastIndex, offset),
+            highlight: false,
+          })
+        }
+
+        result.push({
+          value: value.slice(offset, offset + match.length),
+          highlight: true,
+        })
+
+        lastIndex = offset + match.length
+        return match
+      },
+    )
+
+    if (lastIndex < value.length) {
+      result.push({
+        value: value.slice(lastIndex),
+        highlight: false,
+      })
+    }
+
+    return result
+  }
+</script>
+
+{#each chunks as chunk, index (index)}
+  {#if chunk.highlight}
+    <mark data-index={index}>{chunk.value}</mark>
+  {:else}
+    {chunk.value}
+  {/if}
+{/each}
+
+<style>
+  mark {
+    padding-inline: 1px;
+    color: inherit;
+    background: var(--color-overlay-brand);
+  }
+</style>

docs/components/Navigation.astro

@@ -49,19 +49,55 @@ import IconSun from '../icons/sun.svg'
 <script>
   import { toggleTheme } from '../stores/theme'
 
-  let initToggleTheme = () => {
-    document
-      .getElementById('toggle-theme')!
-      .addEventListener('click', toggleTheme)
+  let controller: AbortController | undefined
+
+  let cleanup = () => {
+    controller?.abort()
+    controller = undefined
+  }
+
+  let scheduleNext = () => {
+    document.addEventListener(
+      'astro:before-swap',
+      () => {
+        cleanup()
+      },
+      { once: true },
+    )
+    document.addEventListener(
+      'astro:after-swap',
+      () => {
+        setup()
+      },
+      { once: true },
+    )
   }
 
-  document.addEventListener('astro:after-swap', initToggleTheme)
-  initToggleTheme()
+  let setup = () => {
+    cleanup()
+
+    let toggleButton = document.getElementById('toggle-theme')
+    if (!toggleButton) {
+      scheduleNext()
+      return
+    }
+
+    controller = new AbortController()
+    toggleButton.addEventListener('click', toggleTheme, {
+      signal: controller.signal,
+    })
+
+    scheduleNext()
+  }
+
+  setup()
 </script>
 
 <style>
   .navigation {
     display: flex;
+    align-items: start;
+    justify-content: end;
   }
 
   .list {
@@ -105,6 +141,10 @@ import IconSun from '../icons/sun.svg'
     block-size: var(--size-icon-m);
   }
 
+  .item {
+    margin-block: 0;
+  }
+
   .hr,
   .item-text {
     display: none;
@@ -133,7 +173,7 @@ import IconSun from '../icons/sun.svg'
 
     .hr,
     .item-text {
-      display: block;
+      display: inline;
     }
   }
 </style>

docs/components/Portal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  function portal(node: HTMLElement): {
+    destroy(): void
+  } {
+    document.body.append(node)
+
+    return {
+      destroy() {
+        node.remove()
+      },
+    }
+  }
+</script>
+
+<div use:portal>
+  <slot />
+</div>