@astrojs/starlight 0.0.1

package/components/MobileMenuToggle.astro

@@ -0,0 +1,89 @@
+---
+import Icon from './Icon.astro';
+---
+
+<starlight-menu-button>
+  <button
+    aria-expanded="false"
+    aria-label="Menu"
+    aria-controls="starlight__sidebar"
+    class="md:hidden"
+  >
+    <Icon name="bars" />
+  </button>
+</starlight-menu-button>
+
+<script>
+  class StarlightMenuButton extends HTMLElement {
+    btn = this.querySelector('button')!;
+
+    constructor() {
+      super();
+      // Toggle `aria-expanded` state when a user clicks the button.
+      this.btn.addEventListener('click', () => this.toggleExpanded());
+
+      // Close the menu when a user presses the escape key.
+      const parentNav = this.closest('nav');
+      if (parentNav) {
+        parentNav.addEventListener('keyup', (e) => this.closeOnEscape(e));
+      }
+    }
+
+    setExpanded(expanded: boolean) {
+      this.setAttribute('aria-expanded', String(expanded));
+      document.body.toggleAttribute('data-mobile-menu-expanded', expanded);
+    }
+
+    toggleExpanded() {
+      this.setExpanded(this.getAttribute('aria-expanded') !== 'true');
+    }
+
+    closeOnEscape(e: KeyboardEvent) {
+      if (e.code === 'Escape') {
+        this.setExpanded(false);
+        this.btn.focus();
+      }
+    }
+  }
+
+  customElements.define('starlight-menu-button', StarlightMenuButton);
+</script>
+
+<style>
+  button {
+    position: fixed;
+    top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
+    inset-inline-end: var(--sl-nav-pad-x);
+    z-index: var(--sl-z-index-navbar);
+    border: 0;
+    border-radius: 50%;
+    display: flex;
+    width: var(--sl-menu-button-size);
+    height: var(--sl-menu-button-size);
+    padding: 0.5rem;
+    background-color: var(--sl-color-white);
+    color: var(--sl-color-black);
+    box-shadow: var(--sl-shadow-md);
+    cursor: pointer;
+  }
+
+  [aria-expanded='true'] button {
+    background-color: var(--sl-color-gray-2);
+    box-shadow: none;
+  }
+
+  :global([data-theme='light']) button {
+    background-color: var(--sl-color-black);
+    color: var(--sl-color-white);
+  }
+
+  :global([data-theme='light']) [aria-expanded='true'] button {
+    background-color: var(--sl-color-gray-5);
+  }
+</style>
+
+<style is:global>
+  [data-mobile-menu-expanded] {
+    overflow: hidden;
+  }
+</style>

package/components/PrevNextLinks.astro

@@ -0,0 +1,77 @@
+---
+import type { Link } from '../utils/navigation';
+import Icon from './Icon.astro';
+
+interface Props {
+  prev: Link | undefined;
+  next: Link | undefined;
+  dir: 'ltr' | 'rtl';
+}
+
+const { prev, next, dir } = Astro.props;
+const isRtl = dir === 'rtl';
+---
+
+<div class="pagination-links" dir={dir}>
+  {
+    prev && (
+      <a href={prev.href} rel="prev">
+        <Icon name={isRtl ? 'right-arrow' : 'left-arrow'} size="1.5rem" />
+        <span>
+          Previous
+          <br />
+          <span class="link-title">{prev.label}</span>
+        </span>
+      </a>
+    )
+  }
+  {
+    next && (
+      <a href={next.href} rel="next">
+        <Icon name={isRtl ? 'left-arrow' : 'right-arrow'} size="1.5rem" />
+        <span>
+          Next
+          <br />
+          <span class="link-title">{next.label}</span>
+        </span>
+      </a>
+    )
+  }
+</div>
+
+<style>
+  .pagination-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 0.5rem;
+    width: 100%;
+    flex-basis: calc(50% - 0.5rem);
+    flex-grow: 1;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    text-decoration: none;
+    color: var(--sl-color-gray-2);
+  }
+  [rel='next'] {
+    justify-content: end;
+    text-align: end;
+    flex-direction: row-reverse;
+  }
+  a:hover {
+    border-color: var(--sl-color-gray-2);
+  }
+
+  .link-title {
+    color: var(--sl-color-white);
+    font-size: var(--sl-text-2xl);
+    line-height: var(--sl-line-height-headings);
+  }
+</style>

package/components/RightSidebarPanel.astro

@@ -0,0 +1,38 @@
+<div class="right-sidebar-panel">
+  <div class="container">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .right-sidebar-panel {
+    padding: 1rem var(--sl-sidebar-pad-x);
+  }
+  .right-sidebar-panel + .right-sidebar-panel {
+    border-top: 1px solid var(--sl-color-hairline);
+  }
+  .container {
+    width: var(--sl-sidebar-width);
+  }
+  .right-sidebar-panel :global(h2) {
+    color: var(--sl-color-white);
+    font-size: var(--sl-text-base);
+    font-weight: 600;
+  }
+  .right-sidebar-panel :global(a) {
+    display: block;
+    font-size: var(--sl-text-xs);
+    text-decoration: none;
+    color: var(--sl-color-gray-3);
+  }
+  .right-sidebar-panel :global(a:hover) {
+    color: var(--sl-color-white);
+  }
+  @media (min-width: 72rem) {
+    .container {
+      max-width: calc(
+        100vw - var(--sl-content-width) - var(--sl-sidebar-width)
+      );
+    }
+  }
+</style>

package/components/Search.astro

@@ -0,0 +1,296 @@
+---
+import '@pagefind/default-ui/css/ui.css';
+import Icon from './Icon.astro';
+---
+
+<site-search>
+  <button data-open-modal disabled>
+    <Icon name="magnifier" label="Search" />
+    <span class="hidden md:block" aria-hidden="true">Search</span>
+    <Icon
+      name="forward-slash"
+      class="hidden md:block"
+      label="(Press / to search)"
+    />
+  </button>
+
+  <dialog style="padding:0" aria-label="Search the documentation">
+    <div class="dialog-frame">
+      <button data-close-modal class="flex md:hidden">Cancel</button>
+      {
+        import.meta.env.DEV ? (
+          <div style="margin: auto; text-align: center;">
+            <p>Search is only available in production builds.</p>
+            <p>Try building and previewing the site to test it out locally.</p>
+          </div>
+        ) : (
+          <div class="search-container">
+            <div id="starlight__search" />
+          </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')!;
+
+      /** Close the modal if a user clicks outside of the modal. */
+      const onWindowClick = (event: MouseEvent) => {
+        if (!dialogFrame.contains(event.target as Node)) closeModal();
+      };
+
+      const openModal = (event?: MouseEvent) => {
+        dialog.showModal();
+        this.querySelector('input')?.focus();
+        event?.stopPropagation();
+        window.addEventListener('click', onWindowClick);
+      };
+
+      const closeModal = () => {
+        dialog.close();
+        window.removeEventListener('click', onWindowClick);
+      };
+
+      openBtn.addEventListener('click', openModal);
+      openBtn.disabled = false;
+      closeBtn.addEventListener('click', closeModal);
+
+      // Listen for `/` and `cmd + k` keyboard shortcuts.
+      window.addEventListener('keydown', (e) => {
+        if (e.metaKey === true && e.key === 'k') {
+          dialog.open ? closeModal() : openModal();
+          e.preventDefault();
+        } else if (e.key === '/' && !dialog.open) {
+          openModal();
+          e.preventDefault();
+        }
+      });
+    }
+  }
+  customElements.define('site-search', SiteSearch);
+
+  window.addEventListener('DOMContentLoaded', () => {
+    if (import.meta.env.DEV) return;
+    const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+    onIdle(async () => {
+      const { PagefindUI } = await import('@pagefind/default-ui');
+      new PagefindUI({
+        element: '#starlight__search',
+        baseUrl: import.meta.env.BASE_URL,
+        showImages: false,
+      });
+    });
+  });
+</script>
+
+<style>
+  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 {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  button[data-close-modal] {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    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-background: var(--sl-color-black);
+    --pagefind-ui-border: var(--sl-color-gray-5);
+    --pagefind-ui-border-width: 1px;
+    --sl-search-cancel-space: 5rem;
+  }
+
+  @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);
+    }
+
+    button[data-close-modal] {
+      display: none;
+    }
+  }
+</style>
+
+<style is:global>
+  #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: 0.5rem;
+  }
+  #starlight__search .pagefind-ui__result {
+    position: relative;
+    border: 0;
+    border-radius: 0.25rem;
+    padding: 1rem;
+    background-color: var(--sl-color-black);
+  }
+
+  #starlight__search .pagefind-ui__result:hover,
+  #starlight__search .pagefind-ui__result:focus-within {
+    outline: 1px solid var(--sl-color-accent-high);
+  }
+
+  #starlight__search .pagefind-ui__result: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-link {
+    --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-link::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  #starlight__search .pagefind-ui__result-excerpt {
+    font-size: var(--sl-text-body-sm);
+  }
+
+  #starlight__search mark {
+    color: var(--sl-color-white);
+    background-color: var(--sl-color-accent-low);
+    font-weight: 500;
+    padding: 0.1em 0.2em;
+  }
+
+  #starlight__search .pagefind-ui__result:focus-within mark {
+    text-decoration: underline;
+  }
+</style>

package/components/Select.astro

@@ -0,0 +1,80 @@
+---
+import Icon from './Icon.astro';
+
+interface Props {
+  label: string;
+  value: string;
+  icon: Parameters<typeof Icon>[0]['name'];
+  width?: string;
+  options: Array<{
+    label: string;
+    value: string;
+    selected: boolean;
+  }>;
+}
+---
+
+<label style={`--sl-select-width: ${Astro.props.width}`}>
+  <span class="sr-only">{Astro.props.label}</span>
+  <Icon name={Astro.props.icon} class="icon label-icon" />
+  <select value={Astro.props.value}>
+    {
+      Astro.props.options.map(({ value, selected, label }) => (
+        <option value={value} selected={selected} set:html={label} />
+      ))
+    }
+  </select>
+  <Icon name="down-caret" class="icon caret" />
+</label>
+
+<style>
+  label {
+    --sl-label-icon-size: 0.875rem;
+    --sl-caret-size: 1.25rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--sl-color-gray-1);
+  }
+
+  label:hover {
+    color: var(--sl-color-gray-2);
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .label-icon {
+    font-size: var(--sl-label-icon-size);
+    inset-inline-start: 0;
+  }
+
+  .caret {
+    font-size: var(--sl-caret-size);
+    inset-inline-end: 0;
+  }
+
+  select {
+    border: 0;
+    padding-block: 0.625rem;
+    padding-inline: calc(var(--sl-label-icon-size) + 0.25rem)
+      calc(var(--sl-caret-size) + 0.25rem);
+    width: var(--sl-select-width);
+    background-color: transparent;
+    text-overflow: ellipsis;
+    color: inherit;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  @media (min-width: 50rem) {
+    select {
+      font-size: var(--sl-text-sm);
+    }
+  }
+</style>

package/components/Sidebar.astro

@@ -0,0 +1,34 @@
+---
+import type { getSidebar } from '../utils/navigation';
+import LanguageSelect from './LanguageSelect.astro';
+import SidebarSublist from './SidebarSublist.astro';
+import ThemeSelect from './ThemeSelect.astro';
+
+interface Props {
+  sidebar: ReturnType<typeof getSidebar>;
+  locale: string | undefined;
+}
+---
+
+<div class="sidebar flex">
+  <SidebarSublist sublist={Astro.props.sidebar} />
+  <div class="mobile-preferences flex md:hidden">
+    <ThemeSelect />
+    <LanguageSelect locale={Astro.props.locale} />
+  </div>
+</div>
+
+<style>
+  .sidebar {
+    height: 100%;
+    padding: 1rem var(--sl-sidebar-pad-x);
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .mobile-preferences {
+    justify-content: space-between;
+    border-top: 1px solid var(--sl-color-gray-6);
+    padding: 0.5rem 0;
+  }
+</style>

package/components/SidebarSublist.astro

@@ -0,0 +1,78 @@
+---
+import type { SidebarEntry } from '../utils/navigation';
+
+interface Props {
+  sublist: SidebarEntry[];
+}
+---
+
+<ul>
+  {
+    Astro.props.sublist.map((entry) => (
+      <li class:list={{ 'sidebar-group': entry.type === 'group' }}>
+        {entry.type === 'link' ? (
+          <a href={entry.href} aria-current={entry.isCurrent && 'true'}>
+            {entry.label}
+          </a>
+        ) : (
+          <>
+            <h2>{entry.label}</h2>
+            <Astro.self sublist={entry.entries} />
+          </>
+        )}
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  ul {
+    --sl-sidebar-item-padding-inline: 0.5rem;
+    list-style: none;
+    padding: 0;
+  }
+
+  h2 {
+    font-size: var(--sl-text-lg);
+    font-weight: 600;
+    color: var(--sl-color-white);
+    padding-inline: var(--sl-sidebar-item-padding-inline);
+  }
+
+  .sidebar-group + .sidebar-group {
+    margin-top: 0.75rem;
+  }
+
+  a {
+    display: block;
+    border-radius: 0.25rem;
+    text-decoration: none;
+    color: var(--sl-color-gray-2);
+    padding-inline: var(--sl-sidebar-item-padding-inline);
+  }
+
+  a:hover,
+  a:focus {
+    color: var(--sl-color-white);
+  }
+
+  [aria-current='true'],
+  [aria-current='true']:hover,
+  [aria-current='true']:focus {
+    font-weight: 600;
+    color: var(--sl-color-text-invert);
+    background-color: var(--sl-color-text-accent);
+  }
+
+  @media (min-width: 50rem) {
+    .sidebar-group + .sidebar-group {
+      margin-top: 0.5rem;
+    }
+    h2 {
+      font-size: var(--sl-text-base);
+    }
+    a {
+      font-size: var(--sl-text-xs);
+    }
+  }
+</style>

package/components/SkipLink.astro

@@ -0,0 +1,18 @@
+<a href="#starlight__overview">Skip to content</a>
+
+<style>
+  a {
+    position: fixed;
+    top: 0.75rem;
+    inset-inline-start: 0.75rem;
+  }
+  a:focus {
+    z-index: var(--sl-z-index-skiplink);
+    display: block;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    color: var(--sl-color-text-invert);
+    background-color: var(--sl-color-text-accent);
+    box-shadow: var(--sl-shadow-lg);
+  }
+</style>