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: