@grove-dev/starlight 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Turtuvshin Byambaa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,200 @@
+# @grove-dev/starlight
+
+Grove Starlight is a theme plugin for Astro Starlight
+
+## Features
+
+- Starlight plugin API integration.
+- Custom overrides for header, sidebar, page frame, hero, footer, search, table of contents, pagination, and Markdown content.
+- Token-based, layered CSS theme with light and dark mode values.
+- Styled built-in Starlight components including hero splashes, cards, link cards, asides, badges, tabs, steps, file trees, and link buttons.
+
+## Installation
+
+```bash
+npm install @grove-dev/starlight
+```
+
+With Bun:
+
+```bash
+bun add @grove-dev/starlight
+```
+
+## Usage
+
+Add the plugin inside the Starlight integration:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import lucode from '@grove-dev/starlight';
+
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: 'My Docs',
+      plugins: [lucode()],
+    }),
+  ],
+});
+```
+
+The plugin automatically registers Lucode component overrides, appends the theme CSS files, and configures Expressive Code.
+
+## Attribution
+
+This theme recreates the design of the documentation site for [shadcn/ui](https://ui.shadcn.com/).
+
+I used [adrian-ub/starlight-theme-black](https://github.com/adrian-ub/starlight-theme-black) as a base, which brought an earlier shadcn/ui-inspired design to Astro Starlight.
+
+## Docs Schema
+
+To use Lucode's splash-page frontmatter fields with type checking, extend the Starlight docs schema:
+
+```ts
+// src/content.config.ts
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+import { ExtendDocsSchema } from '@grove-dev/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({
+    loader: docsLoader(),
+    schema: docsSchema({ extend: ExtendDocsSchema }),
+  }),
+};
+```
+
+## Plugin Options
+
+```ts
+type LucodeStarlightUserConfig = {
+  navLinks?: Link[];
+  footerText?: string;
+};
+
+type Link = {
+  label: string | Record<string, string>;
+  link: string;
+  badge?: string;
+  attrs?: Record<string, string | number | boolean | undefined>;
+};
+```
+
+Example:
+
+```js
+lucode({
+  navLinks: [
+    { label: 'Docs', link: '/guides/getting-started/' },
+    { label: 'GitHub', link: 'https://github.com/lucas-labs/@grove-dev/starlight-theme' },
+  ],
+  footerText:
+    'Built with [Lucode Starlight](https://github.com/lucas-labs/@grove-dev/starlight-theme).',
+});
+```
+
+## Splash Pages
+
+Use Starlight's `template: splash` and set `hero.layout`:
+
+```md
+---
+title: Developer Portal
+description: API docs, examples, and integration guides.
+template: splash
+hero:
+  layout: split-left
+  announcement:
+    text: Version 2.0 is ready
+    link: /guides/getting-started/
+  actions:
+    - text: Get started
+      link: /guides/getting-started/
+      icon: right-arrow
+---
+```
+
+Available layouts:
+
+- `centered`
+- `centered-top`
+- `split-left`
+- `split-right`
+- `banner`
+
+## Components
+
+Import user-facing components from `@grove-dev/starlight/components`:
+
+```astro
+---
+import { ContainerSection, Dropdown, LinkButton } from '@grove-dev/starlight/components';
+---
+
+<ContainerSection width="lg">
+  <h2>Build better docs</h2>
+  <p>Use Lucode sections on splash pages and custom MDX content.</p>
+  <LinkButton href="/@grove-dev/starlight-theme/guides/getting-started/">Get started</LinkButton>
+</ContainerSection>
+
+<Dropdown.Root>
+  <Dropdown.Trigger variant="secondary">Theme actions</Dropdown.Trigger>
+  <Dropdown.Content align="start">
+    <Dropdown.Label>Documentation</Dropdown.Label>
+    <Dropdown.Item as="a" href="/guides/getting-started/">
+      Getting Started
+    </Dropdown.Item>
+    <Dropdown.Item as="a" href="/guides/theming/">
+      Customize Theme
+      <Dropdown.Shortcut>CSS</Dropdown.Shortcut>
+    </Dropdown.Item>
+  </Dropdown.Content>
+</Dropdown.Root>
+```
+
+### `LinkButton`
+
+Props:
+
+- `href`: anchor destination.
+- `variant`: `primary`, `secondary`, or `minimal`.
+- `size`: `2xs`, `xs`, `sm`, `md`, or `lg`.
+- Other anchor attributes are forwarded.
+
+### `ContainerSection`
+
+Props:
+
+- `width`: `sm`, `md`, `lg`, or `xl`.
+
+### `Dropdown`
+
+Compound menu component exported as `Dropdown.Root`, `Dropdown.Trigger`, `Dropdown.Content`, `Dropdown.Item`, `Dropdown.Label`, `Dropdown.Separator`, and `Dropdown.Shortcut`.
+
+Useful props:
+
+- `Dropdown.Root`: `openOnHover`, `closeDelay`.
+- `Dropdown.Trigger`: `asChild`, `variant`, `size`.
+- `Dropdown.Content`: `side`, `align`, `sideOffset`, `animationDuration`.
+- `Dropdown.Item`: `as`, `inset`, `disabled`.
+- `Dropdown.Label`: `inset`.
+
+## Styling
+
+Override theme tokens from your app CSS:
+
+```css
+:root {
+  --radius: 0.5rem;
+  --sidebar-width: 17rem;
+  --container-max-width: 1440px;
+}
+```
+
+## License
+
+MIT

package/components/custom/ContainerSection.astro

@@ -0,0 +1,58 @@
+---
+type Props = {
+    width?: 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const { width = 'lg' } = Astro.props;
+---
+
+<div class="container-section" data-width={width}>
+    <div class="container-wrapper">
+        <div class="container">
+            <slot />
+        </div>
+    </div>
+</div>
+
+<style>
+    .container-section {
+        padding-inline: calc(var(--spacing) * 2);
+
+        /* higher padding on larger screens */
+        @media (min-width: 640px) {
+            padding-inline: calc(var(--spacing) * 4);
+        }
+
+        @media (min-width: 1024px) {
+            padding-inline: calc(var(--spacing) * 12);
+        }
+
+        .container-wrapper {
+            max-width: var(--section-max-width);
+        }
+
+        &:last-of-type {
+            padding-bottom: 0;
+        }
+
+        + .container-section {
+            margin-top: calc(var(--spacing) * 12);
+        }
+
+        &[data-width='sm'] {
+            --section-max-width: 640px;
+        }
+
+        &[data-width='md'] {
+            --section-max-width: 768px;
+        }
+
+        &[data-width='lg'] {
+            --section-max-width: 1024px;
+        }
+
+        &[data-width='xl'] {
+            --section-max-width: 1280px;
+        }
+    }
+</style>

package/components/custom/LinkButton.astro

@@ -0,0 +1,141 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = (Omit<HTMLAttributes<'a'>, 'href'> | HTMLAttributes<'button'>) & {
+    href?: string | URL | null | undefined;
+    variant?: 'primary' | 'secondary' | 'minimal';
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+};
+
+const { class: className, variant = 'primary', size = 'md', ...attrs } = Astro.props;
+
+const Tag = attrs.href ? 'a' : 'button';
+---
+
+<Tag
+    data-slot="button"
+    class:list={['link-button', variant, className]}
+    data-size={size}
+    {...attrs as any}
+>
+    <slot />
+</Tag>
+
+<style>
+    [data-slot='button'],
+    .link-button {
+        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;
+        color: var(--primary-foreground);
+        white-space: nowrap;
+        gap: 0.5rem;
+        justify-content: center;
+        align-items: center;
+        display: inline-flex;
+        text-decoration: inherit;
+        border: none;
+
+        height: var(--button-height, calc(var(--spacing) * 8));
+        width: var(--button-width, auto);
+        font-weight: var(--button-font-weight, 500);
+        font-size: var(--button-font-size, 0.875rem);
+        line-height: var(--button-line-height, 1rem);
+        padding-left: var(--button-padding-l, var(--button-padding-x, calc(var(--spacing) * 2.5)));
+        padding-right: var(--button-padding-r, var(--button-padding-x, calc(var(--spacing) * 2.5)));
+        border-radius: var(--button-radius, var(--radius));
+
+        &[data-size='2xs'] {
+            --button-height: calc(var(--spacing) * 5.5);
+            --button-padding-l: calc(var(--spacing) * 2);
+            --button-padding-r: var(--spacing);
+            --button-font-size: 0.75rem;
+            --border-radius: 100%;
+        }
+
+        &[data-size='xs'] {
+            --button-radius: calc(var(--radius) - 2px);
+            --button-height: calc(var(--spacing) * 6);
+            --button-padding-x: calc(var(--spacing) * 2);
+            --button-font-size: 0.75rem;
+        }
+
+        &[data-size='sm'] {
+            --button-height: calc(var(--spacing) * 7);
+            --button-padding-x: calc(var(--spacing) * 2.5);
+            --button-font-size: 0.8rem;
+        }
+
+        &[data-size='lg'] {
+            --button-height: calc(var(--spacing) * 8.5);
+            --button-padding-x: calc(var(--spacing) * 2.5);
+            --button-font-size: 0.875rem;
+        }
+
+        &[data-size='icon-sm'] {
+            --button-height: calc(var(--spacing) * 6);
+            --button-width: calc(var(--spacing) * 6);
+            --button-padding-x: 0;
+            --button-font-size: 0;
+            --button-radius: calc(var(--radius) - 3px);
+
+            svg {
+                width: 1rem;
+                height: 1rem;
+            }
+        }
+
+        &[data-size='icon-md'] {
+            --button-height: calc(var(--spacing) * 7);
+            --button-width: calc(var(--spacing) * 7);
+            --button-padding-x: 0;
+            --button-font-size: 0;
+            --button-radius: calc(var(--radius) - 2px);
+
+            svg {
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+
+        &[data-size='icon-lg'] {
+            --button-height: calc(var(--spacing) * 8);
+            --button-width: calc(var(--spacing) * 8);
+            --button-padding-x: 0;
+            --button-font-size: 0;
+            --button-radius: calc(var(--radius) - 1px);
+
+            svg {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+    }
+
+    .primary {
+        background-color: var(--primary);
+    }
+
+    .primary:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+    }
+
+    .secondary {
+        background-color: var(--secondary);
+        color: var(--secondary-foreground);
+    }
+
+    .secondary:hover {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+    }
+
+    .minimal {
+        color: var(--accent-foreground);
+    }
+
+    .minimal:hover {
+        color: var(--accent-foreground);
+        background-color: var(--accent);
+    }
+</style>