An [Astro 6](https://astro.build/) documentation theme with dark mode, interactive playgrounds, and SEO endpoints.
One integration call gives you a complete docs site: layout, navigation, table of contents, code highlighting,
LLM-friendly endpoints, and a library of interactive components.

- **Single integration**: rehype plugins, PostCSS, Shiki themes, sitemap, and SEO routes configured automatically
- **Dark mode**: three-state toggle (auto/light/dark) with View Transitions, no FOUC
- **Theming**: set `theme.hue` in config; all colors derive via OKLch
- **Interactive playgrounds**: CodeMirror editor + sandboxed live preview with console capture
- **LLM endpoints**: `/llms.txt` and `/llms-full.txt` auto-generated from your markdown content
- **Bundled fonts**: Martian Grotesk + Martian Mono auto-injected (opt out with `fonts: false`)
- **Accessible**: roving focus, ARIA attributes, keyboard navigation throughout
- **Zero build step**: Astro resolves `.astro`/`.ts` source directly from the package

## Installation

Install the theme along with its peer dependencies:

## Quick Start

### 1. Configure the integration

```js
// astro.config.mjs
import { defineConfig } from "astro/config";
import docsTheme from "astro-pigment";

export default defineConfig({
  integrations: [
    docsTheme({
      project: {
        name: "my-project",
        description: "A short description of your project",
        license: {
          name: "MIT",
          url: "https://github.com/your-name/your-repo/blob/main/LICENSE",
        },
        github: { user: "your-name", repository: "your-repo" },
      },
      author: { name: "Your Name", url: "https://x.com/your_handle" },
      icon: "src/assets/icon.svg",
      docs: {
        navLinks: [
          { href: "/", label: "Overview" },
          { href: "/api", label: "API" },
        ],
      },
    }),
  ],
});
```

### 2. Wire up the content collection

```ts
// src/content.config.ts
import { defineDocsCollections } from "astro-pigment/content";

export const collections = defineDocsCollections();
```

Drop `.md`/`.mdx` files into `src/content/docs/`. The integration injects `/[...slug]` automatically — pages render with the layout, TOC, prev/next navigation, and edit-on-github link out of the box. To render pages yourself, set `docs.renderDefaultPage: false` and create your own `src/pages/[...slug].astro` (reuse `getDocsStaticPaths` from `astro-pigment/utils/content` to skip the boilerplate).

Dark mode, sticky header, sidebar + mobile TOC, code copy buttons, favicons, webmanifest, sitemap, LLM endpoints, and footer are all wired up automatically.

### 3. Pick a theme hue (optional)

Temporarily enable the hue slider to find the right color for your site:

```js
docsTheme({
  // ...your config
  huePicker: true, // shows a hue picker in the header
});
```

Drag the slider, pick a hue you like, then set it in config and remove `huePicker`:

```js
docsTheme({
  // ...your config
  theme: { hue: 135 }, // the value you picked
});
```