@grove-dev/starlight 0.1.9

package/components/overrides/SiteTitle.astro

@@ -0,0 +1,65 @@
+---
+import config from 'virtual:starlight/user-config';
+import { logos } from 'virtual:starlight/user-images';
+
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+---
+
+<a href={siteTitleHref} class="site-title">
+    {
+        config.logo && logos.dark && (
+            <>
+                <img
+                    class:list={[{ 'light:sl-hidden': !('src' in config.logo) }, 'logo']}
+                    alt={config.logo.alt}
+                    src={logos.dark.src}
+                    width={logos.dark.width}
+                    height={logos.dark.height}
+                />
+                {/* Show light alternate if a user configure both light and dark logos. */}
+                {!('src' in config.logo) && (
+                    <img
+                        class="dark:sl-hidden logo"
+                        alt={config.logo.alt}
+                        src={logos.light?.src}
+                        width={logos.light?.width}
+                        height={logos.light?.height}
+                    />
+                )}
+            </>
+        )
+    }
+    <span class:list={[{ 'sr-only': config.logo?.replacesTitle }, 'title-text']}>
+        {siteTitle}
+    </span>
+</a>
+
+<style>
+    .logo {
+        max-height: 32px;
+        max-width: 32px;
+    }
+
+    .site-title {
+        gap: 0.5rem;
+        align-items: center;
+        display: flex;
+        margin-right: calc(var(--spacing) * 3);
+    }
+
+    .title-text {
+        font-weight: 700;
+        display: none;
+    }
+
+    @media (min-width: 1024px) {
+        .title-text {
+            display: inline-block;
+        }
+    }
+
+    a {
+        color: inherit;
+        text-decoration: inherit;
+    }
+</style>

package/components/overrides/SocialIcons.astro

@@ -0,0 +1,47 @@
+---
+import config from 'virtual:starlight/user-config';
+
+import { Icon } from '@astrojs/starlight/components';
+
+const links = config.social || [];
+---
+
+{
+    links.length > 0 && (
+        <>
+            {links.map(({ label, href, icon }) => (
+                <a href={href} rel="me" class="sl-flex button" data-variant="ghost">
+                    <span class="sr-only">{label}</span>
+                    <Icon name={icon} />
+                </a>
+            ))}
+        </>
+    )
+}
+
+<style>
+    a {
+        all: unset;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        padding: 0;
+        border-radius: calc(var(--radius) - 2px);
+        cursor: pointer;
+        color: color-mix(in oklab, var(--foreground) 76%, var(--muted-foreground));
+        background-color: transparent;
+        transition: color 0.15s, background-color 0.15s;
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--accent-foreground);
+        background-color: color-mix(in oklab, var(--accent) 80%, transparent);
+    }
+
+    a :global(svg) {
+        width: 1rem;
+        height: 1rem;
+    }
+</style>

package/components/overrides/TableOfContents.astro

@@ -0,0 +1,36 @@
+---
+import TableOfContentsList from './parts/toc/TableOfContentsList.astro';
+
+const { toc } = Astro.locals.starlightRoute;
+---
+
+{
+    toc && (
+        <starlight-toc data-min-h={toc.minHeadingLevel} data-max-h={toc.maxHeadingLevel}>
+            <nav aria-labelledby="starlight__on-this-page">
+                <p id="starlight__on-this-page">{Astro.locals.t('tableOfContents.onThisPage')}</p>
+                <TableOfContentsList toc={toc.items} />
+            </nav>
+        </starlight-toc>
+    )
+}
+
+<script src="./parts/toc/starlight-toc"></script>
+
+<style>
+    starlight-toc {
+        scrollbar-width: none;
+        padding-bottom: calc(var(--spacing) * 10);
+        overflow: auto;
+        height: 100%;
+    }
+    nav {
+    }
+    p {
+        font-weight: 400;
+        font-size: 0.75rem;
+        line-height: 1rem;
+        margin-bottom: calc(var(--spacing) * 3.5);
+        color: var(--muted-foreground);
+    }
+</style>

package/components/overrides/ThemeSelect.astro

@@ -0,0 +1,156 @@
+---
+
+---
+
+<starlight-theme-lucode-select>
+    <button
+        aria-label={Astro.locals.t('themeSelect.accessibleLabel')}
+        aria-live="polite"
+        class="sl-flex button"
+        title={Astro.locals.t('themeSelect.accessibleLabel')}
+        data-variant="ghost"
+    >
+        <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"
+            class="sun"
+        >
+            <circle cx="12" cy="12" r="4"></circle>
+            <path d="M12 2v2"></path>
+            <path d="M12 20v2"></path>
+            <path d="m4.93 4.93 1.41 1.41"></path>
+            <path d="m17.66 17.66 1.41 1.41"></path>
+            <path d="M2 12h2"></path>
+            <path d="M20 12h2"></path>
+            <path d="m6.34 17.66-1.41 1.41"></path>
+            <path d="m19.07 4.93-1.41 1.41"></path>
+        </svg>
+
+        <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"
+            class="moon"
+            ><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"> </path>
+        </svg>
+
+        <span class="sr-only">Toggle theme</span>
+    </button>
+</starlight-theme-lucode-select>
+
+<style>
+    button {
+        all: unset;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        border-radius: calc(var(--radius) - 2px);
+        cursor: pointer;
+        color: color-mix(in oklab, var(--foreground) 76%, var(--muted-foreground));
+        background-color: transparent;
+        transition:
+            color 0.15s,
+            background-color 0.15s;
+    }
+    button:hover {
+        color: var(--accent-foreground);
+        background-color: color-mix(in oklab, var(--accent) 80%, transparent);
+    }
+    svg {
+        flex-shrink: 0;
+        width: 1rem;
+        height: 1rem;
+        pointer-events: none;
+    }
+
+    :global([data-theme='light']) svg.sun {
+        display: none;
+    }
+
+    :global([data-theme='dark']) svg.moon {
+        display: none;
+    }
+</style>
+
+{/* Inlined to avoid FOUC. Uses global scope from `ThemeProvider.astro` */}
+<script is:inline>
+    // eslint-disable-next-line no-undef
+    StarlightThemeProvider.updatePickers();
+</script>
+
+<script>
+    type Theme = 'auto' | 'dark' | 'light';
+
+    /** Key in `localStorage` to store color theme preference at. */
+    const storageKey = 'starlight-theme';
+
+    /** Get a typesafe theme string from any JS value (unknown values are coerced to `'auto'`). */
+    function parseTheme(theme: unknown): Theme {
+        return theme === 'auto' || theme === 'dark' || theme === 'light' ? theme : 'auto';
+    }
+
+    /** Load the user’s preference from `localStorage`. */
+    function loadTheme(): Theme {
+        return parseTheme(typeof localStorage !== 'undefined' && localStorage.getItem(storageKey));
+    }
+
+    /** Store the user’s preference in `localStorage`. */
+    function storeTheme(theme: Theme): void {
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(storageKey, theme === 'light' || theme === 'dark' ? theme : '');
+        }
+    }
+
+    /** Get the preferred system color scheme. */
+    function getPreferredColorScheme(): Theme {
+        return matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+
+    /** Update select menu UI, document theme, and local storage state. */
+    function onThemeChange(theme: Theme): void {
+        StarlightThemeProvider.updatePickers(theme);
+        document.documentElement.dataset.theme =
+            theme === 'auto' ? getPreferredColorScheme() : theme;
+        storeTheme(theme);
+    }
+
+    // React to changes in system color scheme.
+    matchMedia(`(prefers-color-scheme: light)`).addEventListener('change', () => {
+        if (loadTheme() === 'auto') {
+            onThemeChange('auto');
+        }
+    });
+
+    customElements.define(
+        'starlight-theme-lucode-select',
+        class StarlightThemeLucodeSelect extends HTMLElement {
+            constructor() {
+                super();
+                onThemeChange(loadTheme());
+                const button = this.querySelector('button');
+                button?.addEventListener('click', () => {
+                    const theme = parseTheme(document.documentElement.dataset.theme);
+                    const newTheme =
+                        theme === 'dark' ? 'light' : theme === 'light' ? 'dark' : 'auto';
+                    onThemeChange(newTheme);
+                    button?.setAttribute('aria-label', `${newTheme} theme`);
+                });
+            }
+        }
+    );
+</script>

package/components/overrides/TwoColumnContent.astro

@@ -0,0 +1,75 @@
+---
+const { toc } = Astro.locals.starlightRoute;
+---
+
+{!toc && <slot />}
+
+{
+    toc && (
+        <main class="container-main" data-slot="docs">
+            <div class="main">
+                <slot />
+            </div>
+
+            <div class="toc">
+                <slot name="right-sidebar" />
+            </div>
+        </main>
+    )
+}
+
+<style>
+    .container-main {
+        padding-top: calc(var(--spacing) * 2);
+        padding-bottom: calc(var(--spacing) * 6);
+        position: relative;
+    }
+
+    @media (min-width: 1024px) {
+        .container-main {
+            padding-left: calc(var(--spacing) * 8);
+        }
+    }
+
+    @media (min-width: 1280px) {
+        .container-main {
+            grid-template-columns: 1fr 240px;
+            display: grid;
+            gap: 2.5rem;
+            padding-top: calc(var(--spacing) * 8);
+            padding-bottom: calc(var(--spacing) * 8);
+        }
+    }
+
+    .main {
+        max-width: 40rem;
+        min-width: 0;
+        width: 100%;
+        margin-inline: auto;
+        padding-inline: calc(var(--spacing) * 4);
+        padding-top: calc(var(--spacing) * 4);
+
+        main {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing) * 6);
+        }
+    }
+
+    @media (min-width: 768px) {
+        .main {
+            padding-inline: 0;
+        }
+    }
+
+    .toc {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        display: none;
+    }
+    @media (min-width: 1280px) {
+        .toc {
+            display: block;
+        }
+    }
+</style>

package/components/overrides/parts/Drawer.astro

@@ -0,0 +1,232 @@
+---
+import userConfig from 'virtual:lucode-starlight-config';
+import { getTranslation } from './NavBar.astro';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+const { sidebar } = Astro.locals.starlightRoute;
+
+const currentPath = Astro.url.pathname;
+---
+
+<div popover="auto" id="drawer">
+    <button class="sheet-overlay" popovertarget="drawer" popovertargetaction="hide"></button>
+    <div class="content">
+        <div class="header">
+            <button class="drag-icon" popovertarget="drawer" popovertargetaction="hide">
+                <span></span>
+            </button>
+        </div>
+        <div class="body">
+            <div class="links-nav">
+                {
+                    userConfig.navLinks?.map((nav) => {
+                        const absoluteLinkRegex = /^https?:\/\//;
+
+                        const link =
+                            !absoluteLinkRegex.test(nav.link) && Astro.currentLocale
+                                ? getRelativeLocaleUrl(Astro.currentLocale, nav.link)
+                                : nav.link;
+                        const label =
+                            typeof nav.label === 'string'
+                                ? nav.label
+                                : getTranslation(nav.label, nav.link, 'label');
+
+                        return (
+                            <a href={link} {...nav.attrs}>
+                                {label}
+                                {nav.badge && <span class="badge">{nav.badge}</span>}
+                            </a>
+                        );
+                    })
+                }
+            </div>
+
+            <div class="links-docs">
+                {
+                    sidebar.map(
+                        (entry) =>
+                            entry.type !== 'link' && (
+                                <div class="container-sidebar-entry">
+                                    <h4 class="entry-title">{entry.label}</h4>
+
+                                    {entry.entries.map(
+                                        (link) =>
+                                            link.type === 'link' && (
+                                                <a
+                                                    href={link.href}
+                                                    {...link.attrs}
+                                                    data-active={currentPath === link.href}
+                                                >
+                                                    {link.label}
+                                                </a>
+                                            )
+                                    )}
+                                </div>
+                            )
+                    )
+                }
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    button {
+        all: unset;
+    }
+
+    [popover] {
+        padding: 0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        opacity: 0;
+        pointer-events: none;
+        align-items: center;
+        flex-direction: column;
+        justify-content: flex-end;
+        transition: 0.1s linear;
+        z-index: 1000;
+        background: transparent;
+        border: none;
+        overflow: hidden;
+    }
+
+    [popover]::backdrop {
+        background: color-mix(in oklab, black 80%, transparent);
+        backdrop-filter: blur(2px);
+    }
+
+    [popover]:popover-open {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    [popover]:popover-open .content {
+        transform: translateY(0%);
+    }
+
+    .sheet-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100vw;
+        height: 100vh;
+        opacity: 0.1;
+        background-color: transparent;
+    }
+
+    .content {
+        width: 100%;
+        position: relative;
+        background: var(--background);
+        max-height: 100vh;
+        height: 70vh;
+        max-width: 1150px;
+        transform: translateY(100%);
+        border-radius: 12px 12px 0 0;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
+        transition: 0.3s ease;
+    }
+
+    .header {
+        display: flex;
+        justify-content: center;
+    }
+
+    .header .drag-icon span {
+        height: calc(var(--spacing) * 1);
+        width: 100px;
+        display: block;
+        background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
+        border-radius: 9999px;
+        margin-top: calc(var(--spacing) * 1);
+    }
+
+    .body {
+        height: 100%;
+        overflow-y: auto;
+        padding: 1.5rem;
+    }
+
+    .body::-webkit-scrollbar {
+        width: 0;
+    }
+
+    .links-nav {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .links-nav a {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    .links-docs {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 2);
+    }
+
+    .container-sidebar-entry {
+        padding-top: calc(var(--spacing) * 6);
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 2);
+
+        &:last-child {
+            margin-bottom: calc(var(--spacing) * 4);
+        }
+    }
+
+    .entry-title {
+        font-weight: 500;
+    }
+
+    .container-sidebar-entry a {
+        font-size: 1rem;
+        line-height: 1.2rem;
+        color: var(--muted-foreground);
+        text-decoration: inherit;
+
+        &[data-active='true'] {
+            color: var(--foreground);
+            font-weight: 500;
+        }
+    }
+
+    .badge {
+        padding-top: calc(var(--spacing) * 0.5);
+        padding-bottom: calc(var(--spacing) * 0.5);
+        padding-left: calc(var(--spacing) * 1.5);
+        padding-right: calc(var(--spacing) * 1.5);
+        margin-left: calc(var(--spacing) * 2);
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+        font-weight: 400;
+        line-height: 1;
+        text-decoration: none;
+        background: #adfa1d;
+        color: #000000;
+    }
+</style>
+
+<script>
+    const drawer = document.getElementById('drawer');
+    if (drawer) {
+        drawer.addEventListener('toggle', (e) => {
+            const event = e as ToggleEvent;
+            const isOpen = event.newState === 'open';
+            document.documentElement.style.overflow = isOpen ? 'hidden' : '';
+            document.body.style.overflow = isOpen ? 'hidden' : '';
+        });
+    }
+</script>

package/components/overrides/parts/MobileMenuToggle.astro

@@ -0,0 +1,42 @@
+<button class="show-modal" popovertargetaction="toggle" popovertarget="drawer">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+    >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"
+        ></path>
+    </svg>
+    <span class="sr-only">Toggle Menu</span>
+</button>
+
+<style>
+    button {
+        all: unset;
+
+        display: inline-flex;
+        margin-right: calc(var(--spacing) * 2);
+        margin-left: calc(var(--spacing) * -2);
+        height: 2rem;
+        width: 2rem;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: calc(var(--spacing) * 2);
+        padding-top: calc(var(--spacing) * 2);
+        font-size: 1rem;
+        line-height: 1.5rem;
+    }
+
+    @media (min-width: 1024px) {
+        button {
+            display: none;
+        }
+    }
+
+    button > svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+</style>