From 5d4515d9d568bd66cc4795c78ead04a7a5157bc7 Mon Sep 17 00:00:00 2001 From: "Olomana (multica agent)" Date: Fri, 6 Nov 2026 18:05:10 -0800 Subject: [PATCH 1/2] PWS-11: Simplify Recipe Card tab and move it before References Remove the print instructions and the Front/Back labels (page captions and card footer). Place the Recipe Card tab after Notes and before References, so References is always the last tab. Co-Authored-By: Claude Opus 5.5 Co-authored-by: multica-agent --- .claude/rules/recipe-format.md | 2 +- app/recipes/[category]/[slug]/page.tsx | 18 ++++++++---------- components/RecipeCardPanel.tsx | 6 ------ lib/recipe-card.tsx | 2 +- recipes/README.md | 2 +- 5 files changed, 11 insertions(+), 19 deletions(-) diff --git a/.claude/rules/recipe-format.md b/.claude/rules/recipe-format.md index 5f3c75e..436a0ba 100644 --- a/.claude/rules/recipe-format.md +++ b/.claude/rules/recipe-format.md @@ -42,7 +42,7 @@ Markdown before the first section renders as intro prose above the tabs; markdow ### Recipe card (opt in) -- `::card` adds a Recipe Card tab with a printable 5×7 in PNG generated from `:::ingredients` and `:::instructions` +- `::card` adds a Recipe Card tab with a printable 5×7 in PNG generated from `:::ingredients` and `:::instructions`. The tab always sits after Notes and before References, wherever the directive appears in the file - To give the card a shorter version, use the container form. The outer fence needs **four** colons; any section left out falls back to the full one: ```md diff --git a/app/recipes/[category]/[slug]/page.tsx b/app/recipes/[category]/[slug]/page.tsx index 1d3f384..675ade7 100644 --- a/app/recipes/[category]/[slug]/page.tsx +++ b/app/recipes/[category]/[slug]/page.tsx @@ -65,22 +65,20 @@ export default async function RecipePage({ params }: RecipePageProps) { const content = getRecipeContent(recipe); + const cardImages = await getRecipeCardImages(recipe); + const cardTabs: RecipeTab[] = cardImages + ? [{ id: 'card', title: 'Recipe Card', content: }] + : []; + + // The card goes right before References, which is always the last tab const tabs: RecipeTab[] = SECTION_NAMES.flatMap((name) => { const section = content.sections[name]; - return section + const sectionTabs: RecipeTab[] = section ? [{ id: name, title: SECTION_TITLES[name], content: }] : []; + return name === 'references' ? [...cardTabs, ...sectionTabs] : sectionTabs; }); - const cardImages = await getRecipeCardImages(recipe); - if (cardImages) { - tabs.push({ - id: 'card', - title: 'Recipe Card', - content: , - }); - } - return ( diff --git a/components/RecipeCardPanel.tsx b/components/RecipeCardPanel.tsx index e99eac7..77f343a 100644 --- a/components/RecipeCardPanel.tsx +++ b/components/RecipeCardPanel.tsx @@ -14,11 +14,6 @@ export default function RecipeCardPanel({ title, images }: RecipeCardPanelProps) return (
-

- A 5×7 in card at 300 DPI. Print it on 5×7 photo paper or card stock - {doubleSided ? ', with the front and back on either side.' : '.'} -

-
{images.map((image) => (
@@ -30,7 +25,6 @@ export default function RecipeCardPanel({ title, images }: RecipeCardPanelProps) loading="lazy" className="h-auto w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white shadow-sm" /> - {doubleSided &&
{image.label}
}
))}
diff --git a/lib/recipe-card.tsx b/lib/recipe-card.tsx index ada674b..84b8cc7 100644 --- a/lib/recipe-card.tsx +++ b/lib/recipe-card.tsx @@ -456,7 +456,7 @@ function renderFace(recipe: Recipe, layout: CardLayout, face: CardFace): ReactEl }} >
{pageUrl}
-
{face.name === 'card' ? SITE_NAME : `${SITE_NAME} · ${FACE_LABELS[face.name]}`}
+
{SITE_NAME}
); diff --git a/recipes/README.md b/recipes/README.md index 72190fa..9b3cb42 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -88,7 +88,7 @@ Markdown before the first section is intro prose; markdown after the last is out #### 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. +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. The tab always sits after Notes and before References, wherever `::card` appears in the file. To put a shorter version on the card, use the container form with **four** colons. Leave out a section to use the full one: From e9fa5e65676b5e4b1df85a872c4a067030fbffed Mon Sep 17 00:00:00 2001 From: "Olomana (multica agent)" Date: Fri, 6 Nov 2026 18:24:42 -0800 Subject: [PATCH 2/2] PWS-11: Replace card download/print buttons with full-screen view Clicking a card image now enlarges it to fill the screen. Remove the download and print buttons, and restore the Front/Back label in the card image footer; only the page captions were meant to go. Co-Authored-By: Claude Opus 5.5 Co-authored-by: multica-agent --- .claude/CLAUDE.md | 4 +-- .claude/rules/architecture.md | 2 +- components/PrintCardButton.tsx | 44 ------------------------- components/RecipeCardImage.tsx | 60 ++++++++++++++++++++++++++++++++++ components/RecipeCardPanel.tsx | 45 +++++++------------------ lib/recipe-card.tsx | 4 +-- recipes/README.md | 2 +- 7 files changed, 77 insertions(+), 84 deletions(-) delete mode 100644 components/PrintCardButton.tsx create mode 100644 components/RecipeCardImage.tsx diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md index dd329f2..943f323 100644 --- a/.claude/CLAUDE.md +++ b/.claude/CLAUDE.md @@ -39,8 +39,8 @@ components/ RecipeGridCard.tsx # Recipe grid card for listing page RecipeTabs.tsx # Tabbed recipe sections (client) RecipeMarkdown.tsx # Renders a parsed markdown tree to React (server) - RecipeCardPanel.tsx # Recipe Card tab: preview, download, print (server) - PrintCardButton.tsx # Prints card images at 5×7 in (client) + RecipeCardPanel.tsx # Recipe Card tab: card image previews (server) + RecipeCardImage.tsx # Card preview that enlarges to full screen on click (client) RecipePageLayout.tsx # Recipe detail page layout (server component) lib/ diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md index 6e58536..a5a83af 100644 --- a/.claude/rules/architecture.md +++ b/.claude/rules/architecture.md @@ -17,5 +17,5 @@ - Paragraphs containing only images are converted to `
` elements during parsing (caption from the image title), so there's no `

` nesting - Card fonts are read from `node_modules/@fontsource/*` at build time; satori needs woff/ttf (not woff2) and doesn't support variable fonts - `lib/recipes.ts` uses Node.js `fs` — server-side only; never import in client components -- Build warnings about `` vs `` in RecipeMarkdown and RecipeCardPanel are intentional +- Build warnings about `` vs `` in RecipeMarkdown and RecipeCardImage are intentional - Never add redundant ARIA roles on semantic elements (`
`, `