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",

.github/actions/install-dependencies/action.yml

@@ -9,7 +9,7 @@ runs:
         echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
     - name: Setup pnpm cache
-      uses: actions/cache@638ed79f9dc94c1de1baef91bcab5edaa19451f4 # v4.2.4
+      uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
       with:
         path: ${{ env.PNPM_STORE_PATH }}
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}

.github/actions/install-tools/action.yml

@@ -4,12 +4,12 @@ runs:
   using: composite
   steps:
     - name: Install Node
-      uses: actions/setup-node@d7a11313b581b306c961b506cfc8971208bb03f6 # v4.4.0
+      uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
       with:
         node-version: 24
 
     - name: Install pnpm
-      uses: pnpm/action-setup@f2b2b233b538f500472c7274c7012f57857d8ce0 # v4.1.0
+      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       with:
         version: 10
         run_install: false

.github/workflows/docs.yml

@@ -12,7 +12,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
         with:
           fetch-depth: 0
 
@@ -26,7 +26,7 @@ jobs:
         run: pnpm run docs:build
 
       - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@f242d4c9f946f94d2ed8413888eaf35e1f7e848d # v3.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: './dist'
           production-branch: main

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
         with:
           fetch-depth: 0
 

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -30,7 +30,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -47,7 +47,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -64,7 +64,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -81,7 +81,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -98,7 +98,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -115,7 +115,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -132,7 +132,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -149,7 +149,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Install Tools
         uses: ./.github/actions/install-tools
@@ -161,6 +161,6 @@ jobs:
         run: pnpm test:unit
 
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@3cb13a12348ef4ffcf9783ac0f74954f92113e33 # v5.5.0
+        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

astro.config.ts

@@ -19,15 +19,6 @@ let site = 'https://perfectionist.dev'
 
 export default defineConfig({
   markdown: {
-    shikiConfig: {
-      transformers: [
-        // @ts-ignore
-        transformerNotationDiff({
-          matchAlgorithm: 'v3',
-        }),
-      ],
-      theme: colorTheme,
-    },
     rehypePlugins: [
       [
         rehypeExternalLinks,
@@ -37,6 +28,14 @@ export default defineConfig({
         },
       ],
     ],
+    shikiConfig: {
+      transformers: [
+        transformerNotationDiff({
+          matchAlgorithm: 'v3',
+        }),
+      ],
+      theme: colorTheme,
+    },
     remarkPlugins: [remarkSectionize, remarkHeadings],
   },
   vite: {
@@ -56,29 +55,24 @@ 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',
   },
   experimental: {
     clientPrerender: true,
+    svgo: 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);