@grove-dev/starlight 0.1.9

package/components/overrides/Hero.astro

@@ -0,0 +1,260 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import { Image } from 'astro:assets';
+import { PAGE_TITLE_ID } from '../../core/config/constants';
+import type { HeroLayout } from '../../schema';
+import ContainerSection from '../custom/ContainerSection.astro';
+import LinkButton from '../custom/LinkButton.astro';
+
+const { data } = Astro.locals.starlightRoute.entry;
+const { title = data.title, tagline: heroTagline, image, actions = [] } = data.hero || {};
+const heroLayout = ((data.hero as any)?.layout as HeroLayout) ?? 'centered';
+const announcement =
+    ((data.hero as any)?.announcement as { text: string; link: string }) ?? undefined;
+const hasImage = !!image;
+const tagline = heroTagline || data.description;
+
+const imageAttrs = {
+    loading: 'eager' as const,
+    decoding: 'async' as const,
+    alt: image?.alt || '',
+};
+
+let darkImage: ImageMetadata | undefined;
+let lightImage: ImageMetadata | undefined;
+let rawHtml: string | undefined;
+
+if (image) {
+    if ('file' in image) {
+        darkImage = image.file;
+    } else if ('dark' in image) {
+        darkImage = image.dark;
+        lightImage = image.light;
+    } else {
+        rawHtml = image.html;
+    }
+}
+---
+
+<ContainerSection>
+    <div class="hero" data-layout={heroLayout} data-has-image={hasImage ? '' : undefined}>
+        {
+            hasImage && (
+                <div class="hero-image">
+                    {darkImage && (
+                        <Image
+                            src={darkImage}
+                            {...imageAttrs}
+                            class:list={{ 'light:sl-hidden': Boolean(lightImage) }}
+                        />
+                    )}
+                    {lightImage && (
+                        <Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />
+                    )}
+                    {rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
+                </div>
+            )
+        }
+
+        <div class="hero-info">
+            <div class="hero-title-container">
+                {
+                    announcement && (
+                        <LinkButton href={announcement.link} variant="secondary" size="2xs">
+                            {announcement.text}
+                            <Icon name="right-arrow" size="16px" />
+                        </LinkButton>
+                    )
+                }
+
+                <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+            </div>
+
+            <div class="hero-content-container">
+                {tagline && <div class="tagline" set:html={tagline} />}
+
+                {
+                    actions.length > 0 && (
+                        <div class="actions">
+                            {actions.map(
+                                ({
+                                    attrs: { class: className, ...attrs } = {},
+                                    icon,
+                                    link: href,
+                                    text,
+                                    variant,
+                                }) => (
+                                    <LinkButton
+                                        {href}
+                                        {variant}
+                                        class:list={[className]}
+                                        {...attrs}
+                                    >
+                                        {text}
+                                        {icon?.html && <Fragment set:html={icon.html} />}
+                                    </LinkButton>
+                                )
+                            )}
+                        </div>
+                    )
+                }
+            </div>
+        </div>
+    </div>
+</ContainerSection>
+
+<style>
+    .hero {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding-block: calc(var(--spacing) * 20);
+        gap: calc(var(--spacing) * 12);
+    }
+
+    .hero-image {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .hero-image img {
+        width: 100%;
+        height: auto;
+        aspect-ratio: attr(width) / attr(height);
+        border-radius: var(--radius);
+    }
+
+    .hero-info {
+        display: flex;
+        text-align: center;
+        align-items: center;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 2);
+
+        @media (min-width: 768px) {
+            gap: calc(var(--spacing) * 4);
+        }
+    }
+
+    .hero-title-container {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 2);
+        align-items: center;
+
+        h1 {
+            font-size: 1.875rem;
+            font-weight: 600;
+            line-height: 1.1;
+            text-wrap-style: balance;
+            letter-spacing: var(--spacing-tighter);
+        }
+
+        @media (min-width: 768px) {
+            gap: calc(var(--spacing) * 4);
+
+            h1 {
+                font-size: 3rem;
+            }
+        }
+    }
+
+    .hero-content-container {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 2);
+
+        .tagline {
+            max-width: 56rem;
+            font-size: 1.125rem;
+            text-wrap: balance;
+            line-height: 1.75rem;
+        }
+
+        .actions {
+            display: flex;
+            justify-content: center;
+            padding-top: calc(var(--spacing) * 2);
+            gap: calc(var(--spacing) * 2);
+        }
+
+        @media (min-width: 768px) {
+            gap: calc(var(--spacing) * 4);
+        }
+    }
+
+    /* layouts */
+
+    .hero[data-layout='centered-top'],
+    .hero[data-layout='banner'] {
+        flex-direction: column-reverse;
+        gap: calc(var(--spacing) * 20);
+        padding-block-end: calc(var(--spacing) * 8);
+    }
+
+    .hero[data-layout='banner'] {
+        @media (min-width: 1024px) {
+            .hero-info {
+                width: 100%;
+                flex-direction: row;
+                gap: calc(var(--spacing) * 16);
+
+                .hero-title-container {
+                    flex: 1;
+                    align-items: flex-start;
+                    text-align: left;
+
+                    h1 {
+                        text-wrap-style: pretty;
+                    }
+                }
+
+                .hero-content-container {
+                    flex: 1;
+                    align-items: flex-start;
+                    align-self: flex-end;
+                    text-align: left;
+
+                    .tagline {
+                        text-wrap-style: pretty;
+                    }
+                }
+            }
+        }
+    }
+
+    .hero[data-layout='split-left'],
+    .hero[data-layout='split-right'] {
+        flex-direction: column;
+
+        .hero-image {
+            order: 0;
+        }
+
+        @media (min-width: 1024px) {
+            flex-direction: row;
+            gap: calc(var(--spacing) * 16);
+
+            .hero-info {
+                align-items: flex-start;
+
+                .hero-title-container {
+                    align-items: flex-start;
+                    text-align: left;
+                }
+
+                .hero-content-container {
+                    align-items: flex-start;
+                    text-align: left;
+                }
+            }
+        }
+    }
+
+    .hero[data-layout='split-left'] {
+        .hero-image {
+            order: 1;
+        }
+    }
+</style>

package/components/overrides/MarkdownContent.astro

@@ -0,0 +1,17 @@
+---
+import '@astrojs/starlight/style/markdown.css';
+---
+
+<div class="markdown-wrapper">
+    <div class="sl-markdown-content">
+        <slot />
+    </div>
+</div>
+
+<style>
+    .markdown-wrapper {
+        --foreground: var(--markdown-foreground, var(--foreground));
+
+        color: var(--foreground);
+    }
+</style>

package/components/overrides/PageFrame.astro

@@ -0,0 +1,121 @@
+---
+import { marked } from 'marked';
+import userConfig from 'virtual:lucode-starlight-config';
+import Drawer from './parts/Drawer.astro';
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+---
+
+<div data-slot="layout">
+    <header>
+        <div class="container-wrapper px-6">
+            <div class="container">
+                <slot name="header" />
+            </div>
+        </div>
+    </header>
+
+    <main>
+        {!hasSidebar && <slot />}
+
+        {
+            hasSidebar && (
+                <div class="container-wrapper">
+                    <div class="container container-wrapper-main">
+                        <aside class="aside">
+                            <slot name="sidebar" />
+                        </aside>
+
+                        <slot />
+                    </div>
+                </div>
+            )
+        }
+    </main>
+
+    <footer>
+        <div data-slot="footer-text" set:html={marked.parseInline(userConfig.footerText)} />
+    </footer>
+</div>
+
+<Drawer />
+
+<style>
+    [data-slot='layout'] {
+        /* group/layout relative z-10 flex min-h-svh flex-col bg-background */
+        position: relative;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        min-height: 100svh;
+        background: var(--background);
+
+        header {
+            /* sticky top-0 z-50 w-full bg-background */
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            width: 100%;
+            background: var(--background);
+
+            .container-wrapper {
+                padding-inline: calc(var(--spacing) * 6);
+
+                .container {
+                    /* flex h-(--header-height) items-center **:data-[slot=separator]:h-4! group-has-data-[slot=designer]/layout:fixed:max-w-none 3xl:fixed:container */
+                    display: flex;
+                    height: var(--header-height);
+                    align-items: center;
+                    max-width: none;
+                }
+            }
+        }
+
+        > main {
+            /* flex min-h-0 flex-1 flex-col */
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+        }
+
+        > footer {
+            border-top: none;
+            height: 6rem;
+            display: flex;
+            align-items: center;
+
+            [data-slot='footer-text'] {
+                width: 100%;
+                max-width: var(--container-max-width);
+                margin-inline: auto;
+                padding-inline: calc(var(--spacing) * 6);
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+                color: var(--muted-foreground);
+                text-wrap: balance;
+                text-align: center;
+            }
+
+            &:is(:where(body):has(*[data-slot='docs']) *) {
+                display: none;
+            }
+
+            &:is(:where(body):has(.docs-nav)) {
+                padding-bottom: calc(var(--spacing) * 20);
+
+                @media (min-width: 640px) {
+                    padding-bottom: 0;
+                }
+            }
+
+            &:is(:where(body):has(.section-soft)) {
+                background: var(--surface-40);
+            }
+
+            &:is(:where(body):has(*[data-slot='designer']) *) {
+                display: none;
+            }
+        }
+    }
+</style>

package/components/overrides/PageSidebar.astro

@@ -0,0 +1,20 @@
+---
+import TableOfContents from './TableOfContents.astro';
+---
+
+{
+    Astro.locals.starlightRoute.toc && (
+        <div>
+            <TableOfContents />
+        </div>
+    )
+}
+
+<style>
+    div {
+        padding-top: calc(var(--spacing) * 4);
+        max-height: calc(100vh - var(--header-height) - 1px);
+        top: calc(var(--header-height) + 1px);
+        position: sticky;
+    }
+</style>

package/components/overrides/PageTitle.astro

@@ -0,0 +1,130 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import { PAGE_TITLE_ID } from '../../core/config/constants';
+import userConfig from 'virtual:lucode-starlight-config';
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from '../custom/dropdown';
+import LinkButton from '../custom/LinkButton.astro';
+
+const {
+    entry: { data },
+    pagination: { prev, next },
+} = Astro.locals.starlightRoute;
+
+const { title, description } = data;
+const incudeAIMenu = userConfig.docs?.includeAiUtilities ?? false;
+
+const encode = (url: string, text: string) => `https://${url}=${encodeURIComponent(text)}`;
+const aiText = `I'm looking at: ${Astro.url}.\nHelp me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
+const openAIUrl = encode('chatgpt.com?q', aiText);
+const claudeUrl = encode('claude.ai/new?q', aiText);
+---
+
+<div data-slot="doc-title">
+    <div data-slot="doc-title-header">
+        <h1 id={PAGE_TITLE_ID}>{title}</h1>
+
+        <div data-slot="doc-title-actions">
+            {
+                incudeAIMenu && (
+                    <Dropdown>
+                        <DropdownTrigger variant="secondary" size="sm">
+                            AI tools
+                            <span
+                                data-slot="separator"
+                                style="display: inline-block; width: 1px; height: 50%; background-color: var(--foreground); opacity: 0.1;"
+                            />
+                            <Icon name="down-caret" size="1rem" />
+                        </DropdownTrigger>
+                        <DropdownContent align="end">
+                            <DropdownItem as="a" href={openAIUrl} target="_blank" rel="noopener">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path
+                                        d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
+                                        fill="currentColor"
+                                    />
+                                </svg>
+                                Open in ChatGPT
+                            </DropdownItem>
+                            <DropdownItem as="a" href={claudeUrl} target="_blank" rel="noopener">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path
+                                        d="m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z"
+                                        fill="currentColor"
+                                    />
+                                </svg>
+                                Open in Claude
+                            </DropdownItem>
+                        </DropdownContent>
+                    </Dropdown>
+                )
+            }
+
+            {
+                prev && (
+                    <LinkButton size="icon-md" variant="secondary" href={prev.href}>
+                        <Icon name="left-arrow" />
+                    </LinkButton>
+                )
+            }
+
+            {
+                next && (
+                    <LinkButton size="icon-md" variant="secondary" href={next.href}>
+                        <Icon name="right-arrow" />
+                    </LinkButton>
+                )
+            }
+        </div>
+    </div>
+
+    {description && <p slot="doc-title-description">{description}</p>}
+
+    <!--  -->
+</div>
+
+<style>
+    div[data-slot='doc-title'] {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 2);
+    }
+
+    [data-slot='doc-title-header'] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--spacing) * 2);
+
+        @media (min-width: 640px) {
+            align-items: start;
+        }
+
+        h1 {
+            letter-spacing: var(--tracking-tight);
+            font-weight: 600;
+            font-size: 1.875rem;
+            line-height: 2.25rem;
+            scroll-margin: 5rem;
+            margin: 0;
+            color: var(--foreground);
+        }
+
+        [data-slot='doc-title-actions'] {
+            display: flex;
+            align-items: center;
+            gap: calc(var(--spacing) * 2);
+        }
+    }
+
+    [slot='doc-title-description'] {
+        margin: 0;
+        color: var(--muted-foreground);
+        font-size: 1rem;
+        line-height: 1.75rem;
+        text-wrap: balance;
+
+        @media (min-width: 640px) {
+            max-width: 80%;
+        }
+    }
+</style>

package/components/overrides/Pagination.astro

@@ -0,0 +1,101 @@
+---
+const { pagination } = Astro.locals.starlightRoute;
+const { prev, next } = pagination;
+---
+
+<div class="pagination-links print:hidden">
+    {
+        prev && (
+            <a class="prev" href={prev.href} rel="prev">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="m15 18-6-6 6-6" />
+                </svg>
+                {prev.label}
+            </a>
+        )
+    }
+    {
+        next && (
+            <a class="next" href={next.href} rel="next">
+                {next.label}
+
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="m9 18 6-6-6-6" />
+                </svg>
+            </a>
+        )
+    }
+</div>
+
+<style>
+    .pagination-links {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: row;
+        padding-top: calc(var(--spacing) * 4);
+        margin-top: calc(var(--spacing) * 8);
+    }
+
+    a {
+        color: var(--secondary-foreground);
+        text-decoration: inherit;
+        background-color: var(--secondary);
+
+        transition-property:
+            color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-top: calc(var(--spacing) * 2);
+        padding-bottom: calc(var(--spacing) * 2);
+        padding-left: calc(var(--spacing) * 3);
+        padding-right: calc(var(--spacing) * 3);
+        border-radius: calc(var(--radius) - 2px);
+        white-space: nowrap;
+        gap: 0.375rem;
+        justify-content: center;
+        align-items: center;
+        height: 2rem;
+        display: inline-flex;
+    }
+
+    a:hover {
+        background-color: color-mix(in srgb, var(--secondary) 80%, transparent);
+    }
+
+    a > svg {
+        flex-shrink: 0;
+        width: 1rem;
+        height: 1rem;
+        pointer-events: none;
+        display: block;
+        vertical-align: middle;
+    }
+
+    .next {
+        margin-left: auto;
+    }
+</style>