@cocotte/astro-chrome

Theme-agnostic Astro chrome primitives for Cocotte brand marketing sites: BaseLayout, NavBar, SiteFoot.

Philosophy

The package ships structure, not style. Components emit semantic HTML decorated with .cocotte-* class names. Each brand site provides all visual styling via its own CSS targeting those classes.

Components

``

Page frame with named slots: `head`, `header`, `default`, `footer`.

``

Props: `brand`, `brandHref`, `nav: NavItem[]`, `current?`, `cta?`. Slots: `brand` (overrides the `brand` prop for custom mark composition). Ships a tiny inline script that wires `.cocotte-nav-toggle` ↔ `.cocotte-nav-links.is-open` for the hamburger.

``

Slot-driven: `mark`, `links`, `cross`, `fine`, plus default freeform.

Example brand layout

```astro

import { BaseLayout, NavBar, SiteFoot, type NavItem } from '@cocotte/astro-chrome'; import '@cocotte/astro-tokens/tokens.css'; import '../styles/tokens.css'; import '../styles/globals.css';

const FWT_NAV: NavItem[] = [ { key: 'about', label: 'About', href: '/about' }, { key: 'stop01', label: 'Stop 01', href: '/stops/01' }, ];

const { current, title, description } = Astro.props;

Futa Waifu Tour

Adult · 18+ only

\`\`\`