mirror of
https://github.com/runyanjake/cooking.git
synced 2026-11-10 15:14:50 -08:00
Every top-level :::name block is now a tab, shown in file order, so authors can add custom tabs and reorder them in the markdown. Titles come from the name or a :::name[Title] label. The recipe card is an ordinary :::card tab. Its body lists what it prints (::ingredients, or a block written just for the card), replacing ::card, the fallback to full sections, and its fixed tab position. All recipes are migrated, with pages and card images unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai>
222 lines
6.1 KiB
Markdown
222 lines
6.1 KiB
Markdown
# 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.
|
||
|
||
#### Tabs
|
||
|
||
The markdown controls the page. Every tab is a `:::name` … `:::` block, shown in the order it appears in the file, and nothing is added for you.
|
||
|
||
Any name works, so to add a tab just write one. The title comes from the name (`:::wine-pairing` becomes "Wine Pairing"), or set your own with a label: `:::notes[Chef Tips]`.
|
||
|
||
The usual tabs are:
|
||
|
||
1. **`:::photos`** - Recipe images; the image title is the 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
|
||
5. **`:::card`** - Printable recipe card (see below)
|
||
6. **`:::references`** - Sources, inspirations, credits
|
||
|
||
Markdown before the first tab is intro prose; markdown after the last is outro prose.
|
||
|
||
#### Recipe Card
|
||
|
||
`:::card` is a tab showing a 5×7 in, 300 DPI PNG. Click the image to view it full screen. List the one or two sections to print, using `::name` to reuse another tab. Long recipes are split into a front and back automatically.
|
||
|
||
```md
|
||
:::card[Recipe Card]
|
||
::ingredients
|
||
::instructions
|
||
:::
|
||
```
|
||
|
||
To put a shorter version on the card, write it inside. The outer fence then needs **four** colons:
|
||
|
||
```md
|
||
::::card[Recipe Card]
|
||
:::ingredients
|
||
- 2 cups flour
|
||
- 1 cup sugar
|
||
:::
|
||
::instructions
|
||
::::
|
||
```
|
||
|
||
#### 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
|
||

|
||
|
||

|
||
:::
|
||
|
||
:::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
|
||
:::
|
||
|
||
:::card[Recipe Card]
|
||
::ingredients
|
||
::instructions
|
||
:::
|
||
|
||
:::references
|
||
- Source credits
|
||
:::
|
||
```
|
||
|
||
Mistakes like duplicate tabs or a card listing a tab that doesn't exist fail the build with the file and line number. Any name is a valid tab, so check the page for misspelled ones.
|
||
|
||
## 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)
|