@grove-dev/starlight 0.1.9

package/components/custom/dropdown/DropdownContent.astro

@@ -0,0 +1,179 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'> & {
+    /**
+     * Side of the dropdown
+     * @default bottom
+     */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Alignment of the dropdown
+     * @default start
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Offset distance in pixels
+     * @default 4
+     */
+    sideOffset?: number;
+    /**
+     * Open and close animation duration in milliseconds
+     * @default 150
+     */
+    animationDuration?: number;
+};
+
+const {
+    class: className,
+    side = 'bottom',
+    align = 'start',
+    sideOffset = 4,
+    animationDuration = 150,
+    ...rest
+} = Astro.props;
+---
+
+<div
+    role="menu"
+    data-side={side}
+    data-align={align}
+    data-state="closed"
+    tabindex="-1"
+    aria-orientation="vertical"
+    class:list={['starwind-dropdown-content', className]}
+    style={{
+        display: 'none',
+        animationDuration: `${animationDuration}ms`,
+        marginTop: side === 'bottom' ? `${sideOffset}px` : undefined,
+        marginBottom: side === 'top' ? `${sideOffset}px` : undefined,
+        marginLeft: side === 'right' ? `${sideOffset}px` : undefined,
+        marginRight: side === 'left' ? `${sideOffset}px` : undefined,
+    }}
+    {...rest}
+    data-slot="dropdown-content"
+>
+    <slot />
+</div>
+
+<style>
+    div[data-slot='dropdown-content'] {
+        background-color: var(--popover-background, var(--muted));
+        color: var(var(--popover-foreground), var(--foreground));
+        z-index: 50;
+        min-width: 9rem;
+        overflow-x: hidden;
+        overflow-y: auto;
+        border-radius: var(--radius);
+        border: 1px solid var(--border);
+        padding: calc(var(--spacing) * 0.5);
+        box-shadow: var(--shadow-md);
+        position: absolute;
+        will-change: transform;
+        width: max-content;
+
+        &[data-state='open'] {
+            animation-name: fade-in, zoom-in-95;
+            animation-duration: var(--animation-duration);
+        }
+
+        &[data-state='closed'] {
+            animation-name: fade-out, zoom-out-95;
+            animation-duration: var(--animation-duration);
+            animation-fill-mode: forwards;
+        }
+
+        &[data-side='bottom'] {
+            top: 100%;
+            margin-top: var(--side-offset);
+        }
+
+        &[data-side='top'] {
+            bottom: 100%;
+            margin-bottom: var(--side-offset);
+        }
+
+        &[data-side='right'] {
+            left: 100%;
+            margin-left: var(--side-offset);
+        }
+
+        &[data-side='left'] {
+            right: 100%;
+            margin-right: var(--side-offset);
+        }
+
+        &[data-side='top'][data-align='start'],
+        &[data-side='bottom'][data-align='start'] {
+            left: 0;
+        }
+
+        &[data-side='top'][data-align='center'],
+        &[data-side='bottom'][data-align='center'] {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        &[data-side='top'][data-align='end'],
+        &[data-side='bottom'][data-align='end'] {
+            right: 0;
+        }
+
+        &[data-side='left'][data-align='start'],
+        &[data-side='right'][data-align='start'] {
+            top: 0;
+        }
+
+        &[data-side='left'][data-align='center'],
+        &[data-side='right'][data-align='center'] {
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &[data-side='left'][data-align='end'],
+        &[data-side='right'][data-align='end'] {
+            bottom: 0;
+        }
+
+        /* animations */
+        @keyframes fade-in {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes fade-out {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0;
+            }
+        }
+
+        @keyframes zoom-in-95 {
+            from {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        @keyframes zoom-out-95 {
+            from {
+                opacity: 1;
+                transform: scale(1);
+            }
+            to {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+        }
+    }
+</style>

package/components/custom/dropdown/DropdownItem.astro

@@ -0,0 +1,72 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+    /**
+     * Whether the item is inset (has left padding)
+     */
+    inset?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+};
+
+const { class: className, inset = false, disabled = false, as: Tag = 'div', ...rest } = Astro.props;
+---
+
+<Tag
+    class:list={['starwind-dropdown-item', className]}
+    role="menuitem"
+    tabindex={disabled ? '-1' : '0'}
+    data-disabled={disabled ? 'true' : undefined}
+    data-inset={inset ? 'true' : undefined}
+    data-slot="dropdown-item"
+    clas
+    {...rest}
+>
+    <slot />
+</Tag>
+
+<style>
+    .starwind-dropdown-item {
+        position: relative;
+        display: flex;
+        cursor: default;
+        align-items: center;
+        gap: calc(var(--spacing) * 2);
+        border-radius: calc(var(--radius) * 0.75);
+        padding-inline: calc(var(--spacing) * 2);
+        padding-block: calc(var(--spacing) * 1.5);
+        transition-property: background-color, color;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 100ms;
+        outline: none;
+        user-select: none;
+        text-decoration: none;
+        color: inherit;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+
+        &:focus {
+            background-color: var(--accent);
+            color: var(--accent-foreground);
+        }
+
+        > svg {
+            width: 1rem;
+            height: 1rem;
+            flex-shrink: 0;
+            color: var(--muted-foreground);
+        }
+
+        &[data-disabled='true'] {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+
+        &[data-inset='true'] {
+            padding-left: calc(var(--spacing) * 4);
+        }
+    }
+</style>

package/components/custom/dropdown/DropdownLabel.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'> & {
+    /**
+     * Whether the label is inset (has left padding)
+     */
+    inset?: boolean;
+};
+
+const { class: className, inset = false, ...rest } = Astro.props;
+---
+
+<div {...rest} data-slot="dropdown-label" data-inset={inset ? 'true' : undefined}>
+    <slot />
+</div>
+
+<style>
+    [data-slot='dropdown-label'] {
+        color: var(--muted-foreground);
+        padding-inline: calc(var(--spacing) * 2);
+        padding-block: calc(var(--spacing) * 1.5);
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 500;
+    }
+
+    [data-slot='dropdown-label'][data-inset='true'] {
+        padding-left: calc(var(--spacing) * 8);
+    }
+</style>

package/components/custom/dropdown/DropdownSeparator.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div role="separator" aria-orientation="horizontal" {...rest} data-slot="dropdown-separator"></div>
+
+<style>
+    div[data-slot='dropdown-separator'] {
+        background-color: var(--border);
+        margin-inline: calc(var(--spacing) * -1);
+        margin-block: var(--spacing);
+        height: 1px;
+    }
+</style>

package/components/custom/dropdown/DropdownShortcut.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'span'>;
+
+const { ...props } = Astro.props;
+---
+
+<span {...props}>
+    <slot />
+</span>
+
+<style>
+    span {
+        color: var(--muted-foreground);
+        margin-left: auto;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        letter-spacing: 0.05em;
+        transition-property: background-color, color;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 100ms;
+    }
+</style>

package/components/custom/dropdown/DropdownTrigger.astro

@@ -0,0 +1,54 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import LinkButton from '../LinkButton.astro';
+
+type Props = Omit<HTMLAttributes<'button'>, 'role' | 'type'> & {
+    /**
+     * When true, the component will render its child element with a simple wrapper instead of a button component
+     */
+    asChild?: boolean;
+
+    variant?: 'primary' | 'secondary' | 'minimal';
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+};
+
+const {
+    class: className,
+    variant = 'secondary',
+    size = 'sm',
+    asChild = false,
+    ...rest
+} = Astro.props;
+
+// Get the first child element if asChild is true
+let hasChildren = false;
+if (Astro.slots.has('default')) {
+    hasChildren = true;
+}
+---
+
+{
+    asChild && hasChildren ? (
+        <div
+            class:list={['starwind-dropdown-trigger', className]}
+            data-slot="dropdown-trigger"
+            data-as-child
+        >
+            <slot />
+        </div>
+    ) : (
+        <LinkButton
+            type="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            data-state="closed"
+            data-slot="dropdown-trigger"
+            class:list={[className]}
+            variant={variant}
+            size={size}
+            {...rest}
+        >
+            <slot />
+        </LinkButton>
+    )
+}

package/components/custom/dropdown/index.ts

@@ -0,0 +1,29 @@
+// partially from https://starwind.dev/docs/components/dropdown/
+
+import Dropdown from './Dropdown.astro';
+import DropdownContent from './DropdownContent.astro';
+import DropdownItem from './DropdownItem.astro';
+import DropdownLabel from './DropdownLabel.astro';
+import DropdownSeparator from './DropdownSeparator.astro';
+import DropdownShortcut from './DropdownShortcut.astro';
+import DropdownTrigger from './DropdownTrigger.astro';
+
+export {
+    Dropdown,
+    DropdownContent,
+    DropdownItem,
+    DropdownLabel,
+    DropdownSeparator,
+    DropdownShortcut,
+    DropdownTrigger,
+};
+
+export default {
+    Root: Dropdown,
+    Trigger: DropdownTrigger,
+    Content: DropdownContent,
+    Item: DropdownItem,
+    Label: DropdownLabel,
+    Separator: DropdownSeparator,
+    Shortcut: DropdownShortcut,
+};

package/components/overrides/ContentPanel.astro

@@ -0,0 +1 @@
+<slot />

package/components/overrides/Footer.astro

@@ -0,0 +1,54 @@
+---
+import EditLink from 'virtual:starlight/components/EditLink';
+import LastUpdated from 'virtual:starlight/components/LastUpdated';
+import Pagination from 'virtual:starlight/components/Pagination';
+import config from 'virtual:starlight/user-config';
+
+const {
+    entry: {
+        data: { template },
+    },
+} = Astro.locals.starlightRoute;
+
+const { lastUpdated: showLastUpdated, editLink } = config;
+const showEditLink = editLink?.baseUrl ? true : false;
+---
+
+<!-- footer -->{
+    template === 'doc' && (
+        <footer>
+            {(showEditLink || showLastUpdated) && (
+                <div data-slot="doc-footer-meta">
+                    <LastUpdated />
+                    <EditLink />
+                </div>
+            )}
+
+            <Pagination />
+        </footer>
+    )
+}
+
+<style>
+    .padding-negative {
+        margin-bottom: -3vh;
+    }
+
+    [data-slot='doc-footer-meta'] {
+        display: flex;
+        gap: calc(var(--spacing) * 4);
+        align-items: center;
+        justify-content: end;
+        font-size: 0.875em;
+        color: var(--muted-foreground);
+        margin-top: calc(var(--spacing) * 8);
+        opacity: 0.75;
+    }
+</style>
+
+<style is:global>
+    footer.sl-flex {
+        border-top: none !important;
+        display: flex !important;
+    }
+</style>

package/components/overrides/Header.astro

@@ -0,0 +1,93 @@
+---
+import config from 'virtual:starlight/user-config';
+import Search from './Search.astro';
+import SocialIcons from './SocialIcons.astro';
+import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro';
+
+import ThemeSelect from './ThemeSelect.astro';
+import SiteTitle from './SiteTitle.astro';
+import NavBar from './parts/NavBar.astro';
+import MobileMenuToggle from './parts/MobileMenuToggle.astro';
+
+/** render the `Search` component if Pagefind is enabled or the default search component has been overridden. */
+const shouldRenderSearch =
+    config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+---
+
+<MobileMenuToggle />
+
+<div class="site-title-wrapper">
+    <SiteTitle />
+    <NavBar />
+</div>
+
+<div class="header-right">
+    {shouldRenderSearch && <Search />}
+
+    <nav class="header-nav">
+        <div>
+            <SocialIcons />
+        </div>
+        <div>
+            <ThemeSelect />
+        </div>
+        <div>
+            <LanguageSelect />
+        </div>
+    </nav>
+</div>
+
+<style>
+    .site-title-wrapper {
+        display: none;
+        margin-right: calc(var(--spacing) * 4);
+    }
+
+    @media (min-width: 768px) {
+        .site-title-wrapper {
+            display: flex;
+        }
+    }
+
+    .header-right {
+        gap: 0.5rem;
+        justify-content: space-between;
+        align-items: center;
+        flex: 1 1 0%;
+        display: flex;
+    }
+
+    @media (min-width: 768px) {
+        .header-right {
+            justify-content: flex-end;
+        }
+    }
+
+    .header-nav {
+        gap: 0.125rem;
+        align-items: center;
+        display: flex;
+    }
+
+    .header-nav > div:has(> :not(script)) {
+        display: flex;
+        align-items: center;
+    }
+
+    .header-nav > div:has(> :not(script)) + div:has(> :not(script)) {
+        position: relative;
+        margin-left: calc(var(--spacing) * 1);
+        padding-left: calc(var(--spacing) * 3);
+    }
+
+    .header-nav > div:has(> :not(script)) + div:has(> :not(script))::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 1px;
+        height: 1rem;
+        background-color: color-mix(in oklab, var(--border) 85%, transparent);
+        transform: translateY(-50%);
+    }
+</style>