starlight-versions 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present, HiDeoo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+<div align="center">
+  <h1>starlight-versions 🕒</h1>
+  <p>Starlight plugin to version documentation pages.</p>
+</div>
+
+<div align="center">
+  <a href="https://github.com/HiDeoo/starlight-versions/actions/workflows/integration.yml">
+    <img alt="Integration Status" src="https://github.com/HiDeoo/starlight-versions/actions/workflows/integration.yml/badge.svg" />
+  </a>
+  <a href="https://github.com/HiDeoo/starlight-versions/blob/main/LICENSE">
+    <img alt="License" src="https://badgen.net/github/license/HiDeoo/starlight-versions" />
+  </a>
+  <br />
+</div>
+
+## Getting Started
+
+Want to get started immediately? Check out the [getting started guide](https://starlight-versions.vercel.app/getting-started/).
+
+> [!IMPORTANT]
+> Starlight Versions is an [opinionated](https://starlight-versions.vercel.app/guides/about-versioning/#versioning-strategies) plugin that is still in early development. Expect frequent updates and changes to the plugin as development continues.
+
+## License
+
+Licensed under the MIT License, Copyright © HiDeoo.
+
+See [LICENSE](https://github.com/HiDeoo/starlight-versions/blob/main/LICENSE) for more information.

package/components/VersionBanner.astro

@@ -0,0 +1,38 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import starlightConfig from 'virtual:starlight/user-config'
+import starlightVersionsConfig from 'virtual:starlight-versions-config'
+
+import { getVersionFromSlug, getVersionURL } from '../libs/versions'
+
+const { template } = Astro.props.entry['data']
+
+const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig, Astro.props.entry.slug)
+---
+
+{
+  pageVersion && template === 'splash' && (
+    <div>
+      This content is for {pageVersion.label ?? `the ${pageVersion.slug} version`}. Switch to the
+      {/* prettier-ignore */}
+      <a href={getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname}>latest version</a>
+      for up-to-date documentation.
+    </div>
+  )
+}
+
+<style>
+  div {
+    background-color: var(--sl-color-orange-low);
+    box-shadow: var(--sl-shadow-sm);
+    color: var(--sl-color-orange-high);
+    line-height: var(--sl-line-height-headings);
+    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  div a {
+    color: var(--sl-color-orange-high);
+  }
+</style>

package/components/VersionNotice.astro

@@ -0,0 +1,48 @@
+---
+import { Icon } from '@astrojs/starlight/components'
+import type { Props } from '@astrojs/starlight/props'
+import starlightConfig from 'virtual:starlight/user-config'
+import starlightVersionsConfig from 'virtual:starlight-versions-config'
+
+import { getVersionFromSlug, getVersionURL } from '../libs/versions'
+
+const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig, Astro.props.entry.slug)
+---
+
+{
+  pageVersion && (
+    <p>
+      <Icon name="seti:clock" size="1em" color="var(--sl-color-orange-high)" />
+      <span>
+        This content is for {pageVersion.label ?? `the ${pageVersion.slug} version`}. Switch to the
+        {/* prettier-ignore */}
+        <a href={getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname}>latest version</a>
+        for up-to-date documentation.
+      </span>
+    </p>
+  )
+}
+
+<style>
+  p {
+    display: flex;
+    border: 1px solid var(--sl-color-orange);
+    padding: 0.75em 1em;
+    background-color: var(--sl-color-orange-low);
+    color: var(--sl-color-orange-high);
+    width: max-content;
+    max-width: 100%;
+    align-items: center;
+    gap: 0.75em;
+    font-size: var(--sl-text-sm);
+    line-height: var(--sl-line-height-headings);
+  }
+
+  p a {
+    color: var(--sl-color-orange-high);
+  }
+
+  p :global(svg) {
+    flex-shrink: 0;
+  }
+</style>

package/components/VersionPagination.astro

@@ -0,0 +1,34 @@
+---
+import Default from '@astrojs/starlight/components/Pagination.astro'
+import type { Props } from '@astrojs/starlight/props'
+import starlightConfig from 'virtual:starlight/user-config'
+import starlightVersionsConfig from 'virtual:starlight-versions-config'
+
+import { getVersionFromPaginationLink, getVersionFromSlug } from '../libs/versions'
+import type { Version } from '../libs/versions'
+
+const { entry, locale, pagination } = Astro.props
+
+type PaginationLink = typeof Astro.props.pagination.next
+
+function getPaginationLink(currentVersion: Version | undefined, link: PaginationLink) {
+  if (!link) return undefined
+
+  const linkVersion = getVersionFromPaginationLink(starlightVersionsConfig, link.href, locale)
+
+  // If the current version is not the same as the link version, remove the link.
+  return (currentVersion === undefined && linkVersion === undefined) || currentVersion?.slug === linkVersion?.slug
+    ? link
+    : undefined
+}
+
+const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig, entry.slug)
+---
+
+<Default
+  {...Astro.props}
+  pagination={{
+    prev: getPaginationLink(pageVersion, pagination.prev),
+    next: getPaginationLink(pageVersion, pagination.next),
+  }}><slot /></Default
+>

package/components/VersionSearch.astro

@@ -0,0 +1,486 @@
+---
+/**
+ * A copy of the Starlight `<Search>` component with some modifications to handle versioning.
+ * @see https://github.com/withastro/starlight/blob/64288fb0051310f7148afd13f65c578664f04eb2/packages/starlight/components/Search.astro
+ */
+
+import { Icon } from '@astrojs/starlight/components'
+import type { Props } from '@astrojs/starlight/props'
+import '@pagefind/default-ui/css/ui.css'
+import project from 'virtual:starlight/project-context'
+import starlightConfig from 'virtual:starlight/user-config'
+import starlightVersionsConfig from 'virtual:starlight-versions-config'
+
+import { getVersionFromSlug, getVersionIdentifier, getVersionURL } from '../libs/versions'
+
+const { entry, labels } = Astro.props
+
+const pagefindTranslations = {
+  placeholder: labels['search.label'],
+  ...Object.fromEntries(
+    Object.entries(labels)
+      .filter(([key]) => key.startsWith('pagefind.'))
+      .map(([key, value]) => [key.replace('pagefind.', ''), value]),
+  ),
+}
+
+const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig, entry.slug)
+const pageVersionIdentifier = getVersionIdentifier(pageVersion)
+---
+
+<site-search
+  data-translations={JSON.stringify(pagefindTranslations)}
+  data-strip-trailing-slash={project.trailingSlash === 'never'}
+  data-version={pageVersionIdentifier}
+  data-pagefind-filter={`version:${pageVersionIdentifier}`}
+>
+  <button data-open-modal disabled>
+    <Icon name="magnifier" label={labels['search.label']} />
+    <span class="sl-hidden md:sl-block" aria-hidden="true">{labels['search.label']}</span>
+    <Icon name="forward-slash" class="sl-hidden md:sl-block" label={labels['search.shortcutLabel']} />
+  </button>
+
+  <dialog style="padding:0" aria-label={labels['search.label']}>
+    <div class="dialog-frame sl-flex">
+      <button data-close-modal class="sl-flex md:sl-hidden">
+        {labels['search.cancelLabel']}
+      </button>
+      {
+        import.meta.env.DEV ? (
+          <div style="margin: auto; text-align: center; white-space: pre-line;" dir="ltr">
+            <p>{labels['search.devWarning']}</p>
+          </div>
+        ) : (
+          <div class="search-container">
+            <div id="starlight__search">
+              {pageVersion && (
+                <div class="starlight-versions-pagefind-notice">
+                  <Icon name="seti:clock" size="1em" color="var(--sl-color-orange-high)" />
+                  <span>
+                    Search limited to {pageVersion.label ?? `the ${pageVersion.slug} version`}. Switch to the
+                    {/* prettier-ignore */}
+                    <a href={getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname}>latest version</a>
+                    for up-to-date results.
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        )
+      }
+    </div>
+  </dialog>
+</site-search>
+
+<script>
+  class SiteSearch extends HTMLElement {
+    constructor() {
+      super()
+      const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')
+      const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')
+      const dialog = this.querySelector('dialog')
+      const dialogFrame = this.querySelector('.dialog-frame')
+      if (!openBtn || !closeBtn || !dialog || !dialogFrame) return
+
+      /** Close the modal if a user clicks on a link or outside of the modal. */
+      const onClick = (event: MouseEvent) => {
+        const isLink = 'href' in (event.target || {})
+        if (isLink || (document.body.contains(event.target as Node) && !dialogFrame.contains(event.target as Node))) {
+          closeModal()
+        }
+      }
+
+      const openModal = (event?: MouseEvent) => {
+        dialog.showModal()
+        document.body.toggleAttribute('data-search-modal-open', true)
+        this.querySelector('input')?.focus()
+        event?.stopPropagation()
+        window.addEventListener('click', onClick)
+      }
+
+      const closeModal = () => dialog.close()
+
+      openBtn.addEventListener('click', openModal)
+      openBtn.disabled = false
+      closeBtn.addEventListener('click', closeModal)
+
+      dialog.addEventListener('close', () => {
+        document.body.toggleAttribute('data-search-modal-open', false)
+        window.removeEventListener('click', onClick)
+      })
+
+      // Listen for `/`, `ctrl + k`, and `cmd + k` keyboard shortcuts.
+      window.addEventListener('keydown', (e) => {
+        const isInput =
+          document.activeElement instanceof HTMLElement &&
+          (['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase()) ||
+            document.activeElement.isContentEditable)
+        if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+          dialog.open ? closeModal() : openModal()
+          e.preventDefault()
+        } else if (e.key === '/' && !dialog.open && !isInput) {
+          openModal()
+          e.preventDefault()
+        }
+      })
+
+      let translations = {}
+      try {
+        translations = JSON.parse(this.dataset['translations'] || '{}')
+      } catch {
+        // Ignore translation parsing errors.
+      }
+
+      const shouldStrip = this.dataset['stripTrailingSlash'] !== undefined
+      const formatURL = shouldStrip ? this.stripTrailingSlash : (path: string) => path
+      const version = this.dataset['version'] ?? 'current'
+
+      window.addEventListener('DOMContentLoaded', () => {
+        if (import.meta.env.DEV) return
+        const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1))
+        onIdle(async () => {
+          // @ts-expect-error — Missing types for @pagefind/default-ui package.
+          const { PagefindUI } = await import('@pagefind/default-ui')
+          const search = new PagefindUI({
+            element: '#starlight__search',
+            baseUrl: import.meta.env.BASE_URL,
+            bundlePath: `${import.meta.env.BASE_URL.replace(/\/$/, '')}/pagefind/`,
+            showImages: false,
+            translations,
+            showSubResults: true,
+            processResult: (result: { url: string; sub_results: { url: string }[] }) => {
+              result.url = formatURL(result.url)
+              result.sub_results = result.sub_results.map((sub_result) => {
+                sub_result.url = formatURL(sub_result.url)
+                return sub_result
+              })
+            },
+          })
+          search.triggerFilters({ version: [version] })
+        })
+      })
+    }
+
+    private stripTrailingSlash(path: string) {
+      return path.replace(/(.)\/(#.*)?$/, '$1$2')
+    }
+  }
+  customElements.define('site-search', SiteSearch)
+</script>
+
+<style>
+  site-search {
+    display: contents;
+  }
+  button[data-open-modal] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 0;
+    background-color: transparent;
+    color: var(--sl-color-gray-1);
+    cursor: pointer;
+    height: 2.5rem;
+    font-size: var(--sl-text-xl);
+  }
+
+  @media (min-width: 50rem) {
+    button[data-open-modal] {
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0.5rem;
+      padding-inline-start: 0.75rem;
+      padding-inline-end: 1rem;
+      background-color: var(--sl-color-black);
+      color: var(--sl-color-gray-2);
+      font-size: var(--sl-text-sm);
+      width: 100%;
+      max-width: 22rem;
+    }
+    button[data-open-modal]:hover {
+      border-color: var(--sl-color-gray-2);
+      color: var(--sl-color-white);
+    }
+
+    button[data-open-modal] > :last-child {
+      margin-inline-start: auto;
+    }
+  }
+
+  dialog {
+    margin: 0;
+    background-color: var(--sl-color-gray-6);
+    border: 1px solid var(--sl-color-gray-5);
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    box-shadow: var(--sl-shadow-lg);
+  }
+  dialog[open] {
+    display: grid;
+  }
+
+  dialog::backdrop {
+    background-color: var(--sl-color-backdrop-overlay);
+    -webkit-backdrop-filter: blur(0.25rem);
+    backdrop-filter: blur(0.25rem);
+  }
+
+  .dialog-frame {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  button[data-close-modal] {
+    position: absolute;
+    z-index: 1;
+    align-items: center;
+    align-self: flex-end;
+    height: calc(64px * var(--pagefind-ui-scale));
+    padding: 0.25rem;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--sl-color-text-accent);
+  }
+
+  #starlight__search {
+    --pagefind-ui-primary: var(--sl-color-accent-light);
+    --pagefind-ui-text: var(--sl-color-gray-2);
+    --pagefind-ui-font: var(--__sl-font);
+    --pagefind-ui-background: var(--sl-color-black);
+    --pagefind-ui-border: var(--sl-color-gray-5);
+    --pagefind-ui-border-width: 1px;
+    --sl-search-cancel-space: 5rem;
+
+    display: flex;
+    flex-direction: column-reverse;
+    gap: calc(24px * var(--pagefind-ui-scale));
+  }
+
+  @media (min-width: 50rem) {
+    #starlight__search {
+      --sl-search-cancel-space: 0px;
+    }
+
+    dialog {
+      margin: 4rem auto auto;
+      border-radius: 0.5rem;
+      width: 90%;
+      max-width: 40rem;
+      height: max-content;
+      min-height: 15rem;
+      max-height: calc(100% - 8rem);
+    }
+
+    .dialog-frame {
+      padding: 1.5rem;
+    }
+  }
+</style>
+
+<style is:global>
+  [data-search-modal-open] {
+    overflow: hidden;
+  }
+
+  #starlight__search {
+    --sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+    --sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
+    --sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
+    --sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+    --sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
+    --sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+    --sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+    --sl-search-page-icon-inline-start: calc(
+      (var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
+    );
+    --sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+    --sl-search-tree-diagram-inline-start: calc(
+      (var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
+    );
+  }
+
+  #starlight__search .pagefind-ui__form::before {
+    --pagefind-ui-text: var(--sl-color-gray-1);
+    opacity: 1;
+  }
+
+  #starlight__search .pagefind-ui__search-input {
+    color: var(--sl-color-white);
+    font-weight: 400;
+    width: calc(100% - var(--sl-search-cancel-space));
+  }
+
+  #starlight__search input:focus {
+    --pagefind-ui-border: var(--sl-color-accent);
+  }
+
+  #starlight__search .pagefind-ui__search-clear {
+    inset-inline-end: var(--sl-search-cancel-space);
+    width: calc(60px * var(--pagefind-ui-scale));
+    padding: 0;
+    background-color: transparent;
+    overflow: hidden;
+  }
+  #starlight__search .pagefind-ui__search-clear:focus {
+    outline: 1px solid var(--sl-color-accent);
+  }
+  #starlight__search .pagefind-ui__search-clear::before {
+    content: '';
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+      center / 50% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+      center / 50% no-repeat;
+    background-color: var(--sl-color-text-accent);
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  #starlight__search .pagefind-ui__results > * + * {
+    margin-top: var(--sl-search-result-spacing);
+  }
+  #starlight__search .pagefind-ui__result {
+    border: 0;
+    padding: 0;
+  }
+
+  #starlight__search .pagefind-ui__result-nested {
+    position: relative;
+    padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+    padding-inline-start: var(--sl-search-result-pad-inline-start);
+  }
+
+  #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+  #starlight__search .pagefind-ui__result-nested {
+    position: relative;
+    background-color: var(--sl-color-black);
+  }
+
+  #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+  #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+  #starlight__search .pagefind-ui__result-nested:hover,
+  #starlight__search .pagefind-ui__result-nested:focus-within {
+    outline: 1px solid var(--sl-color-accent-high);
+  }
+
+  #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+  #starlight__search .pagefind-ui__result-nested:focus-within {
+    background-color: var(--sl-color-accent-low);
+  }
+
+  #starlight__search .pagefind-ui__result-thumb,
+  #starlight__search .pagefind-ui__result-inner {
+    margin-top: 0;
+  }
+
+  #starlight__search .pagefind-ui__result-inner > :first-child {
+    border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
+  }
+  #starlight__search .pagefind-ui__result-inner > :last-child {
+    border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
+  }
+
+  #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
+    padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
+    padding-inline-start: var(--sl-search-result-pad-inline-start);
+  }
+  #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--sl-search-page-icon-inline-start);
+    width: var(--sl-search-page-icon-size);
+    background: var(--sl-color-gray-3);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+      center no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+      center no-repeat;
+  }
+
+  #starlight__search .pagefind-ui__result-inner {
+    align-items: stretch;
+    gap: 1px;
+  }
+
+  #starlight__search .pagefind-ui__result-link {
+    position: unset;
+    --pagefind-ui-text: var(--sl-color-white);
+    font-weight: 600;
+  }
+
+  #starlight__search .pagefind-ui__result-link:hover {
+    text-decoration: none;
+  }
+
+  #starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+    content: unset;
+  }
+
+  #starlight__search .pagefind-ui__result-nested::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--sl-search-tree-diagram-inline-start);
+    width: var(--sl-search-tree-diagram-size);
+    background: var(--sl-color-gray-4);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+      0% 0% / 100% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+      0% 0% / 100% no-repeat;
+  }
+  #starlight__search .pagefind-ui__result-nested:last-child::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+  }
+
+  /* Flip page and tree icons around the vertical axis when in an RTL layout. */
+  [dir='rtl'] .pagefind-ui__result-title::before,
+  [dir='rtl'] .pagefind-ui__result-nested::before {
+    transform: matrix(-1, 0, 0, 1, 0, 0);
+  }
+
+  #starlight__search .pagefind-ui__result-link::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  #starlight__search .pagefind-ui__result-excerpt {
+    font-size: calc(1rem * var(--pagefind-ui-scale));
+    overflow-wrap: anywhere;
+  }
+
+  #starlight__search mark {
+    color: var(--sl-color-gray-2);
+    background-color: transparent;
+    font-weight: 600;
+  }
+
+  #starlight__search .pagefind-ui__filter-panel {
+    display: none;
+  }
+
+  .starlight-versions-pagefind-notice {
+    align-items: center;
+    background-color: var(--sl-color-orange-low);
+    border-radius: var(--sl-search-corners);
+    border: 1px solid var(--sl-color-orange);
+    color: var(--sl-color-orange-high);
+    display: flex;
+    font-size: calc(18px * var(--pagefind-ui-scale));
+    gap: 0.75em;
+    line-height: var(--sl-line-height-headings);
+    padding: 0.75em 1em;
+  }
+
+  .starlight-versions-pagefind-notice a {
+    color: var(--sl-color-orange-high);
+  }
+
+  .starlight-versions-pagefind-notice svg {
+    flex-shrink: 0;
+  }
+</style>