Recipe Book — a Parachute surface

A small, self-contained web app (a surface) for browsing the recipe book in a Parachute vault. It signs in to your hub, queries every note tagged #recipe, and presents them as a filterable, searchable recipe book with full recipe pages.

Built on the official surface packages, so the auth + data + rendering plumbing isn't hand-rolled:

• @openparachute/surface-client — OAuth (PKCE + Dynamic Client Registration) and a typed vault REST client.
• @openparachute/surface-render — <NoteRenderer> for Markdown + wikilinks + auth'd media.

What it does

• Browse all #recipe notes as cards (cuisine, meal, time, servings, diet, rating).
• Filter by meal, cuisine, diet, max cooking time, and vegetarian-only.
• Search across titles and ingredients/instructions (note content).
• Read a full recipe rendered from its Markdown, with a facts sidebar drawn from the recipe's indexed metadata.

It's shaped around this vault's #recipe schema — the indexed fields (cuisine, diet, meal, time_minutes, rating, status, meat_option) are exactly the cards' badges and the filter controls.

Run it

npm install
npm run dev

Open the printed URL. On first load the app asks for your Parachute hub address (e.g. hub.parachute.computer); it's saved locally and you can change it later with the Hub button. Sign in with Parachute and your recipes load.

To skip the setup screen, copy .env.example to .env and set VITE_HUB_URL (and VITE_VAULT_NAME if your vault isn't ag).

This is a standalone surface (no Parachute host in front of it), so it registers itself with the hub via Dynamic Client Registration on first sign-in. You approve it once on the hub consent screen.

Build

npm run build      # → dist/  (static; deploy to any static host)
npm run preview    # serve the build locally

The production base defaults to /recipe-parachute/ (the GitHub Pages project subpath); override it with VITE_BASE for a different path or a root domain (VITE_BASE=/ npm run build). The OAuth redirect URI is the app's own base URL, so host it at a stable address.

Deploy to GitHub Pages

The built site lives on the gh-pages branch (root); main stays source-only. Repo setup: Settings → Pages → Source: Deploy from a branch → Branch: gh-pages / / (root) → Save. The site publishes at https://unforced-dev.github.io/recipe-parachute/.

To redeploy after changes:

npm run build                              # → dist/ (base /recipe-parachute/)
git worktree add ../gh-pages gh-pages      # or: git checkout gh-pages
cp -r dist/* ../gh-pages/ && touch ../gh-pages/.nojekyll
cd ../gh-pages && git add -A && git commit -m "Update site" && git push

A GitHub Actions workflow would be tidier, but publishing via Actions needs a committed .github/workflows/* file, which the automation that created this repo can't push. The gh-pages branch needs no workflow file.

Project layout

File	Role
src/surface.ts	Hub config + createVaultSurface wiring (standalone/DCR).
src/recipes.ts	Query #recipe notes and map metadata → a Recipe.
src/App.tsx	Auth lifecycle, loading, filtering, routing between grid/detail.
src/components/	Filters, RecipeCard, RecipeDetail, Stars, SetupScreen.
src/styles.css	The recipe-book theme.