starlight-theme-celestia 0.2.0

package/src/components/LinkButton.astro

@@ -0,0 +1,47 @@
+---
+import type { StarlightIcon } from '@astrojs/starlight/types'
+import type { HTMLAttributes } from 'astro/types'
+import LinkButtonIcon from './LinkButtonIcon.astro'
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
+  href: string | URL
+  icon?: StarlightIcon | undefined
+  iconPlacement?: 'start' | 'end' | undefined
+  variant?: 'primary' | 'secondary' | 'minimal'
+}
+
+const {
+  class: className,
+  icon,
+  iconPlacement = 'end',
+  variant = 'primary',
+  ...attrs
+} = Astro.props
+---
+
+<span
+  class:list={[
+    'not-content',
+    'inline-flex items-center justify-center align-middle',
+  ]}
+>
+  <a
+    class:list={[
+      'not-content',
+      'group me-2 mt-2 mb-2 inline-flex items-center justify-between gap-2 rounded-xl border border-solid border-transparent px-6 py-3 font-medium no-underline transition active:scale-97',
+      variant === 'primary'
+        ? 'bg-black text-white shadow-sm hover:bg-gray-800 hover:shadow-md dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300'
+        : undefined,
+      variant === 'secondary'
+        ? 'border-(--sl-color-gray-5) bg-white text-gray-700 shadow-sm hover:bg-gray-50 hover:shadow-md dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+        : undefined,
+      variant === 'minimal' ? 'text-gray-700 dark:text-gray-200' : undefined,
+      className,
+    ]}
+    {...attrs}
+  >
+    {icon && iconPlacement === 'start' && <LinkButtonIcon icon={icon} />}
+    <slot />
+    {icon && iconPlacement === 'end' && <LinkButtonIcon icon={icon} />}
+  </a>
+</span>

package/src/components/LinkButtonIcon.astro

@@ -0,0 +1,22 @@
+---
+import { Icon } from '@astrojs/starlight/components'
+import type { StarlightIcon } from '@astrojs/starlight/types'
+import ArrowRightIcon from '../icons/lucide-arrow-right.svg'
+import ArrowLeftIcon from '../icons/lucide-arrow-left.svg'
+
+interface Props {
+  icon: StarlightIcon
+}
+
+const { icon } = Astro.props
+---
+
+{
+  icon === 'right-arrow' ? (
+    <ArrowRightIcon class="block size-5 transition group-hover:translate-x-1" />
+  ) : icon === 'left-arrow' ? (
+    <ArrowLeftIcon class="block size-5 transition group-hover:-translate-x-1" />
+  ) : (
+    <Icon name={icon} size="1.25rem" />
+  )
+}

package/src/components/LinkCard.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import ArrowRightIcon from '../icons/lucide-arrow-right.svg'
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
+  title: string
+  description?: string
+}
+
+const { title, description, class: className, ...attributes } = Astro.props
+---
+
+<div
+  class:list={[
+    'not-content',
+    'group relative flex flex-col gap-2 rounded-xl border border-solid border-(--sl-color-gray-5) bg-white px-5 py-4 text-gray-700 shadow-sm transition hover:bg-gray-50 hover:shadow-md active:scale-99 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+    className,
+  ]}
+>
+  <a
+    class:list={[
+      'inline-flex items-center justify-between text-lg font-semibold text-gray-700 no-underline dark:text-gray-200',
+      /* a11y fix for https://github.com/withastro/starlight/issues/487 */
+      "before:absolute before:inset-0 before:content-['']",
+    ]}
+    {...attributes}
+  >
+    <span set:html={title} />
+    <ArrowRightIcon class="ml-2 size-5 transition group-hover:translate-x-1" />
+  </a>
+  {description && <span set:html={description} />}
+</div>

package/src/components/MarkdownContent.astro

@@ -0,0 +1,22 @@
+---
+import Default from '@astrojs/starlight/components/MarkdownContent.astro'
+import CodeCopy from './CodeCopy.astro'
+---
+
+<Default>
+  <slot />
+</Default>
+
+<style is:global>
+  @layer celestia {
+    :root .sl-markdown-content dd:not(:where(.not-content *)) {
+      padding-inline-start: 2rem;
+    }
+  }
+</style>
+
+<CodeCopy />
+<script>
+  import { register } from 'shiki-twoslash-renderer/elements'
+  register()
+</script>

package/src/components/MobileMenuFooter.astro

@@ -0,0 +1,11 @@
+---
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect'
+import SocialIcons from 'virtual:starlight/components/SocialIcons'
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect'
+---
+
+<div class="flex items-center justify-end gap-2 py-4 print:hidden">
+  <SocialIcons />
+  <LanguageSelect />
+  <ThemeSelect />
+</div>

package/src/components/MobileMenuToggle.astro

@@ -0,0 +1,23 @@
+---
+import MenuIcon from '../icons/lucide-menu.svg'
+import XIcon from '../icons/lucide-x.svg'
+---
+
+<celestia-mobile-menu-toggle
+  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 print:hidden"
+  aria-label={Astro.locals.t('menuButton.accessibleLabel')}
+  aria-controls="starlight__sidebar"
+>
+  <div
+    class="transition-transform [body[data-mobile-menu-expanded]_&]:rotate-90"
+  >
+    <MenuIcon class="block [body[data-mobile-menu-expanded]_&]:hidden" />
+    <XIcon class="hidden [body[data-mobile-menu-expanded]_&]:block" />
+  </div>
+</celestia-mobile-menu-toggle>
+
+<script>
+  import { register } from './mobile-menu-toggle'
+
+  register()
+</script>

package/src/components/MobileTableOfContents.astro

@@ -0,0 +1,26 @@
+---
+import Default from '@astrojs/starlight/components/MobileTableOfContents.astro'
+
+const { toc } = Astro.locals.starlightRoute
+---
+
+{
+  toc && (
+    <div class="[&_nav]:backdrop-blur [&_summary]:border-b-(--sl-color-hairline)">
+      <Default />
+    </div>
+  )
+}
+
+<script>
+  // Guard against duplicate 'starlight-toc' custom element registration.
+  // Starlight registers it from both the desktop and mobile TOC components,
+  // which throws on the second call. Only guard this specific element name.
+  const originalDefine = customElements.define.bind(customElements);
+  customElements.define = function(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions) {
+    if (name === 'starlight-toc' && customElements.get(name)) {
+      return;
+    }
+    originalDefine(name, constructor, options);
+  };
+</script>

package/src/components/PageFrame.astro

@@ -0,0 +1,50 @@
+---
+const { hasSidebar } = Astro.locals.starlightRoute
+---
+
+<div class="flex min-h-screen flex-col">
+  <header
+    class="fixed inset-0 z-(--sl-z-index-navbar) box-border h-(--sl-nav-height) w-full border-0 border-b border-solid border-(--sl-color-hairline) bg-(--sl-color-bg-nav) px-(--sl-nav-pad-x) py-(--sl-nav-pad-y) backdrop-blur"
+  >
+    <slot name="header" />
+  </header>
+  {
+    hasSidebar && (
+      <nav
+        class="sidebar print:hidden"
+        aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}
+        id="celestia-sidebar-nav"
+      >
+        <div
+          id="starlight__sidebar"
+          class:list={[
+            'celestia-scroll-container',
+
+            'invisible md:visible [body[data-mobile-menu-expanded]_&]:max-md:visible',
+
+            'fixed top-(--sl-nav-height) bottom-0 left-0 z-(--sl-z-index-menu) overflow-y-auto border-0 border-solid bg-(--sl-color-black) max-md:w-full md:w-(--sl-sidebar-width)',
+          ]}
+        >
+          <div
+            class:list={[
+              'sidebar-content',
+              'flex h-full min-h-max flex-col px-(--sl-sidebar-pad-x) py-4',
+            ]}
+          >
+            <slot name="sidebar" />
+          </div>
+        </div>
+      </nav>
+    )
+  }
+  <div class="main-frame"><slot /></div>
+</div>
+
+<style>
+  @layer celestia {
+    .main-frame {
+      padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+      padding-inline-start: var(--sl-content-inline-start);
+    }
+  }
+</style>

package/src/components/Pagination.astro

@@ -0,0 +1,34 @@
+---
+import PaginationLink from './PaginationLink.astro'
+
+const { dir, pagination } = Astro.locals.starlightRoute
+const { prev, next } = pagination
+const isRtl = dir === 'rtl'
+---
+
+<div
+  class="flex min-w-full flex-row items-stretch justify-between gap-2 px-1 pt-0 pb-6 print:hidden"
+  dir={dir}
+>
+  {
+    prev && (
+      <PaginationLink
+        label={prev.label}
+        href={prev.href}
+        rel="prev"
+        side={isRtl ? 'right' : 'left'}
+      />
+    )
+  }
+  <div class="flex-1"></div>
+  {
+    next && (
+      <PaginationLink
+        label={next.label}
+        href={next.href}
+        rel="next"
+        side={isRtl ? 'left' : 'right'}
+      />
+    )
+  }
+</div>

package/src/components/PaginationLink.astro

@@ -0,0 +1,30 @@
+---
+import ChevronRightIcon from '../icons/lucide-chevron-right.svg'
+import ChevronLeftIcon from '../icons/lucide-chevron-left.svg'
+
+interface Props {
+  label: string
+  href: string
+  rel: 'next' | 'prev'
+  side: 'left' | 'right'
+}
+
+const { label, href, rel, side } = Astro.props
+---
+
+<a
+  href={href}
+  rel={rel}
+  data-side={side}
+  class="group m-0 flex items-center justify-end gap-2 rounded-xl p-2 font-medium text-(--sl-color-gray-2) no-underline transition hover:text-(--sl-color-white) md:text-lg [[rel='next']]:flex-row [[rel='prev']]:flex-row-reverse"
+>
+  <span>{label}</span>
+
+  {
+    side === 'right' ? (
+      <ChevronRightIcon class="block min-h-5 min-w-5 transition group-hover:translate-x-1" />
+    ) : (
+      <ChevronLeftIcon class="block min-h-5 min-w-5 transition group-hover:-translate-x-1" />
+    )
+  }
+</a>