starlight-theme-celestia 0.2.0

package/src/components/Search.astro

@@ -0,0 +1,645 @@
+---
+import project from 'virtual:starlight/project-context'
+import SearchIcon from '../icons/lucide-search.svg'
+
+const pagefindTranslations = {
+  placeholder: Astro.locals.t('search.label'),
+  ...Object.fromEntries(
+    Object.entries(Astro.locals.t.all())
+      .filter(([key]) => key.startsWith('pagefind.'))
+      .map(([key, value]) => [key.replace('pagefind.', ''), value]),
+  ),
+}
+
+const dataAttributes: DOMStringMap = {
+  'data-translations': JSON.stringify(pagefindTranslations),
+}
+if (project.trailingSlash === 'never')
+  dataAttributes['data-strip-trailing-slash'] = ''
+---
+
+<site-search class={Astro.props.class} {...dataAttributes}>
+  <button
+    class="flex size-8 rounded-md p-2 text-(--sl-color-text) transition hover:bg-gray-400/30 focus-visible:outline-offset-1 active:scale-90 md:h-9 md:w-full md:max-w-88 md:rounded-md md:border md:border-solid md:border-(--sl-color-gray-5) md:p-2 md:text-(--sl-color-text) md:transition-colors md:hover:bg-gray-400/10"
+    data-open-modal
+    disabled
+    aria-label={Astro.locals.t('search.label')}
+    aria-keyshortcuts="Control+K"
+  >
+    <SearchIcon class="size-4" />
+    <span class="sl-hidden md:sl-block" aria-hidden="true"
+      >{Astro.locals.t('search.label')}</span
+    >
+    <kbd class="sl-hidden md:sl-flex" style="display: none;">
+      <kbd>{Astro.locals.t('search.ctrlKey')}</kbd><kbd>K</kbd>
+    </kbd>
+  </button>
+
+  <dialog style="padding:0" aria-label={Astro.locals.t('search.label')}>
+    <div class="dialog-frame sl-flex">
+      {
+        /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
+      }
+      <button data-close-modal class="sl-flex md:sl-hidden">
+        {Astro.locals.t('search.cancelLabel')}
+      </button>
+      {
+        import.meta.env.DEV ? (
+          <div
+            style="margin: auto; text-align: center; white-space: pre-line;"
+            dir="ltr"
+          >
+            <p>{Astro.locals.t('search.devWarning')}</p>
+          </div>
+        ) : (
+          <div class="search-container">
+            <div id="starlight__search" />
+          </div>
+        )
+      }
+    </div>
+  </dialog>
+</site-search>
+
+{
+  /**
+   * This is intentionally inlined to avoid briefly showing an invalid shortcut.
+   * Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
+   * user agent is spoofed by some browsers when opening the devtools.
+   */
+}
+<script is:inline>
+  ;(() => {
+    const openBtn = document.querySelector('button[data-open-modal]')
+    const shortcut = openBtn?.querySelector('kbd')
+    if (!openBtn || !(shortcut instanceof HTMLElement)) return
+    const platformKey = shortcut.querySelector('kbd')
+    if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+      platformKey.textContent = '⌘'
+      openBtn.setAttribute('aria-keyshortcuts', 'Meta+K')
+    }
+    shortcut.style.display = ''
+  })()
+</script>
+
+<script>
+  import { pagefindUserConfig } from 'virtual:starlight/pagefind-config'
+
+  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')!
+
+      /** 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) => {
+        if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+          dialog.open ? closeModal() : openModal()
+          e.preventDefault()
+        }
+      })
+
+      let translations = {}
+      try {
+        translations = JSON.parse(this.dataset.translations || '{}')
+      } catch {}
+
+      const shouldStrip = this.dataset.stripTrailingSlash !== undefined
+      const stripTrailingSlash = (path: string) =>
+        path.replace(/(.)\/(#.*)?$/, '$1$2')
+      const formatURL = shouldStrip
+        ? stripTrailingSlash
+        : (path: string) => path
+
+      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')
+          new PagefindUI({
+            ...pagefindUserConfig,
+            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: Array<{ 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
+              })
+            },
+          })
+        })
+      })
+    }
+  }
+  customElements.define('site-search', SiteSearch)
+</script>
+
+<style>
+  @layer starlight.core {
+    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] {
+        padding-inline-start: 0.75rem;
+        padding-inline-end: 0.5rem;
+        background-color: var(--sl-color-black);
+        color: var(--sl-color-gray-2);
+        font-size: var(--sl-text-sm);
+      }
+
+      button[data-open-modal] > :last-child {
+        margin-inline-start: auto;
+      }
+    }
+
+    button > kbd {
+      border-radius: 0.25rem;
+      font-size: var(--sl-text-2xs);
+      gap: 0.25em;
+      padding-inline: 0.375rem;
+      background-color: var(--sl-color-gray-6);
+    }
+
+    kbd {
+      font-family: var(--__sl-font);
+    }
+
+    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: flex;
+    }
+
+    dialog::backdrop {
+      background-color: var(--sl-color-backdrop-overlay);
+      -webkit-backdrop-filter: blur(0.25rem);
+      backdrop-filter: blur(0.25rem);
+    }
+
+    .dialog-frame {
+      position: relative;
+      overflow: auto;
+      flex-direction: column;
+      flex-grow: 1;
+      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-text);
+      --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;
+      --pagefind-ui-tag: var(--sl-color-gray-5);
+      --sl-search-cancel-space: 5rem;
+    }
+
+    :root[data-theme='light'] #starlight__search {
+      --pagefind-ui-tag: var(--sl-color-gray-6);
+    }
+
+    @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>
+  @import url('@pagefind/default-ui/css/ui.css') layer(starlight.core);
+
+  @layer starlight.core {
+    [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-of-type::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-value::before {
+      border-color: var(--sl-color-text-invert);
+    }
+
+    #starlight__search .pagefind-ui__result-tags {
+      background-color: var(--sl-color-black);
+      margin-top: 0;
+      padding: var(--sl-search-result-nested-pad-block)
+        var(--sl-search-result-pad-inline-end);
+    }
+  }
+</style>
+
+<style is:global>
+  @layer celestia {
+    site-search {
+      & dialog {
+        background-color: var(--sl-color-bg);
+      }
+
+      & input:focus-visible {
+        outline-style: solid;
+        outline-width: 1px;
+        outline-color: var(--sl-color-accent);
+      }
+    }
+
+    ::backdrop {
+      --sl-color-backdrop-overlay: hsl(0 0 0% / 0.9);
+    }
+
+    [data-theme='light'] ::backdrop {
+      --sl-color-backdrop-overlay: hsl(0 0 100% / 0.9);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      site-search {
+        & dialog,
+        & dialog::backdrop {
+          transition:
+            display 300ms allow-discrete,
+            overlay 300ms allow-discrete;
+          animation-timing-function: ease-out;
+          animation-fill-mode: forwards;
+          will-change: transform, opacity, backdrop-filter, background-color;
+        }
+
+        & dialog {
+          animation-name: celestia-search-dialog-zoom-out;
+          animation-duration: 150ms;
+          transform: translateZ(0);
+        }
+
+        & dialog[open] {
+          animation-duration: 75ms;
+          animation-name: celestia-search-dialog-zoom-in;
+        }
+
+        & dialog::backdrop {
+          -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+
+          animation-duration: 150ms;
+          animation-name: celestia-search-backdrop-fade-out;
+        }
+
+        & dialog[open]::backdrop {
+          animation-duration: 75ms;
+          animation-name: celestia-search-backdrop-fade-in;
+        }
+      }
+    }
+
+    @keyframes celestia-search-backdrop-fade-in {
+      from {
+        background-color: transparent;
+      }
+      to {
+        background-color: var(--sl-color-backdrop-overlay);
+      }
+    }
+
+    @keyframes celestia-search-backdrop-fade-out {
+      from {
+        background-color: var(--sl-color-backdrop-overlay);
+      }
+      to {
+        background-color: transparent;
+      }
+    }
+
+    site-search {
+      --celestia-search-dialog-zoom-scale: 1;
+      --celestia-search-dialog-zoom-translate-y: 0;
+    }
+
+    @media (min-width: 72rem) {
+      site-search {
+        --celestia-search-dialog-zoom-scale: 0.95;
+        --celestia-search-dialog-zoom-translate-y: -1rem;
+      }
+    }
+
+    @keyframes celestia-search-dialog-zoom-in {
+      from {
+        opacity: 0;
+        transform: scale(var(--celestia-search-dialog-zoom-scale))
+          translateY(var(--celestia-search-dialog-zoom-translate-y));
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+
+    @keyframes celestia-search-dialog-zoom-out {
+      from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: scale(var(--celestia-search-dialog-zoom-scale))
+          translateY(var(--celestia-search-dialog-zoom-translate-y));
+      }
+    }
+  }
+</style>

package/src/components/SiteTitle.astro

@@ -0,0 +1,47 @@
+---
+import config from "virtual:starlight/user-config";
+
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+
+let logoSrc: string | undefined;
+let logoAlt = "";
+if (config.logo) {
+  logoAlt = config.logo.alt || "";
+  if ("src" in config.logo) {
+    const raw = typeof config.logo.src === "string" ? config.logo.src : "";
+    logoSrc = raw.replace(/^\.\/public/, "");
+  }
+}
+---
+
+<a href={siteTitleHref} class="site-title sl-flex">
+  {logoSrc && <img alt={logoAlt} src={logoSrc} class="celestia-logo" />}
+  <span class:list={{ "sr-only": config.logo?.replacesTitle }} translate="no">
+    {siteTitle}
+  </span>
+</a>
+
+<style>
+  .site-title {
+    align-items: center;
+    gap: var(--sl-nav-gap);
+    font-size: var(--sl-text-h4);
+    font-weight: 600;
+    color: var(--sl-color-text-accent);
+    text-decoration: none;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .celestia-logo {
+    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+    object-position: 0 50%;
+  }
+
+  span {
+    overflow: hidden;
+  }
+</style>