Quick Recipe Vault

Quick Recipe Vault is a static website that reads recipes from Markdown files in this repository (/recipes). This makes the recipe collection publicly visible and collaboratively editable through GitHub commits/PRs.

Tags are sourced from recipes/metadata.json so filtering and editor tagging only use known tags.

Features

• Public recipe storage in repo files instead of browser-local storage.
• Recipe format based on Markdown + frontmatter (title, calories, tags, citation, images).
• Horizontal sliding gallery with search + tag filter + calorie cap filter.
• Smart ingredient search with synonym expansion (e.g. 牛肉 ⇒ 牛肋条 / 和牛 / beef variants).
• "🎲 I'm Feeling Hungry" button to jump to a random recipe from current filtered results.
• Language switcher (English / 中文) and light/dark mode toggle.
• Adaptive image rendering (no hard-cropping in modal/gallery previews).
• Modal-based upload/recipe editor with three rich editors: Ingredients, Instructions, and 成品演示.
• Supports multiple pasted images per editor, attachment previews, and removing images with sync between editor and attachment list.

Recipe file format

Each recipe is a Markdown file under /recipes, for example recipes/my-recipe.md:

---
title: My Recipe
calories: 780
tags: hosting-event, dinner
images:
  - recipes/images/my-recipe/photo1.jpg
  - recipes/images/my-recipe/photo2.jpg
---

## Ingredients
- item 1
- item 2

## Instructions
1. Step one
2. Step two

Add a new recipe publicly

1. Open the website and click Create Recipe (or edit an existing one via the card edit button).
2. Fill the form; tags must come from known tags in recipes/metadata.json, and optionally add a citation link to the original recipe.
3. Click GitHub Login once and save your token in browser-local settings (owner/repo are fixed to this repo).
   • You can create a token here: https://github.com/settings/tokens
4. Click Create Pull Request to create/update markdown in /recipes and update recipes/index.json on a new branch with an auto-created PR.

Run locally

Serve files from the repo root (required so fetch("recipes/index.json") works):

python -m http.server 8000

Then open: http://localhost:8000

Host on GitHub Pages

1. Push this repository to GitHub.
2. Open Settings → Pages.
3. Set Source to Deploy from a branch.
4. Select branch main (or default) and folder / (root).
5. Save and wait for deployment.
6. Use the site URL shown by Pages (https://<user>.github.io/<repo>/).

If GitHub Pages shows old JS/CSS

• Hard refresh the page (Ctrl+Shift+R / Cmd+Shift+R).
• This project appends a version query string to styles.css and app.js in index.html to reduce stale-cache issues after deploys.

If your deployed site looks unchanged after merge

Yes, this can happen if conflicts were resolved by keeping older index.html references or older asset files.

Checklist:

1. Confirm index.html contains the latest query-string versions for CSS/JS (for example ?v=20260403e).
2. Confirm app.js shows the latest BUILD_VERSION in the page footer.
3. Hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
4. In GitHub Pages settings, verify branch/folder still points to your intended source.

GitHub Pages 404 fix for recipes/*.md

If you see 404 for markdown recipe files on GitHub Pages, keep a .nojekyll file in repo root so Pages serves markdown files as static assets.

Auto-approve recipe markdown PRs

This repo includes .github/workflows/auto-approve-recipes.yml to auto-approve and auto-merge PRs that only modify recipes/*.md.

Workflow now uses default github.token with repository contents:write and pull-requests:write permissions. Optional bot token is no longer required.