cooking/recipes/README.md
2026-09-13 14:50:11 -07:00

206 lines
5.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Recipe Content Structure
This directory contains all recipe content for the cooking website.
## Folder Organization
```
recipes/
├── appetizers/
├── mains/
├── desserts/
├── sides/
├── beverages/
└── breads/
```
Each recipe follows this structure:
```
recipes/category/
└── recipe-slug/
├── recipe-slug.md
└── assets/
├── hero.jpg
├── step1.jpg
└── ...
```
**Note:** All recipe content (markdown files and images) lives together in the top-level `recipes/` folder for better organization and readability. This keeps everything for a recipe in one place.
## Recipe Format
### File Structure
The `.md` 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 file:
```yaml
---
title: "Recipe Title"
slug: "recipe-slug"
date: "YYYY-MM-DD"
lastUpdated: "YYYY-MM-DD"
category: "mains"
tags: ["tag1", "tag2", "tag3"]
cookTime: 45
prepTime: 20
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 (free-form string, e.g. "mains", "soups")
- `tags` - Array of tags (free-form strings, e.g. ["italian", "chicken"])
- `cookTime` - Active cooking time in minutes
- `prepTime` - Preparation time in minutes
- `servings` - Number of servings
- `author` - Author ID (references `public/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:** Author IDs must match entries in `public/authors.json`. Categories and tags are free-form strings — there is no taxonomy registry file.
#### Content Sections
Content is plain markdown, divided into sections with directives. Each `:::name` … `:::` block becomes a tab:
1. **`:::photos`** - Recipe images; the image title is the caption: `![Alt](./assets/hero.jpg "Caption")`
2. **`:::ingredients`** - Lists of ingredients (can use `###` subsections)
3. **`:::instructions`** - Step-by-step cooking instructions (can use `###` subsections)
4. **`:::notes`** - Tips, variations, storage info (optional)
5. **`:::references`** - Sources, inspirations, credits (optional)
Markdown before the first section is intro prose; markdown after the last is outro prose.
#### Recipe Card (optional)
Add `::card` on its own line for a **Recipe Card** tab: a 5×7 in, 300 DPI PNG built from the ingredients and instructions, ready to download or print. Long recipes are split into a front and back automatically.
To put a shorter version on the card, use the container form with **four** colons. Leave out a section to use the full one:
```md
::::card
:::ingredients
- 2 cups flour
- 1 cup sugar
:::
::::
```
#### Example Recipe
```md
---
title: "Recipe Name"
slug: "recipe-name"
date: "2026-02-08"
lastUpdated: "2026-02-08"
category: "mains"
tags: ["italian", "chicken"]
cookTime: 45
prepTime: 20
servings: 4
author: "PWS"
description: "Short description for SEO and previews"
featured: false
display: true
displayPhoto: "./assets/hero.jpg"
---
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
### For the Sauce
- 1 cup sauce base
:::
:::instructions
### Preparation
1. **Step name**: Detailed instruction with technique.
2. **Another step**: More details here.
### Cooking
1. **Heat and cook**: Continue with numbered steps.
:::
:::notes
### Storage
- How to store leftovers
:::
:::references
- Source credits
:::
::card
```
Typos in directive names (e.g. `:::ingrediants`) fail the build with the file and line number.
## 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
## Adding New Recipes
1. Create recipe folder: `recipes/[category]/recipe-name/`
2. Create `recipe-name.md` with frontmatter and content
3. Create `assets/` subfolder for images
4. Add images to the `assets/` folder
5. Reference images using relative paths: `./assets/image.jpg`
6. Build locally to verify rendering
7. Commit and push (everything is tracked in git)
## Best Practices
- 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)