iRaceDeck Website

Overview

Astro + Starlight documentation site deployed via Firebase Hosting. Dark theme by default with the iRaceDeck brand.

Key Files

Brand

Colors are set as Starlight CSS custom properties in src/styles/custom.css.

Content Structure

All docs pages live under src/content/docs/docs/ and are served at /docs/....

text
1src/content/docs/
2├── index.mdx                        # Landing page at / (splash template)
3└── docs/
4    ├── index.md                     # Docs landing page at /docs/
5    ├── getting-started/
6    │   ├── installation.md
7    │   └── troubleshooting.md
8    ├── features/
9    │   ├── key-bindings.md
10    │   ├── flags-overlay.md
11    │   ├── focus-iracing-window.md
12    │   └── template-variables.md    # Source of truth for telemetry template vars
13    ├── actions/
14    │   ├── overview.md
15    │   ├── display-session/         # 2 actions
16    │   ├── driving/                 # 5 actions
17    │   ├── cockpit/                 # 5 actions
18    │   ├── view-camera/             # 5 actions
19    │   ├── media/                   # 1 action
20    │   ├── pit-service/             # 3 actions
21    │   ├── car-setup/               # 7 actions
22    │   └── communication/           # 2 actions
23    └── reference/
24        ├── action-types.md
25        └── keyboard-shortcuts.md

Sidebar

Defined in astro.config.mjs under starlight.sidebar. Uses { slug: "..." } entries pointing to content files. Categories match docs/reference/actions.json.

Adding/Editing Pages

1. Create or edit a .md file in src/content/docs/docs/
2. Add Starlight frontmatter (title, description, optional sidebar badge)
3. If new, add the slug to the sidebar in astro.config.mjs
4. Run pnpm dev to preview, pnpm build to verify

Action Doc Template

See the canonical example at packages/website/src/content/docs/docs/actions/pit-service/tire-service.md and the full rule at .claude/rules/website-action-docs.md. The short version:

md
1---
2title: {Action Name}
3description: {Brief description}
4sidebar:
5  badge:
6    text: "{N} modes"
7    variant: tip
8---
9
10{Intro paragraph}
11
12## Modes
13
14Select the mode from the **{Dropdown Label}** dropdown in the Property Inspector.
15
16### {Mode Name}
17
18{Mode description}
19
20##### Details
21
22- **Dial:** {rotation behavior, or `No rotation support`}
23- **Default binding:** {`Key`, `No default key binding`, or `No keyboard binding`}
24- **Telemetry-aware icon:** {`Yes` (with note on what updates) or `No`}
25
26##### Settings
27
28- No additional settings

For modes with settings, replace the ##### Settings block with one or more ##### Setting: {Name} subheaders documenting defaults and options inline.

Deployment

bash
1cd packages/website
2pnpm dev                  # Local dev server (http://localhost:4321)
3pnpm build                # Build to dist/
4pnpm preview              # Preview built site
5pnpm deploy               # Build + deploy to Firebase

Domain: iracedeck.com (Firebase Hosting with custom domain).

Common Changes

Update action count on landing page: Edit the stats row and category cards in src/content/docs/index.mdx Add an action page: Create .md in the right category folder, add slug to sidebar in astro.config.mjs, update docs/reference/actions.json, and update .claude/skills/iracedeck-actions/SKILL.md Change brand color: Update --sl-color-accent in src/styles/custom.css Update favicon: Replace files in public/, source from assets/favicon/ Add sidebar section: Edit sidebar array in astro.config.mjs