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
- **CSS variable theming**: override `--theme-hue-override` or `--layout-width-override` in plain CSS
- **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

Add the theme as a GitHub dependency along with its peer dependencies:

```json
// package.json
{
  "dependencies": {
    "astro-pigment": "github:psd-coder/astro-pigment",
    "astro": "^6.0.0",
    "nanotags": "^0.14.0",
    "nanostores": "^1.0.0"
  }
}
```

Then install:

```bash
pnpm install
```

## 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",
      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
  hueSlider: true, // shows a color slider in the header
})
```

Drag the slider, pick a hue you like, then hardcode it in CSS and remove `hueSlider`:

```css
:root {
  --theme-hue-override: 135; /* the value you picked */
}
```