Add Storybook 10 style guide and design environment

[willtheorangeguy]

Summary

• Installs Storybook 10 with @storybook-astro/framework (community Astro 7 support) and @storybook/react for full Astro + React story coverage
• Adds 16 component stories covering all 13 Astro components and all 3 React islands
• Adds 2 MDX documentation pages: Introduction and Design Tokens (color palette, typography, spacing, focus styles)
• Configures light/dark theme toggle matching the site's data-theme CSS variable system
• Outputs the built style guide to public/styleguide/ so it deploys to /styleguide on the live site

What's included

Configuration

• .storybook/main.ts — Astro framework + React integration + @storybook/addon-docs + @storybook/addon-themes
• .storybook/preview.ts — withThemeByDataAttribute decorator (light/dark), viewport presets (mobile/tablet/desktop)

Documentation pages (src/stories/)

• Introduction.mdx — style guide overview, tech stack, file map
• DesignTokens.mdx — visual color swatches for both themes, typography scale, spacing ruler, border radius grid, focus style example

Astro component stories (src/components/*.stories.ts)

Hr, LinkButton (with slots + disabled state), Tag (sm/lg), Datetime (published/updated/large), BackButton, Breadcrumb, Card (with mock blog post data, h2/h3/long-title/with-modified-date variants), Pagination (first/middle/last/two-page/single-page), Footer, Header, Socials, ShareLinks, EditPost

React island stories (src/components/*.stories.tsx)

GoogleMapsStats (default + invalid URL), UnsplashStats (default + with access key), Comments (default + high-contrast Giscus theme)

Build integration

• package.json — adds storybook (dev server) and storybook:build scripts; Storybook now builds before astro build in npm run build so its output in public/styleguide/ is included in dist/
• .github/workflows/astro.yml — adds "Build Storybook style guide" step before the Astro build step
• .gitignore — excludes public/styleguide/ (generated at build time, same as public/pagefind)

Test plan

• Run npm run storybook locally and open http://localhost:6006
• Verify all component stories render in both light and dark themes
• Verify Design Tokens and Introduction pages load under "Design System"
• Run npm run storybook:build and confirm public/styleguide/index.html exists
• After merge, confirm the style guide is live at /styleguide on the deployed site

---

Generated by Claude Code