cooking/public/recipes/README.md

Recipe Content Structure

This directory contains all recipe content for the cooking website.

Folder Organization

public/recipes/
├── appetizers/
├── mains/
├── desserts/
├── sides/
├── beverages/
└── breads/

Each recipe follows this structure:

public/recipes/category/
└── YYYY.MM.DD-recipe-slug/
    ├── YYYY.MM.DD-recipe-slug.mdx
    └── assets/
        ├── hero.jpg
        ├── step1.jpg
        └── ...

Note: All recipe content (MDX files and images) lives together in public/recipes/ for better organization and readability. This keeps everything for a recipe in one place.

Recipe Format

MDX File Structure

The .mdx file contains all recipe metadata and content in one place.

Frontmatter (Required)

All recipe metadata is stored in YAML frontmatter at the top of the MDX file:

---
title: "Recipe Title"
slug: "recipe-slug"
date: "YYYY-MM-DD"
lastUpdated: "YYYY-MM-DD"
category: "mains"
tags: ["tag1", "tag2", "tag3"]
dietary: ["vegetarian", "gluten-free"]
cookTime: 45
prepTime: 20
totalTime: 65
difficulty: "easy"
servings: 4
author: "Author Name"
description: "Short description for SEO and previews"
featured: true
display: true
displayPhoto: "./assets/hero.jpg"
---

Frontmatter Fields:

• title - Display title of the recipe
• slug - URL-friendly identifier
• date - Publication date (YYYY-MM-DD)
• lastUpdated - Last modification date (YYYY-MM-DD)
• category - Main category ID (references ../taxonomy.json)
• tags - Array of tag IDs (references ../taxonomy.json)
• dietary - Array of dietary tag IDs (references ../taxonomy.json)
• cookTime - Active cooking time in minutes
• prepTime - Preparation time in minutes
• totalTime - Total time in minutes
• difficulty - Difficulty ID: easy, medium, or hard (references ../taxonomy.json)
• servings - Number of servings
• author - Author ID (references ../authors.json)
• description - Brief description for SEO and cards
• featured - Boolean for homepage featuring
• display - Boolean to control visibility (set to false to hide recipe)
• displayPhoto - Relative path to display photo (e.g., "./assets/hero.jpg")

Note: Use IDs from the reference files (data/authors.json and data/taxonomy.json) to ensure consistency and enable validation.

Content Sections

The following ## (h2) sections are parsed into tabs in the UI:

1. ## Photos - Recipe images with captions
2. ## Ingredients - Lists of ingredients (can use h3 subsections)
3. ## Instructions - Step-by-step cooking instructions
4. ## Notes - Tips, variations, storage info (optional)
5. ## References - Sources, inspirations, credits (optional)

Example MDX Structure

---
title: "Recipe Name"
slug: "recipe-name"
date: "2026-02-08"
lastUpdated: "2026-02-08"
category: "mains"
tags: ["italian", "chicken"]
dietary: ["gluten-free-option"]
cookTime: 45
prepTime: 20
totalTime: 65
difficulty: "medium"
servings: 4
author: "PWS"
description: "Short description for SEO and previews"
featured: false
display: true
displayPhoto: "./assets/hero.jpg"
---

# Recipe Name

Introduction paragraph about the recipe.

## Photos

![Hero image](./assets/hero.jpg)
*Caption describing the image*

![Step photo](./assets/step1.jpg)
*Another helpful image*

## Ingredients

### For the Main Component
- 2 cups ingredient one
- 1 tablespoon ingredient two
- Salt and pepper to taste

### For the Sauce
- 1 cup sauce base
- Seasonings

## Instructions

### Preparation
1. **Step name**: Detailed instruction with technique.
2. **Another step**: More details here.

### Cooking
3. **Heat and cook**: Continue with numbered steps.
4. **Finish**: Final steps.

## Notes

### Tips for Success
- Helpful tip one
- Helpful tip two

### Storage
- How to store leftovers
- Freezing instructions

### Variations
- How to adapt the recipe

## References

- Source credits
- Inspiration mentions
- Cookbook references

Content Guidelines

Writing Style

• Use clear, conversational language
• Include helpful tips and context
• Explain techniques for beginners
• Add timing and temperature details

Photography

• Include hero shot (main finished dish)
• Add process shots for complex steps
• Use descriptive alt text for accessibility
• Optimize images (web-friendly sizes)

Tags

Choose from these categories:

• Cuisine: italian, mexican, asian, american, mediterranean, etc.
• Protein: chicken, beef, pork, seafood, vegetarian, vegan
• Meal Type: breakfast, lunch, dinner, snack, appetizer
• Occasion: weeknight, holiday, party, comfort-food
• Dietary: gluten-free, dairy-free, low-carb, keto, paleo
• Cooking Method: baking, grilling, slow-cooker, instant-pot
• Speed: quick-meals, one-pot, make-ahead, no-cook

Difficulty Levels

• easy: Beginner-friendly, simple techniques, common ingredients
• medium: Some cooking experience needed, multiple steps
• hard: Advanced techniques, precise timing, specialty equipment

Adding New Recipes

1. Create recipe folder: public/recipes/[category]/YYYY.MM.DD-recipe-name/
2. Create YYYY.MM.DD-recipe-name.mdx with frontmatter and content
3. Create assets/ subfolder for images
4. Add images to the assets/ folder
5. Reference images in MDX using relative paths: ./assets/image.jpg
6. Build locally to verify rendering
7. Commit and push (everything is tracked in git)

Best Practices

• Use consistent date formatting (YYYY.MM.DD)
• Keep slugs URL-friendly (lowercase, hyphens)
• Optimize images before adding (compress, resize)
• Test recipes before publishing
• Include metric and imperial measurements when possible
• Credit sources and inspirations
• Update featured flag sparingly (limit to 3-5 recipes)