Sizzle — Recipe Wiki

A statically-exported recipe wiki built with Astro 6. Content is authored as markdown files and compiled to flat HTML at build time — no database, no API server.

Tech Stack

• Astro 6 (output: 'static') — pre-rendered HTML, zero runtime
• Content collections — markdown files with YAML front matter, validated via Zod
• Wiki-link syntax — [[Ingredient Name]] cross-references resolved at build time
• Client-side JS — inline, zero-dependency portion scaling only
• pnpm — package management

Project Structure

sizzle/
├── content/               # Seed data — markdown files
│   ├── ingredients/       #   23 files (name, tags)
│   ├── techniques/        #   10 files (name, tags, description)
│   └── recipes/           #    3 files (title, portions, tags, body)
├── spec/                  # Full specification documents
├── src/                   # Astro source
│   ├── content.config.ts  # Collection schemas
│   ├── layouts/           # Layout.astro (nav + main)
│   ├── pages/             # File-based routes
│   └── utils/             # Markdown rendering & link resolution
├── astro.config.mjs       # Static export config
└── package.json

Commands

Command	Action
pnpm dev	Start dev server at localhost:4321
pnpm build	Build production site to dist/
pnpm preview	Preview production build

Content

Each entity type lives in its own directory under content/:

• Ingredients: name, optional tags, optional body
• Techniques: name, optional tags, description body
• Recipes: title, portions, optional tags, body with ## Ingredients / ## Instructions sections

Wiki-links ([[Name]] or [[Name|Display Text]]) cross-reference any entity type. Resolution order: ingredients → techniques → recipes. Unresolved links render as plain text with brackets.

Routes

Path	Content
/	Landing page
/recipes	Recipe list
/recipes/:slug	Recipe detail with portion scaling
/ingredients	Ingredient list
/ingredients/:slug	Ingredient detail with "Used in" recipes
/techniques	Technique list
/techniques/:slug	Technique detail

Portion Scaling

Recipe pages include client-side controls to adjust ingredient quantities. Quantities scale proportionally when the portion count changes (buttons or direct input). Falls back to static display when JavaScript is disabled.

Deployment

pnpm build outputs flat HTML to dist/, deployable to any static host (Netlify, Vercel, S3, GitHub Pages).