From d601895982179e8b115615c04cdc4261108e282a Mon Sep 17 00:00:00 2001
From: Jake Runyan <jake@runyan.dev>
Date: Sun, 13 Sep 2026 14:50:11 -0700
Subject: [PATCH] Markdown file update + recipe cards

---
 .claude/CLAUDE.md                             |  46 +-
 .claude/rules/architecture.md                 |  16 +-
 .claude/rules/recipe-format.md                |  79 +-
 README.md                                     |  54 +-
 app/about/page.tsx                            |   2 +-
 app/page.tsx                                  |   2 +-
 .../[slug]/assets/[...file]/route.ts          |  26 +
 .../[category]/[slug]/card/[image]/route.ts   |  37 +
 app/recipes/[category]/[slug]/page.tsx        |  75 +-
 app/recipes/page.tsx                          |  11 +-
 components/ActiveFilters.tsx                  |  58 ++
 components/FacetGroup.tsx                     |  49 +
 components/PrintCardButton.tsx                |  44 +
 components/RecipeCard.tsx                     | 110 ---
 components/RecipeCardPanel.tsx                |  51 +
 components/RecipeGridCard.tsx                 |   8 +-
 components/RecipeLayout.tsx                   |  94 +-
 components/RecipeMarkdown.tsx                 |  39 +
 components/RecipePageLayout.tsx               |   2 +-
 components/RecipeTabs.tsx                     |  92 ++
 components/RecipesClient.tsx                  | 100 +-
 components/RecipesSidebar.tsx                 | 249 +++--
 components/SelectedTags.tsx                   |  44 -
 components/TagSelector.tsx                    | 119 ---
 lib/recipe-card.tsx                           | 476 +++++++++
 lib/recipe-content.ts                         | 159 +++
 lib/recipe-urls.ts                            |  17 +
 lib/recipes.ts                                |  86 +-
 lib/site.ts                                   |   2 +
 lib/types.ts                                  |   6 +
 next.config.ts                                |   2 +
 package-lock.json                             | 908 ++++++------------
 package.json                                  |  15 +-
 {public/recipes => recipes}/README.md         | 100 +-
 .../african/shakshuka/assets/shakshuka.jpg    | Bin
 .../african/shakshuka/assets/shakshuka2.jpg   | Bin
 .../african/shakshuka/shakshuka.md            |  26 +-
 .../baking/apple-pie/apple-pie.md             |  23 +-
 .../baking/apple-pie/assets/not-found.svg     |   0
 .../cajun/gumbo/assets/not-found.svg          |   0
 .../gumbo.mdx => recipes/cajun/gumbo/gumbo.md |  23 +-
 .../assets/not-found.svg                      |   0
 .../broccoli-beef-in-oyster-sauce.md          |  24 +-
 .../assets/egg-flower-soup.jpg                | Bin
 .../egg-flower-soup/egg-flower-soup.md        |  23 +-
 .../chinese/fried-rice/assets/fried-rice.jpg  | Bin
 .../chinese/fried-rice/fried-rice.md          |  23 +-
 .../chinese/mabu-tofu/assets/mapo-tofu.jpg    | Bin
 .../chinese/mabu-tofu/mapo-tofu.md            |  23 +-
 .../assets/tangy-runyan-eggroll.jpg           | Bin
 .../tangy-runyan-eggroll.md                   |  23 +-
 .../desserts/ice-cream/assets/ice-cream.jpg   | Bin
 .../desserts/ice-cream/ice-cream.md           |  24 +-
 .../assets/banana-chocolate-smoothie.jpg      | Bin
 .../banana-chocolate-smoothie.md              |  19 +-
 .../berry-smoothie/assets/berry-smoothie.jpg  | Bin
 .../drinks/berry-smoothie/berry-smoothie.md   |  19 +-
 .../peach-simple-syrup/assets/not-found.svg   |   0
 .../peach-simple-syrup/peach-simple-syrup.md  |  23 +-
 .../assets/strawberry-smoothie.jpg            | Bin
 .../strawberry-smoothie.md                    |  19 +-
 .../example-recipe-1/assets/not-found.svg     |   0
 .../example-recipe-1/example-recipe-1.md      |  26 +-
 .../example-recipe-2/assets/not-found.svg     |   0
 .../example-recipe-2/example-recipe-2.md      |  26 +-
 .../indian/brown-lentils/assets/not-found.svg |   0
 .../indian/brown-lentils/brown-lentils.md     |  27 +-
 .../chana-masala/assets/chana-masala.jpg      | Bin
 .../indian/chana-masala/chana-masala.md       |  29 +-
 .../assets/chicken-tikka-masala.jpg           | Bin
 .../chicken-tikka-masala.md                   |  23 +-
 .../lamb-vindaloo/assets/lamb-vindaloo.jpg    | Bin
 .../indian/lamb-vindaloo/lamb-vindaloo.md     |  23 +-
 .../palak-paneer/assets/palak-paneer.jpg      | Bin
 .../indian/palak-paneer/palak-paneer.md       |  27 +-
 .../assets/corned-beef-and-cabbage.jpg        | Bin
 .../corned-beef-and-cabbage.md                |  23 +-
 .../chicken-parmesan/assets/not-found.svg     |   0
 .../chicken-parmesan/chicken-parmesan.md      |  31 +-
 .../assets/not-found.svg                      |   0
 .../fusilli-with-vodka-basil-parmesan.md      |  23 +-
 .../pizza-dough/assets/elote-pizza.jpg        | Bin
 .../pizza-dough/assets/pizza-dough.jpg        | Bin
 .../italian/pizza-dough/pizza-dough.md        |  26 +-
 .../italian/pizza-sauce/assets/not-found.svg  |   0
 .../italian/pizza-sauce/pizza-sauce.md        |  23 +-
 .../ajitsuke-tamago-ramen-egg.md              |  23 +-
 .../assets/not-found.svg                      |   0
 .../assets/not-found.svg                      |   0
 .../golden-curry-beef-stew.md                 |  23 +-
 .../golden-curry-chicken/assets/not-found.svg |   0
 .../golden-curry-chicken.md                   |  23 +-
 .../beef-bourguignon/assets/not-found.svg     |   0
 .../meat/beef-bourguignon/beef-bourguignon.md |  23 +-
 .../assets/not-found.svg                      |   0
 .../garlic-herb-butter-roast-turkey.md        |  23 +-
 .../assets/not-found.svg                      |   0
 .../grilled-lemon-pepper-salmon.md            |  23 +-
 .../assets/not-found.svg                      |   0
 .../jamaican-jerk-chicken.md                  |  21 +-
 .../ribs-instant-pot/assets/not-found.svg     |   0
 .../meat/ribs-instant-pot/ribs-instant-pot.md |  23 +-
 .../meat/turkey-gravy/assets/not-found.svg    |   0
 .../meat/turkey-gravy/turkey-gravy.md         |  23 +-
 .../mexican/birria/assets/not-found.svg       |   0
 .../mexican/birria/birria.md                  |  23 +-
 .../assets/creamy-jalapeno-sauce.jpg          | Bin
 .../creamy-jalapeno-sauce.md                  |  23 +-
 .../mexican/elote/assets/elote.jpg            | Bin
 .../mexican/elote/elote.md                    |  23 +-
 .../assets/fajita-vegetables.jpg              | Bin
 .../fajita-vegetables/fajita-vegetables.md    |  20 +-
 .../mexican/horchata/assets/not-found.svg     |   0
 .../mexican/horchata/horchata.md              |  23 +-
 .../mexican/mexican-rice/assets/not-found.svg |   0
 .../mexican/mexican-rice/mexican-rice.md      |  23 +-
 .../mexican/pinto-beans/assets/not-found.svg  |   0
 .../mexican/pinto-beans/pinto-beans.md        |  23 +-
 .../taco-bell-meat/assets/crunchwrap.jpg      | Bin
 .../taco-bell-meat/assets/taco-bell-meat.jpg  | Bin
 .../mexican/taco-bell-meat/taco-bell-meat.md  |  26 +-
 .../assets/not-found.svg                      |   0
 .../caesar-salad-dressing.md                  |  23 +-
 .../cauliflower-mash/assets/not-found.svg     |   0
 .../cauliflower-mash/cauliflower-mash.md      |  23 +-
 .../pickled-red-onions/assets/not-found.svg   |   0
 .../pickled-red-onions/pickled-red-onions.md  |  23 +-
 .../assets/not-found.svg                      |   0
 .../sous-vide-mashed-potatoes.md              |  23 +-
 .../chicken-noodle-soup/assets/not-found.svg  |   0
 .../chicken-noodle-soup.md                    |  23 +-
 .../soup/chili/assets/chili.jpg               | Bin
 .../chili.mdx => recipes/soup/chili/chili.md  |  23 +-
 .../vietnamese/pho/assets/not-found.svg       |   0
 .../pho.mdx => recipes/vietnamese/pho/pho.md  |  23 +-
 135 files changed, 2580 insertions(+), 1747 deletions(-)
 create mode 100644 app/recipes/[category]/[slug]/assets/[...file]/route.ts
 create mode 100644 app/recipes/[category]/[slug]/card/[image]/route.ts
 create mode 100644 components/ActiveFilters.tsx
 create mode 100644 components/FacetGroup.tsx
 create mode 100644 components/PrintCardButton.tsx
 delete mode 100644 components/RecipeCard.tsx
 create mode 100644 components/RecipeCardPanel.tsx
 create mode 100644 components/RecipeMarkdown.tsx
 create mode 100644 components/RecipeTabs.tsx
 delete mode 100644 components/SelectedTags.tsx
 delete mode 100644 components/TagSelector.tsx
 create mode 100644 lib/recipe-card.tsx
 create mode 100644 lib/recipe-content.ts
 create mode 100644 lib/recipe-urls.ts
 create mode 100644 lib/site.ts
 rename {public/recipes => recipes}/README.md (66%)
 rename {public/recipes => recipes}/african/shakshuka/assets/shakshuka.jpg (100%)
 rename {public/recipes => recipes}/african/shakshuka/assets/shakshuka2.jpg (100%)
 rename public/recipes/african/shakshuka/shakshuka.mdx => recipes/african/shakshuka/shakshuka.md (93%)
 rename public/recipes/baking/apple-pie/apple-pie.mdx => recipes/baking/apple-pie/apple-pie.md (95%)
 rename {public/recipes => recipes}/baking/apple-pie/assets/not-found.svg (100%)
 rename {public/recipes => recipes}/cajun/gumbo/assets/not-found.svg (100%)
 rename public/recipes/cajun/gumbo/gumbo.mdx => recipes/cajun/gumbo/gumbo.md (95%)
 rename {public/recipes => recipes}/chinese/broccoli-beef-in-oyster-sauce/assets/not-found.svg (100%)
 rename public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx => recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.md (92%)
 rename {public/recipes => recipes}/chinese/egg-flower-soup/assets/egg-flower-soup.jpg (100%)
 rename public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx => recipes/chinese/egg-flower-soup/egg-flower-soup.md (92%)
 rename {public/recipes => recipes}/chinese/fried-rice/assets/fried-rice.jpg (100%)
 rename public/recipes/chinese/fried-rice/fried-rice.mdx => recipes/chinese/fried-rice/fried-rice.md (94%)
 rename {public/recipes => recipes}/chinese/mabu-tofu/assets/mapo-tofu.jpg (100%)
 rename public/recipes/chinese/mabu-tofu/mapo-tofu.mdx => recipes/chinese/mabu-tofu/mapo-tofu.md (94%)
 rename {public/recipes => recipes}/chinese/tangy-runyan-eggroll/assets/tangy-runyan-eggroll.jpg (100%)
 rename public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx => recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.md (93%)
 rename {public/recipes => recipes}/desserts/ice-cream/assets/ice-cream.jpg (100%)
 rename public/recipes/desserts/ice-cream/ice-cream.mdx => recipes/desserts/ice-cream/ice-cream.md (93%)
 rename {public/recipes => recipes}/drinks/banana-chocolate-smoothie/assets/banana-chocolate-smoothie.jpg (100%)
 rename public/recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.mdx => recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.md (86%)
 rename {public/recipes => recipes}/drinks/berry-smoothie/assets/berry-smoothie.jpg (100%)
 rename public/recipes/drinks/berry-smoothie/berry-smoothie.mdx => recipes/drinks/berry-smoothie/berry-smoothie.md (80%)
 rename {public/recipes => recipes}/drinks/peach-simple-syrup/assets/not-found.svg (100%)
 rename public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx => recipes/drinks/peach-simple-syrup/peach-simple-syrup.md (93%)
 rename {public/recipes => recipes}/drinks/strawberry-smoothie/assets/strawberry-smoothie.jpg (100%)
 rename public/recipes/drinks/strawberry-smoothie/strawberry-smoothie.mdx => recipes/drinks/strawberry-smoothie/strawberry-smoothie.md (79%)
 rename {public/recipes => recipes}/example/example-recipe-1/assets/not-found.svg (100%)
 rename public/recipes/example/example-recipe-1/example-recipe-1.mdx => recipes/example/example-recipe-1/example-recipe-1.md (92%)
 rename {public/recipes => recipes}/example/example-recipe-2/assets/not-found.svg (100%)
 rename public/recipes/example/example-recipe-2/example-recipe-2.mdx => recipes/example/example-recipe-2/example-recipe-2.md (92%)
 rename {public/recipes => recipes}/indian/brown-lentils/assets/not-found.svg (100%)
 rename public/recipes/indian/brown-lentils/brown-lentils.mdx => recipes/indian/brown-lentils/brown-lentils.md (93%)
 rename {public/recipes => recipes}/indian/chana-masala/assets/chana-masala.jpg (100%)
 rename public/recipes/indian/chana-masala/chana-masala.mdx => recipes/indian/chana-masala/chana-masala.md (93%)
 rename {public/recipes => recipes}/indian/chicken-tikka-masala/assets/chicken-tikka-masala.jpg (100%)
 rename public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx => recipes/indian/chicken-tikka-masala/chicken-tikka-masala.md (94%)
 rename {public/recipes => recipes}/indian/lamb-vindaloo/assets/lamb-vindaloo.jpg (100%)
 rename public/recipes/indian/lamb-vindaloo/lamb-vindaloo.mdx => recipes/indian/lamb-vindaloo/lamb-vindaloo.md (95%)
 rename {public/recipes => recipes}/indian/palak-paneer/assets/palak-paneer.jpg (100%)
 rename public/recipes/indian/palak-paneer/palak-paneer.mdx => recipes/indian/palak-paneer/palak-paneer.md (93%)
 rename {public/recipes => recipes}/irish/corned-beef-and-cabbage/assets/corned-beef-and-cabbage.jpg (100%)
 rename public/recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.mdx => recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.md (90%)
 rename {public/recipes => recipes}/italian/chicken-parmesan/assets/not-found.svg (100%)
 rename public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx => recipes/italian/chicken-parmesan/chicken-parmesan.md (93%)
 rename {public/recipes => recipes}/italian/fusilli-with-vodka-basil-parmesan/assets/not-found.svg (100%)
 rename public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx => recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.md (93%)
 rename {public/recipes => recipes}/italian/pizza-dough/assets/elote-pizza.jpg (100%)
 rename {public/recipes => recipes}/italian/pizza-dough/assets/pizza-dough.jpg (100%)
 rename public/recipes/italian/pizza-dough/pizza-dough.mdx => recipes/italian/pizza-dough/pizza-dough.md (89%)
 rename {public/recipes => recipes}/italian/pizza-sauce/assets/not-found.svg (100%)
 rename public/recipes/italian/pizza-sauce/pizza-sauce.mdx => recipes/italian/pizza-sauce/pizza-sauce.md (88%)
 rename public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx => recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.md (89%)
 rename {public/recipes => recipes}/japanese/ajitsuke-tamago-ramen-egg/assets/not-found.svg (100%)
 rename {public/recipes => recipes}/japanese/golden-curry-beef-stew/assets/not-found.svg (100%)
 rename public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx => recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.md (91%)
 rename {public/recipes => recipes}/japanese/golden-curry-chicken/assets/not-found.svg (100%)
 rename public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx => recipes/japanese/golden-curry-chicken/golden-curry-chicken.md (91%)
 rename {public/recipes => recipes}/meat/beef-bourguignon/assets/not-found.svg (100%)
 rename public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx => recipes/meat/beef-bourguignon/beef-bourguignon.md (93%)
 rename {public/recipes => recipes}/meat/garlic-herb-butter-roast-turkey/assets/not-found.svg (100%)
 rename public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx => recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.md (95%)
 rename {public/recipes => recipes}/meat/grilled-lemon-pepper-salmon/assets/not-found.svg (100%)
 rename public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx => recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.md (88%)
 rename {public/recipes => recipes}/meat/jamaican-jerk-chicken/assets/not-found.svg (100%)
 rename public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx => recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.md (90%)
 rename {public/recipes => recipes}/meat/ribs-instant-pot/assets/not-found.svg (100%)
 rename public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx => recipes/meat/ribs-instant-pot/ribs-instant-pot.md (93%)
 rename {public/recipes => recipes}/meat/turkey-gravy/assets/not-found.svg (100%)
 rename public/recipes/meat/turkey-gravy/turkey-gravy.mdx => recipes/meat/turkey-gravy/turkey-gravy.md (88%)
 rename {public/recipes => recipes}/mexican/birria/assets/not-found.svg (100%)
 rename public/recipes/mexican/birria/birria.mdx => recipes/mexican/birria/birria.md (94%)
 rename {public/recipes => recipes}/mexican/creamy-jalapeno-sauce/assets/creamy-jalapeno-sauce.jpg (100%)
 rename public/recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.mdx => recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.md (89%)
 rename {public/recipes => recipes}/mexican/elote/assets/elote.jpg (100%)
 rename public/recipes/mexican/elote/elote.mdx => recipes/mexican/elote/elote.md (94%)
 rename {public/recipes => recipes}/mexican/fajita-vegetables/assets/fajita-vegetables.jpg (100%)
 rename public/recipes/mexican/fajita-vegetables/fajita-vegetables.mdx => recipes/mexican/fajita-vegetables/fajita-vegetables.md (95%)
 rename {public/recipes => recipes}/mexican/horchata/assets/not-found.svg (100%)
 rename public/recipes/mexican/horchata/horchata.mdx => recipes/mexican/horchata/horchata.md (92%)
 rename {public/recipes => recipes}/mexican/mexican-rice/assets/not-found.svg (100%)
 rename public/recipes/mexican/mexican-rice/mexican-rice.mdx => recipes/mexican/mexican-rice/mexican-rice.md (92%)
 rename {public/recipes => recipes}/mexican/pinto-beans/assets/not-found.svg (100%)
 rename public/recipes/mexican/pinto-beans/pinto-beans.mdx => recipes/mexican/pinto-beans/pinto-beans.md (86%)
 rename {public/recipes => recipes}/mexican/taco-bell-meat/assets/crunchwrap.jpg (100%)
 rename {public/recipes => recipes}/mexican/taco-bell-meat/assets/taco-bell-meat.jpg (100%)
 rename public/recipes/mexican/taco-bell-meat/taco-bell-meat.mdx => recipes/mexican/taco-bell-meat/taco-bell-meat.md (86%)
 rename {public/recipes => recipes}/salad/caesar-salad-dressing/assets/not-found.svg (100%)
 rename public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx => recipes/salad/caesar-salad-dressing/caesar-salad-dressing.md (88%)
 rename {public/recipes => recipes}/sides/cauliflower-mash/assets/not-found.svg (100%)
 rename public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx => recipes/sides/cauliflower-mash/cauliflower-mash.md (93%)
 rename {public/recipes => recipes}/sides/pickled-red-onions/assets/not-found.svg (100%)
 rename public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx => recipes/sides/pickled-red-onions/pickled-red-onions.md (91%)
 rename {public/recipes => recipes}/sides/sous-vide-mashed-potatoes/assets/not-found.svg (100%)
 rename public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx => recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.md (92%)
 rename {public/recipes => recipes}/soup/chicken-noodle-soup/assets/not-found.svg (100%)
 rename public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx => recipes/soup/chicken-noodle-soup/chicken-noodle-soup.md (94%)
 rename {public/recipes => recipes}/soup/chili/assets/chili.jpg (100%)
 rename public/recipes/soup/chili/chili.mdx => recipes/soup/chili/chili.md (94%)
 rename {public/recipes => recipes}/vietnamese/pho/assets/not-found.svg (100%)
 rename public/recipes/vietnamese/pho/pho.mdx => recipes/vietnamese/pho/pho.md (94%)

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 6b1e70b..7f761e6 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -7,10 +7,11 @@ A personal recipe website. Content-first, no-nonsense. The name of the third hom
 ## Tech Stack
 
 - **Next.js 15** with App Router, TypeScript, Tailwind CSS
-- **MDX** for recipe content with YAML frontmatter
-- **next-mdx-remote/rsc + remark-gfm** for compiling MDX content server-side
+- **Markdown** (`.md`) for recipe content with YAML frontmatter; sections are markdown directives (`:::ingredients`, `::card`)
+- **unified + remark-gfm + remark-directive** to parse content server-side; `mdast-util-to-hast` + `hast-util-to-jsx-runtime` to render React
+- **satori + sharp** to generate printable recipe card PNGs at build time
 - **Static site generation (SSG)** — all pages are prerendered at build time
-- **No database** — recipes are MDX files on disk
+- **No database** — recipes are markdown files on disk
 
 ## Project Structure
 
@@ -21,32 +22,43 @@ app/                          # Next.js App Router pages
   recipes/
     page.tsx                  # Recipe listing (server, passes data to RecipesClient)
     [category]/[slug]/
-      page.tsx                # Recipe detail (server, compiles MDX and renders via RecipePageLayout)
+      page.tsx                # Recipe detail (server, renders sections as tabs via RecipePageLayout)
+      assets/[...file]/
+        route.ts              # Serves recipe images from recipes/ (prerendered at build)
+      card/[image]/
+        route.ts              # Recipe card PNGs (card.png, or front.png + back.png)
 
 components/
   Header.tsx / Footer.tsx     # Site chrome
   RecipesClient.tsx           # Recipe listing with filter state
   RecipeLayout.tsx            # Sidebar layout (mobile drawer, desktop persistent)
-  RecipesSidebar.tsx          # Search + category + tag filters
-  SelectedTags.tsx            # Active tag chips
-  TagSelector.tsx             # Tag dropdown picker
+  RecipesSidebar.tsx          # Search + category/tag facet lists with result counts
+  FacetGroup.tsx              # Collapsible sidebar facet section
+  ActiveFilters.tsx           # Removable chips for active filters (above results)
   RecipeGridCard.tsx          # Recipe grid card for listing page
-  RecipeCard.tsx              # MDX component — splits h2 children into tab sections (client)
+  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)
   RecipePageLayout.tsx        # Recipe detail page layout (server component)
 
 lib/
-  recipes.ts                  # Recipe file loader with in-memory cache; reads from public/recipes/
+  recipes.ts                  # Recipe file loader with in-memory cache; reads from recipes/
+  recipe-content.ts           # Parses a recipe body into intro / sections / card / outro; validates directives
+  recipe-card.tsx             # Card layout (measured with satori) and PNG rendering
+  recipe-urls.ts              # Client-safe helper that maps ./assets/ paths to served URLs
+
+recipes/                      # ALL recipe content lives here (markdown + images together)
+  [category]/
+    recipe-slug/
+      recipe-slug.md
+      assets/
+        hero.jpg
+        ...
 
 public/
   assets/                     # Site-level images (homepage SVGs)
   authors.json                # Author metadata
-  recipes/                    # ALL recipe content lives here (MDX + images together)
-    [category]/
-      recipe-slug/
-        recipe-slug.mdx
-        assets/
-          hero.jpg
-          ...
 ```
 
 ## Design Principles
@@ -54,4 +66,4 @@ public/
 - **Content first**: recipe pages are minimal — no sidebar, just the recipe
 - **Server components by default**: only add `'use client'` when interactivity is needed
 - **No taxonomy file**: categories and tags are derived directly from frontmatter across all recipes — no external registry to keep in sync
-- **Single content location**: MDX and images are colocated in `public/recipes/` so they can be served directly without a copy step
+- **Content is top level**: markdown and images are colocated in `recipes/`; images are served by a statically prerendered route handler, so there's no copy step. `public/` is only for site branding and data
diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md
index c89b878..37d339a 100644
--- a/.claude/rules/architecture.md
+++ b/.claude/rules/architecture.md
@@ -3,14 +3,18 @@
 ## State and Data Flow
 
 - **RecipeLayout** owns sidebar open/close state; passes `handleFilterChange` (memoised with `useCallback`) down to RecipesSidebar
-- **RecipesSidebar** owns filter state (search, category, selectedTags) and reports changes via `useEffect` → `onFilterChange`
-- **RecipesClient** owns filtered recipe list (memoised with `useMemo`) and passes `setFilters` as `onFilterChange`
-- **RecipeCard** (MDX component) receives compiled children, splits by h2 into tab sections; custom `img` component in page.tsx rewrites `./` paths to `/recipes/[folderPath]/`
+- **RecipesSidebar** owns local UI state (debounced search input, tag filter text, show-more toggles) and reports filter changes via `onFilterChange`
+- **RecipesClient** owns filter state (synced to the URL), the filtered recipe list, and facet counts (all memoised with `useMemo`). Each facet's counts apply every filter except its own; options with zero results are hidden
+- **ActiveFilters** renders removable chips for the active filters above the results grid
+- **Recipe page** gets the parsed `RecipeContent` from `getRecipeContent` (cached), renders each section with **RecipeMarkdown** (server), and passes them as tabs to **RecipeTabs** (client). All panels are in the HTML; inactive ones are `hidden`
+- **Recipe card**: `getRecipeCardImages` computes the layout once per recipe; the page and the `card/[image]` route both use it, so the tab always matches the generated files. Layout measures real block heights with satori's `onNodeDetected`, so fitting is exact, not estimated
 
 ## Known Constraints
 
-- `folderPath` in recipe metadata uses backslashes on Windows (from `path.join`) — always `.replace(/\\/g, '/')` before using in URLs
-- Images in recipe MDX are wrapped in `<p>` by MDX compilation — use `<img>` not `<figure>` to avoid invalid HTML nesting (`<p><figure>` is invalid)
+- Recipe image URLs are `/recipes/[category]/[slug]/assets/...` (from frontmatter, not the folder on disk). Use `resolveRecipeAssetUrl` from `lib/recipe-urls.ts` — never build them from `folderPath`, which can differ from category/slug and uses backslashes on Windows
+- Recipe detail and asset routes set `dynamicParams = false`; everything is prerendered and the runtime image doesn't ship `recipes/`
+- Paragraphs containing only images are converted to `<figure>` elements during parsing (caption from the image title), so there's no `<p><figure>` 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 warning about `<img>` vs `<Image />` in recipe pages is intentional — markdown images can't use Next.js Image component
+- Build warnings about `<img>` vs `<Image />` in RecipeMarkdown and RecipeCardPanel are intentional
 - Never add redundant ARIA roles on semantic elements (`<main>`, `<aside>`, `<footer>` already carry implicit roles)
diff --git a/.claude/rules/recipe-format.md b/.claude/rules/recipe-format.md
index bd1958d..5f3c75e 100644
--- a/.claude/rules/recipe-format.md
+++ b/.claude/rules/recipe-format.md
@@ -1,4 +1,6 @@
-# Recipe MDX Format
+# Recipe Markdown Format
+
+Recipes are plain `.md` files (not MDX) at `recipes/[category]/[slug]/[slug].md`, parsed with remark + remark-gfm + remark-directive in `lib/recipe-content.ts`.
 
 ## Frontmatter Fields
 
@@ -23,26 +25,44 @@ displayPhoto: "./assets/hero.jpg"
 
 ## Content Structure
 
-Content after frontmatter is compiled as MDX using `next-mdx-remote/rsc`. The `<RecipeCard>` JSX component wraps recipe sections and renders them as tabs in the UI.
+The body uses [generic markdown directives](https://talk.commonmark.org/t/generic-directives-plugins-syntax/444):
 
-- Markdown **before** `<RecipeCard>` renders as intro prose above the recipe card
-- Markdown **after** `</RecipeCard>` renders as outro prose below the recipe card
-- **Important**: a blank line after `<RecipeCard>` is required for MDX to parse the content inside as markdown
-- Blank lines after `## ` headings and before `</RecipeCard>` are optional — the compact form (no extra blank lines) is preferred
+- **Container** `:::name` … `:::` wraps a section of ordinary markdown
+- **Leaf** `::name` on its own line inserts a generated object
 
-### `<RecipeCard>` Sections
+### Sections (each becomes a tab, in this order)
 
-`## ` (H2) headings inside `<RecipeCard>` define tabs:
+- `:::photos` — images; the image title becomes the caption: `![Alt text](./assets/hero.jpg "Caption")`
+- `:::ingredients` — bullet lists, optionally grouped with `###` subheadings
+- `:::instructions` — numbered steps, optionally grouped with `###` subheadings
+- `:::notes` — tips, variations, storage (optional)
+- `:::references` — credits and sources (optional)
 
-- `## Photos` — images with italic captions (`*caption text*`)
-- `## Ingredients` — bullet lists, optionally grouped with h3 subheadings
-- `## Instructions` — numbered steps, optionally grouped with h3 subheadings
-- `## Notes` — tips, variations, storage (optional)
-- `## References` — credits and sources (optional)
+Markdown before the first section renders as intro prose above the tabs; markdown after the last section renders as outro prose below. Prose between sections is an error.
+
+### Recipe card (opt in)
+
+- `::card` adds a Recipe Card tab with a printable 5×7 in PNG generated from `:::ingredients` and `:::instructions`
+- 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
+::::card
+:::instructions
+1. Condensed step one.
+2. Condensed step two.
+:::
+::::
+```
+
+The card uses one side when the text fits at 8pt or larger; otherwise it splits into a front (ingredients) and back (instructions). The build fails if even front/back doesn't fit — add a `::::card` with shorter content.
+
+### Validation
+
+Unknown directives (e.g. `:::ingrediants`), duplicate sections, and a leaf form of a section (`::notes`) fail the build with the file and line. `:word` inside prose (e.g. "Tip:Use") is left as literal text.
 
 ### Example
 
-```mdx
+```md
 ---
 title: "Lentils"
 description: "A neutral lentil dish."
@@ -51,35 +71,32 @@ description: "A neutral lentil dish."
 
 This recipe uses brown lentils (whole Masoor Dal)...
 
-<RecipeCard>
+:::photos
+![Lentils](./assets/hero.jpg "Finished lentils")
+:::
 
-## Photos
-![Hero](./assets/hero.jpg)
-*Finished lentils*
-
-## Ingredients
+:::ingredients
 - 1 cup brown lentils
-...
+:::
 
-## Instructions
+:::instructions
 1. Rinse lentils...
-...
+:::
 
-## Notes
+:::notes
 ### Tips
 - Try with different lentils!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://example.com)**
-</RecipeCard>
+:::
+
+::card
 ```
 
 ## Image Paths
 
 Images use relative paths: `./assets/image.jpg`
 
-These are rewritten at render time to `/recipes/[category]/[slug]/assets/image.jpg`.
-
-## Italic Captions in Photos Section
-
-Italic text (`*caption*`) in the `## Photos` section renders as a styled block caption beneath images. In all other sections, italic renders normally.
+These are rewritten at render time to `/recipes/[category]/[slug]/assets/image.jpg` (from frontmatter category and slug, not the folder name).
diff --git a/README.md b/README.md
index 9ae43ba..6b0cd70 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,8 @@ A content-first personal recipe site.
 ## Stack
 
 - **Next.js**, **TypeScript** + **Tailwind CSS**
-- **MDX** with YAML frontmatter metadata.
-- **next-mdx-remote/rsc** + **remark-gfm** for server-side compilation/rendering.
+- **Markdown** with YAML frontmatter metadata, using directives (`:::ingredients`) for recipe sections.
+- **remark** (+ gfm, directive) for server-side parsing; **satori** + **sharp** for printable recipe cards.
 - No database — recipes are checked into the repo.
 
 ## Project Structure
@@ -23,23 +23,24 @@ app/
 
 components/                   # UI components
 lib/
-  recipes.ts                  # Recipe loader (reads from public/recipes/)
+  recipes.ts                  # Recipe loader (reads from recipes/)
+
+recipes/                      # All recipe content (markdown + images colocated)
+  [category]/
+    [slug]/
+      [slug].md
+      assets/
+        hero.jpg
 
 public/
   assets/                     # Site-level data.
   authors.json                # Author metadata
-  recipes/                    # All recipe content (MDX + images colocated)
-    [category]/
-      [slug]/
-        [slug].mdx
-        assets/
-          hero.jpg
 ```
 
 ## Adding a Recipe
 
-1. Create a folder: `public/recipes/[category]/[recipe-slug]/`
-2. Add `[recipe-slug].mdx` with frontmatter and content
+1. Create a folder: `recipes/[category]/[recipe-slug]/`
+2. Add `[recipe-slug].md` with frontmatter and content
 3. Create an `assets/` subfolder and add images
 4. Reference images with relative paths: `./assets/image.jpg`
 
@@ -68,31 +69,36 @@ displayPhoto: "./assets/hero.jpg"
 
 ### Content Structure
 
-Wrap recipe content in `<RecipeCard>` — `## ` headings inside it become tabs:
+Each `:::section` block becomes a tab. Add `::card` for a printable 5×7 recipe card tab:
 
-```mdx
-Intro prose (rendered above the card).
+```md
+Intro prose (rendered above the tabs).
 
-<RecipeCard>
+:::photos
+![Finished dish](./assets/hero.jpg "Caption text")
+:::
 
-## Photos
-![Finished dish](./assets/hero.jpg)
-*Caption text*
-
-## Ingredients
+:::ingredients
 - 1 cup short grain rice
+:::
 
-## Instructions
+:::instructions
 1. Rinse and cook.
+:::
 
-## Notes
+:::notes
 Optional tips.
+:::
 
-## References
+:::references
 Optional credits.
-</RecipeCard>
+:::
+
+::card
 ```
 
+If a recipe is too long for the card, it's split front/back automatically. To write a shorter card instead, use `::::card` (four colons) containing its own `:::ingredients` and/or `:::instructions`. See `.claude/rules/recipe-format.md` for the full format.
+
 ## Development
 
 ```bash
diff --git a/app/about/page.tsx b/app/about/page.tsx
index a0de533..1085d94 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -35,7 +35,7 @@ export default function AboutPage() {
             Each recipe is organized in its own folder with:
           </p>
           <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
-            <li>MDX file with metadata frontmatter, recipe content, and instructions</li>
+            <li>Markdown file with metadata frontmatter, recipe content, and instructions</li>
             <li>Assets folder for images and other media</li>
           </ul>
         </section>
diff --git a/app/page.tsx b/app/page.tsx
index d6506a4..95aee9c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -82,7 +82,7 @@ export default function Home() {
           <div className="w-full md:w-2/5 space-y-4 text-center md:text-left">
             <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Welcome to my Self-Hosted Cookbook!</h2>
             <p className="text-lg text-gray-600 dark:text-gray-400">
-              Rather than make a physical cookbook, I have built this website to collect my recipes. This content-first website framework renders each page from a MDX markdown file, offering a friendly approach to frontend design for us backend engineers.
+              Rather than make a physical cookbook, I have built this website to collect my recipes. This content-first website framework renders each page from a markdown file, offering a friendly approach to frontend design for us backend engineers.
             </p>
           </div>
         </div>
diff --git a/app/recipes/[category]/[slug]/assets/[...file]/route.ts b/app/recipes/[category]/[slug]/assets/[...file]/route.ts
new file mode 100644
index 0000000..0eb7975
--- /dev/null
+++ b/app/recipes/[category]/[slug]/assets/[...file]/route.ts
@@ -0,0 +1,26 @@
+import { getAllRecipeAssetPaths, readRecipeAsset } from '@/lib/recipes';
+
+// Recipe images live in the top-level recipes/ folder rather than public/,
+// so they're served through this route and prerendered at build time.
+export const dynamic = 'force-static';
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return getAllRecipeAssetPaths();
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ category: string; slug: string; file: string[] }> }
+) {
+  const { category, slug, file } = await params;
+  const asset = readRecipeAsset(category, slug, file);
+
+  if (!asset) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  return new Response(new Uint8Array(asset.data), {
+    headers: { 'Content-Type': asset.contentType },
+  });
+}
diff --git a/app/recipes/[category]/[slug]/card/[image]/route.ts b/app/recipes/[category]/[slug]/card/[image]/route.ts
new file mode 100644
index 0000000..9412e27
--- /dev/null
+++ b/app/recipes/[category]/[slug]/card/[image]/route.ts
@@ -0,0 +1,37 @@
+import { getAllRecipes, getRecipeByCategoryAndSlug } from '@/lib/recipes';
+import { getRecipeCardImages, renderRecipeCardImage } from '@/lib/recipe-card';
+
+// Printable recipe card PNGs, generated at build time for recipes that opt in with ::card
+export const dynamic = 'force-static';
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+  const params = await Promise.all(
+    getAllRecipes().map(async (recipe) => {
+      const images = await getRecipeCardImages(recipe);
+      return (images ?? []).map((image) => ({
+        category: recipe.category,
+        slug: recipe.slug,
+        image: image.fileName,
+      }));
+    })
+  );
+  return params.flat();
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ category: string; slug: string; image: string }> }
+) {
+  const { category, slug, image } = await params;
+  const recipe = getRecipeByCategoryAndSlug(category, slug);
+  const png = recipe && await renderRecipeCardImage(recipe, image);
+
+  if (!png) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  return new Response(new Uint8Array(png), {
+    headers: { 'Content-Type': 'image/png' },
+  });
+}
diff --git a/app/recipes/[category]/[slug]/page.tsx b/app/recipes/[category]/[slug]/page.tsx
index 2fac625..1d3f384 100644
--- a/app/recipes/[category]/[slug]/page.tsx
+++ b/app/recipes/[category]/[slug]/page.tsx
@@ -1,10 +1,12 @@
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
-import { compileMDX } from 'next-mdx-remote/rsc';
-import remarkGfm from 'remark-gfm';
-import { getRecipeByCategoryAndSlug, getAllRecipePaths } from '@/lib/recipes';
-import RecipeCard from '@/components/RecipeCard';
+import { getRecipeByCategoryAndSlug, getAllRecipePaths, getRecipeContent } from '@/lib/recipes';
+import { SECTION_NAMES, type SectionName } from '@/lib/recipe-content';
+import { getRecipeCardImages } from '@/lib/recipe-card';
 import RecipePageLayout from '@/components/RecipePageLayout';
+import RecipeMarkdown from '@/components/RecipeMarkdown';
+import RecipeTabs, { type RecipeTab } from '@/components/RecipeTabs';
+import RecipeCardPanel from '@/components/RecipeCardPanel';
 
 interface RecipePageProps {
   params: Promise<{
@@ -13,6 +15,16 @@ interface RecipePageProps {
   }>;
 }
 
+const SECTION_TITLES: Record<SectionName, string> = {
+  photos: 'Photos',
+  ingredients: 'Ingredients',
+  instructions: 'Instructions',
+  notes: 'Notes',
+  references: 'References',
+};
+
+export const dynamicParams = false;
+
 export async function generateStaticParams() {
   const paths = getAllRecipePaths();
   return paths.map((path) => ({
@@ -51,48 +63,29 @@ export default async function RecipePage({ params }: RecipePageProps) {
     notFound();
   }
 
-  const folderPath = recipe.folderPath;
+  const content = getRecipeContent(recipe);
 
-  const { content } = await compileMDX({
-    source: recipe.content,
-    components: {
-      RecipeCard,
-      img: ({ src, alt }: { src?: string; alt?: string }) => {
-        const srcString = typeof src === 'string' ? src : '';
-        const imageSrc = srcString.startsWith('./')
-          ? `/recipes/${folderPath}/${srcString.replace('./', '')}`.replace(/\\/g, '/')
-          : srcString;
-        return (
-          <img
-            src={imageSrc}
-            alt={alt || 'Recipe image'}
-            className="rounded-lg shadow-md w-full max-w-2xl mx-auto my-6 block"
-            loading="lazy"
-          />
-        );
-      },
-      a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-        <a
-          href={href}
-          className="text-blue-600 dark:text-blue-400 hover:underline"
-          target={href?.startsWith('http') ? '_blank' : undefined}
-          rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
-          {...props}
-        >
-          {children}
-        </a>
-      ),
-    },
-    options: {
-      mdxOptions: {
-        remarkPlugins: [remarkGfm],
-      },
-    },
+  const tabs: RecipeTab[] = SECTION_NAMES.flatMap((name) => {
+    const section = content.sections[name];
+    return section
+      ? [{ id: name, title: SECTION_TITLES[name], content: <RecipeMarkdown content={section} recipe={recipe} /> }]
+      : [];
   });
 
+  const cardImages = await getRecipeCardImages(recipe);
+  if (cardImages) {
+    tabs.push({
+      id: 'card',
+      title: 'Recipe Card',
+      content: <RecipeCardPanel title={recipe.title} images={cardImages} />,
+    });
+  }
+
   return (
     <RecipePageLayout recipe={recipe}>
-      {content}
+      <RecipeMarkdown content={content.intro} recipe={recipe} />
+      <RecipeTabs tabs={tabs} />
+      <RecipeMarkdown content={content.outro} recipe={recipe} />
     </RecipePageLayout>
   );
 }
diff --git a/app/recipes/page.tsx b/app/recipes/page.tsx
index 8719d7f..957b45f 100644
--- a/app/recipes/page.tsx
+++ b/app/recipes/page.tsx
@@ -15,14 +15,9 @@ export default function RecipesPage() {
 
   return (
     <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold text-gray-900 dark:text-white">
-          Recipes
-        </h1>
-        <p className="text-lg text-gray-600 dark:text-gray-400">
-          Explore our collection of {recipes.length} delicious recipes!
-        </p>
-      </div>
+      <h1 className="text-4xl font-bold text-gray-900 dark:text-white">
+        Recipes
+      </h1>
 
       <Suspense fallback={
         <div className="text-center py-12 text-gray-500 dark:text-gray-400">
diff --git a/components/ActiveFilters.tsx b/components/ActiveFilters.tsx
new file mode 100644
index 0000000..53b0a26
--- /dev/null
+++ b/components/ActiveFilters.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import type { FilterState } from '@/lib/types';
+
+interface ActiveFiltersProps {
+  filters: FilterState;
+  onFilterChange: (filters: FilterState) => void;
+}
+
+interface Chip {
+  key: string;
+  label: string;
+  remove: FilterState;
+}
+
+export default function ActiveFilters({ filters, onFilterChange }: ActiveFiltersProps) {
+  const chips: Chip[] = [
+    ...(filters.search
+      ? [{ key: 'search', label: `“${filters.search}”`, remove: { ...filters, search: '' } }]
+      : []),
+    ...(filters.category
+      ? [{ key: 'category', label: filters.category.charAt(0).toUpperCase() + filters.category.slice(1), remove: { ...filters, category: '' } }]
+      : []),
+    ...filters.selectedTags.map((tag) => ({
+      key: `tag-${tag}`,
+      label: tag,
+      remove: { ...filters, selectedTags: filters.selectedTags.filter((t) => t !== tag) },
+    })),
+  ];
+
+  if (chips.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2" aria-label="Active filters">
+      {chips.map((chip) => (
+        <button
+          key={chip.key}
+          type="button"
+          onClick={() => onFilterChange(chip.remove)}
+          className="inline-flex items-center gap-1.5 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-1 pl-3 pr-2 text-sm text-gray-800 dark:text-gray-200 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          aria-label={`Remove filter: ${chip.label}`}
+        >
+          {chip.label}
+          <svg className="h-3.5 w-3.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      ))}
+      <button
+        type="button"
+        onClick={() => onFilterChange({ search: '', category: '', selectedTags: [] })}
+        className="px-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+      >
+        Clear all
+      </button>
+    </div>
+  );
+}
diff --git a/components/FacetGroup.tsx b/components/FacetGroup.tsx
new file mode 100644
index 0000000..3354d73
--- /dev/null
+++ b/components/FacetGroup.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+interface FacetGroupProps {
+  title: string;
+  id: string;
+  activeCount?: number;
+  children: ReactNode;
+}
+
+export default function FacetGroup({ title, id, activeCount = 0, children }: FacetGroupProps) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div className="border-b border-gray-200 dark:border-gray-800 py-4 first:pt-0">
+      <h3>
+        <button
+          type="button"
+          onClick={() => setOpen(!open)}
+          aria-expanded={open}
+          aria-controls={`${id}-panel`}
+          className="flex w-full items-center justify-between text-sm font-semibold text-gray-900 dark:text-white"
+        >
+          <span className="flex items-center gap-2">
+            {title}
+            {activeCount > 0 && (
+              <span className="rounded-full bg-blue-600 px-1.5 text-xs font-medium leading-5 text-white tabular-nums">
+                {activeCount}
+              </span>
+            )}
+          </span>
+          <svg
+            className={`h-4 w-4 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      </h3>
+      <div id={`${id}-panel`} hidden={!open} className="mt-3">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/components/PrintCardButton.tsx b/components/PrintCardButton.tsx
new file mode 100644
index 0000000..6077ffa
--- /dev/null
+++ b/components/PrintCardButton.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+interface PrintCardButtonProps {
+  imageUrls: string[];
+  className?: string;
+}
+
+// Prints the card images at their physical size, one per page, from a hidden iframe
+export default function PrintCardButton({ imageUrls, className }: PrintCardButtonProps) {
+  const handlePrint = () => {
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('aria-hidden', 'true');
+    iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden';
+    iframe.srcdoc = `<!doctype html><html><head><style>
+      @page { size: 7in 5in; margin: 0; }
+      html, body { margin: 0; }
+      img { display: block; width: 7in; height: 5in; break-after: page; }
+      img:last-child { break-after: auto; }
+    </style></head><body>${imageUrls
+      .map((url) => `<img src="${new URL(url, window.location.href).href}" alt="">`)
+      .join('')}</body></html>`;
+
+    iframe.onload = async () => {
+      const printWindow = iframe.contentWindow;
+      if (!printWindow) return;
+      await Promise.all(
+        Array.from(printWindow.document.images).map((img) => img.decode().catch(() => undefined))
+      );
+      printWindow.addEventListener('afterprint', () => iframe.remove());
+      printWindow.focus();
+      printWindow.print();
+    };
+    document.body.appendChild(iframe);
+  };
+
+  return (
+    <button type="button" onClick={handlePrint} className={className}>
+      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9V3h12v6M6 18H4a1 1 0 01-1-1v-6a2 2 0 012-2h14a2 2 0 012 2v6a1 1 0 01-1 1h-2M7 14h10v7H7z" />
+      </svg>
+      Print
+    </button>
+  );
+}
diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx
deleted file mode 100644
index 70b91a8..0000000
--- a/components/RecipeCard.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-'use client';
-
-import React, { useState, type ReactNode } from 'react';
-
-interface Section {
-  title: string;
-  children: ReactNode[];
-}
-
-function extractText(node: ReactNode): string {
-  if (typeof node === 'string') return node;
-  if (typeof node === 'number') return String(node);
-  if (Array.isArray(node)) return node.map(extractText).join('');
-  if (React.isValidElement(node)) {
-    const props = node.props as { children?: ReactNode };
-    if (props.children) return extractText(props.children);
-  }
-  return '';
-}
-
-export default function RecipeCard({ children }: { children: ReactNode }) {
-  const childArray = React.Children.toArray(children);
-  const sections: Section[] = [];
-  let currentSection: Section | null = null;
-
-  for (const child of childArray) {
-    if (React.isValidElement(child) && child.type === 'h2') {
-      const title = extractText((child.props as { children?: ReactNode }).children);
-      currentSection = { title, children: [] };
-      sections.push(currentSection);
-    } else if (currentSection) {
-      currentSection.children.push(child);
-    }
-  }
-
-  const tabOrder = ['Photos', 'Ingredients', 'Instructions', 'Notes', 'References'];
-  const orderedSections = tabOrder
-    .map(name => sections.find(s => s.title === name))
-    .filter((s): s is Section => s !== undefined);
-
-  const [activeTab, setActiveTab] = useState(orderedSections[0]?.title || '');
-
-  if (orderedSections.length === 0) return null;
-
-  const activeSection = orderedSections.find(s => s.title === activeTab);
-
-  return (
-    <div
-      className="not-prose bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden my-8"
-      role="region"
-      aria-label="Recipe sections"
-    >
-      <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-        <nav className="flex overflow-x-auto" role="tablist" aria-label="Recipe section tabs">
-          {orderedSections.map((section) => (
-            <button
-              key={section.title}
-              onClick={() => setActiveTab(section.title)}
-              role="tab"
-              aria-selected={activeTab === section.title}
-              aria-controls={`tab-panel-${section.title.toLowerCase()}`}
-              id={`tab-${section.title.toLowerCase()}`}
-              className={`flex-shrink-0 px-6 py-4 text-sm font-medium whitespace-nowrap transition-colors border-b-2 ${
-                activeTab === section.title
-                  ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 bg-white dark:bg-gray-800'
-                  : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
-              }`}
-            >
-              {section.title}
-            </button>
-          ))}
-        </nav>
-      </div>
-
-      <div className="p-8">
-        {activeSection && (
-          <div
-            role="tabpanel"
-            id={`tab-panel-${activeSection.title.toLowerCase()}`}
-            aria-labelledby={`tab-${activeSection.title.toLowerCase()}`}
-            className={`max-w-none text-base leading-relaxed
-              [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-900 dark:[&_h3]:text-white [&_h3]:mt-5 [&_h3]:mb-2
-              [&_p]:text-gray-700 dark:[&_p]:text-gray-300 [&_p]:my-2
-              [&_strong]:text-gray-900 dark:[&_strong]:text-white
-              [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_ol]:my-4
-              [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ul]:my-4
-              [&_li]:text-gray-700 dark:[&_li]:text-gray-300
-              [&_li]:marker:text-gray-500 dark:[&_li]:marker:text-gray-400
-              [&_a]:text-blue-600 dark:[&_a]:text-blue-400 [&_a]:underline
-              [&_code]:text-gray-900 dark:[&_code]:text-gray-100 [&_code]:bg-gray-100 dark:[&_code]:bg-gray-800 [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5
-              [&_pre]:bg-gray-100 dark:[&_pre]:bg-gray-900
-              [&_table]:border-collapse
-              [&_th]:border [&_th]:border-gray-300 dark:[&_th]:border-gray-600
-              [&_td]:border [&_td]:border-gray-300 dark:[&_td]:border-gray-600
-              ${activeSection.title === 'Photos'
-                ? '[&_img]:w-full [&_img]:max-w-2xl [&_img]:mx-auto [&_em]:block [&_em]:text-center [&_em]:text-sm [&_em]:text-gray-600 dark:[&_em]:text-gray-400 [&_em]:italic [&_em]:my-2'
-                : ''
-              }
-            `}
-          >
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
-              {activeSection.title}
-            </h2>
-            {activeSection.children}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/components/RecipeCardPanel.tsx b/components/RecipeCardPanel.tsx
new file mode 100644
index 0000000..e99eac7
--- /dev/null
+++ b/components/RecipeCardPanel.tsx
@@ -0,0 +1,51 @@
+import type { RecipeCardImage } from '@/lib/recipe-card';
+import PrintCardButton from './PrintCardButton';
+
+interface RecipeCardPanelProps {
+  title: string;
+  images: RecipeCardImage[];
+}
+
+const buttonClass =
+  'inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors';
+
+export default function RecipeCardPanel({ title, images }: RecipeCardPanelProps) {
+  const doubleSided = images.length > 1;
+
+  return (
+    <div className="space-y-6">
+      <p className="!mt-0 text-sm text-gray-600 dark:text-gray-400">
+        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.' : '.'}
+      </p>
+
+      <div className={doubleSided ? 'grid gap-6 xl:grid-cols-2' : ''}>
+        {images.map((image) => (
+          <figure key={image.fileName} className="!my-0">
+            <img
+              src={image.url}
+              alt={`${title} recipe card${doubleSided ? ` (${image.label.toLowerCase()})` : ''}`}
+              width={2100}
+              height={1500}
+              loading="lazy"
+              className="h-auto w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white shadow-sm"
+            />
+            {doubleSided && <figcaption>{image.label}</figcaption>}
+          </figure>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        {images.map((image) => (
+          <a key={image.fileName} href={image.url} download={image.downloadName} className={buttonClass}>
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16" />
+            </svg>
+            {doubleSided ? `Download ${image.label.toLowerCase()}` : 'Download PNG'}
+          </a>
+        ))}
+        <PrintCardButton imageUrls={images.map((image) => image.url)} className={buttonClass} />
+      </div>
+    </div>
+  );
+}
diff --git a/components/RecipeGridCard.tsx b/components/RecipeGridCard.tsx
index e3c005b..69c8d2f 100644
--- a/components/RecipeGridCard.tsx
+++ b/components/RecipeGridCard.tsx
@@ -1,16 +1,14 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import type { RecipeMetadata } from '@/lib/recipes';
+import { resolveRecipeAssetUrl } from '@/lib/recipe-urls';
 
 interface RecipeCardProps {
-  recipe: RecipeMetadata & { folderPath: string };
+  recipe: RecipeMetadata;
 }
 
 export default function RecipeGridCard({ recipe }: RecipeCardProps) {
-  // Convert relative path to public URL
-  const imageSrc = recipe.displayPhoto && recipe.displayPhoto.startsWith('./')
-    ? `/recipes/${recipe.folderPath}/${recipe.displayPhoto.replace('./', '')}`.replace(/\\/g, '/')
-    : recipe.displayPhoto || null;
+  const imageSrc = recipe.displayPhoto ? resolveRecipeAssetUrl(recipe, recipe.displayPhoto) : null;
 
   return (
     <Link
diff --git a/components/RecipeLayout.tsx b/components/RecipeLayout.tsx
index 5e83eae..b90967a 100644
--- a/components/RecipeLayout.tsx
+++ b/components/RecipeLayout.tsx
@@ -1,36 +1,49 @@
 'use client';
 
-import { useState, useCallback, ReactNode } from 'react';
+import { useState, useCallback, useEffect, ReactNode } from 'react';
 import RecipesSidebar from './RecipesSidebar';
-import type { FilterState } from '@/lib/types';
+import type { FacetCounts, FilterState } from '@/lib/types';
 
 interface RecipeLayoutProps {
   children: ReactNode;
   categories: string[];
   tags: string[];
-  filters?: FilterState;
-  onFilterChange?: (filters: FilterState) => void;
-  showFilters?: boolean;
+  facetCounts: FacetCounts;
+  resultCount: number;
+  filters: FilterState;
+  onFilterChange: (filters: FilterState) => void;
 }
 
 export default function RecipeLayout({
   children,
   categories,
   tags,
+  facetCounts,
+  resultCount,
   filters,
   onFilterChange,
-  showFilters = true
 }: RecipeLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const handleFilterChange = useCallback((newFilters: FilterState) => {
-    if (onFilterChange) {
-      onFilterChange(newFilters);
-    }
+    onFilterChange(newFilters);
   }, [onFilterChange]);
 
+  // Close the mobile drawer on Escape
+  useEffect(() => {
+    if (!sidebarOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setSidebarOpen(false);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [sidebarOpen]);
+
+  const activeFilterCount =
+    (filters.search ? 1 : 0) + (filters.category ? 1 : 0) + filters.selectedTags.length;
+
   return (
-    <div className="min-h-screen">
+    <div>
       {/* Mobile Overlay */}
       {sidebarOpen && (
         <div
@@ -44,41 +57,44 @@ export default function RecipeLayout({
       <div className="lg:hidden mb-4">
         <button
           onClick={() => setSidebarOpen(true)}
-          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-          aria-label="Open filters sidebar"
+          className="inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-700 px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
           aria-expanded={sidebarOpen}
           aria-controls="recipes-sidebar"
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M7 12h10M10 18h4" />
           </svg>
           <span>Filters</span>
+          {activeFilterCount > 0 && (
+            <span className="rounded-full bg-blue-600 px-1.5 text-xs leading-5 text-white tabular-nums">
+              {activeFilterCount}
+            </span>
+          )}
         </button>
       </div>
 
-      <div className="flex">
-        {/* Sidebar - Always visible on desktop (lg+), slide-out drawer on mobile */}
+      <div className="flex lg:gap-10">
+        {/* Sidebar - sticky column on desktop (lg+), slide-out drawer on mobile */}
         <aside
           id="recipes-sidebar"
           className={`
-            fixed lg:relative z-50 lg:z-0
-            top-0 bottom-0 left-0
-            w-72 lg:w-64
+            fixed inset-y-0 left-0 z-50 w-80 max-w-[85vw]
             bg-white dark:bg-gray-900
-            border-r border-gray-200 dark:border-gray-700
             transition-transform duration-300 ease-in-out
-            ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+            lg:sticky lg:top-8 lg:z-0 lg:w-64 lg:max-w-none lg:shrink-0 lg:self-start
+            lg:max-h-[calc(100vh-4rem)] lg:bg-transparent lg:translate-x-0 lg:transition-none
+            ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
           `}
           aria-label="Recipe filters"
         >
-          <div className="h-full lg:sticky lg:top-0 flex flex-col overflow-y-auto">
-            {/* Mobile sidebar header */}
-            <div className="lg:hidden flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <span className="text-sm font-semibold text-gray-900 dark:text-white">Filters</span>
+          <div className="flex h-full flex-col lg:max-h-[calc(100vh-4rem)]">
+            {/* Mobile drawer header */}
+            <div className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800">
+              <span className="text-base font-semibold text-gray-900 dark:text-white">Filters</span>
               <button
                 onClick={() => setSidebarOpen(false)}
                 className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                aria-label="Close filters sidebar"
+                aria-label="Close filters"
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -86,16 +102,24 @@ export default function RecipeLayout({
               </button>
             </div>
 
-            {/* Sidebar content */}
-            <div className="p-4">
-              {showFilters && filters && (
-                <RecipesSidebar
-                  categories={categories}
-                  tags={tags}
-                  filters={filters}
-                  onFilterChange={handleFilterChange}
-                />
-              )}
+            <div className="flex-1 overflow-y-auto p-4 lg:p-0 lg:pr-2">
+              <RecipesSidebar
+                categories={categories}
+                tags={tags}
+                facetCounts={facetCounts}
+                filters={filters}
+                onFilterChange={handleFilterChange}
+              />
+            </div>
+
+            {/* Mobile drawer footer */}
+            <div className="lg:hidden border-t border-gray-200 dark:border-gray-800 p-4">
+              <button
+                onClick={() => setSidebarOpen(false)}
+                className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 transition-colors"
+              >
+                Show {resultCount} {resultCount === 1 ? 'recipe' : 'recipes'}
+              </button>
             </div>
           </div>
         </aside>
diff --git a/components/RecipeMarkdown.tsx b/components/RecipeMarkdown.tsx
new file mode 100644
index 0000000..74de13e
--- /dev/null
+++ b/components/RecipeMarkdown.tsx
@@ -0,0 +1,39 @@
+import type { Root } from 'mdast';
+import { toHast } from 'mdast-util-to-hast';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { resolveRecipeAssetUrl } from '@/lib/recipe-urls';
+
+interface RecipeMarkdownProps {
+  content: Root;
+  recipe: { category: string; slug: string };
+}
+
+// Renders a parsed markdown tree, rewriting ./assets/ image paths to served URLs
+export default function RecipeMarkdown({ content, recipe }: RecipeMarkdownProps) {
+  return toJsxRuntime(toHast(content), {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      img: ({ src, alt }) => (
+        <img
+          src={resolveRecipeAssetUrl(recipe, typeof src === 'string' ? src : '')}
+          alt={alt || 'Recipe image'}
+          className="rounded-lg shadow-md w-full max-w-2xl mx-auto block"
+          loading="lazy"
+        />
+      ),
+      a: ({ href, children }) => (
+        <a
+          href={href}
+          className="text-blue-600 dark:text-blue-400 hover:underline"
+          target={href?.startsWith('http') ? '_blank' : undefined}
+          rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+        >
+          {children}
+        </a>
+      ),
+    },
+  });
+}
diff --git a/components/RecipePageLayout.tsx b/components/RecipePageLayout.tsx
index 5351d14..d5ad302 100644
--- a/components/RecipePageLayout.tsx
+++ b/components/RecipePageLayout.tsx
@@ -89,7 +89,7 @@ export default function RecipePageLayout({ recipe, children }: RecipePageLayoutP
           </div>
         </header>
 
-        {/* MDX content: intro prose + RecipeCard + outro prose */}
+        {/* Recipe content: intro prose + section tabs + outro prose */}
         <div className={`prose prose-lg dark:prose-invert max-w-none
           prose-p:text-gray-700 dark:prose-p:text-gray-300
           prose-headings:text-gray-900 dark:prose-headings:text-white
diff --git a/components/RecipeTabs.tsx b/components/RecipeTabs.tsx
new file mode 100644
index 0000000..4b38ae3
--- /dev/null
+++ b/components/RecipeTabs.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
+export interface RecipeTab {
+  id: string;
+  title: string;
+  content: ReactNode;
+}
+
+export default function RecipeTabs({ tabs }: { tabs: RecipeTab[] }) {
+  const [activeId, setActiveId] = useState(tabs[0]?.id);
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+  // Arrow keys move between tabs (WAI-ARIA tabs pattern)
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    const offsets: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 };
+    let next: number | undefined;
+    if (e.key in offsets) next = (index + offsets[e.key] + tabs.length) % tabs.length;
+    if (e.key === 'Home') next = 0;
+    if (e.key === 'End') next = tabs.length - 1;
+    if (next === undefined) return;
+    e.preventDefault();
+    setActiveId(tabs[next].id);
+    tabRefs.current[tabs[next].id]?.focus();
+  };
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <div className="not-prose bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden my-8">
+      <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+        <div className="flex overflow-x-auto" role="tablist" aria-label="Recipe sections">
+          {tabs.map((tab, index) => {
+            const selected = tab.id === activeId;
+            return (
+              <button
+                key={tab.id}
+                ref={(el) => { tabRefs.current[tab.id] = el; }}
+                onClick={() => setActiveId(tab.id)}
+                onKeyDown={(e) => handleKeyDown(e, index)}
+                role="tab"
+                aria-selected={selected}
+                aria-controls={`tab-panel-${tab.id}`}
+                id={`tab-${tab.id}`}
+                tabIndex={selected ? 0 : -1}
+                className={`flex-shrink-0 px-6 py-4 text-sm font-medium whitespace-nowrap transition-colors border-b-2 ${
+                  selected
+                    ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 bg-white dark:bg-gray-800'
+                    : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
+                }`}
+              >
+                {tab.title}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* All panels stay in the HTML so content is indexable; only the active one is shown */}
+      {tabs.map((tab) => (
+        <div
+          key={tab.id}
+          role="tabpanel"
+          id={`tab-panel-${tab.id}`}
+          aria-labelledby={`tab-${tab.id}`}
+          hidden={tab.id !== activeId}
+          className="p-8 max-w-none text-base leading-relaxed
+            [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-900 dark:[&_h3]:text-white [&_h3]:mt-5 [&_h3]:mb-2
+            [&_p]:text-gray-700 dark:[&_p]:text-gray-300 [&_p]:my-2
+            [&_strong]:text-gray-900 dark:[&_strong]:text-white
+            [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_ol]:my-4
+            [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ul]:my-4
+            [&_li]:text-gray-700 dark:[&_li]:text-gray-300
+            [&_li]:marker:text-gray-500 dark:[&_li]:marker:text-gray-400
+            [&_code]:text-gray-900 dark:[&_code]:text-gray-100 [&_code]:bg-gray-100 dark:[&_code]:bg-gray-800 [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5
+            [&_pre]:bg-gray-100 dark:[&_pre]:bg-gray-900
+            [&_table]:border-collapse
+            [&_th]:border [&_th]:border-gray-300 dark:[&_th]:border-gray-600
+            [&_td]:border [&_td]:border-gray-300 dark:[&_td]:border-gray-600
+            [&_figure]:my-6
+            [&_figcaption]:mt-2 [&_figcaption]:text-center [&_figcaption]:text-sm [&_figcaption]:italic [&_figcaption]:text-gray-600 dark:[&_figcaption]:text-gray-400"
+        >
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+            {tab.title}
+          </h2>
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/RecipesClient.tsx b/components/RecipesClient.tsx
index 4fb9e96..c6342eb 100644
--- a/components/RecipesClient.tsx
+++ b/components/RecipesClient.tsx
@@ -5,7 +5,8 @@ import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import RecipeLayout from './RecipeLayout';
 import RecipeGridCard from './RecipeGridCard';
 import type { Recipe } from '@/lib/recipes';
-import type { FilterState } from '@/lib/types';
+import ActiveFilters from './ActiveFilters';
+import type { FacetCounts, FilterState } from '@/lib/types';
 
 interface RecipesClientProps {
   recipes: Recipe[];
@@ -32,6 +33,24 @@ function buildQueryString(filters: FilterState): string {
   return qs ? `?${qs}` : '';
 }
 
+function matchesSearch(recipe: Recipe, search: string): boolean {
+  if (!search) return true;
+  const searchLower = search.toLowerCase();
+  return (
+    recipe.title.toLowerCase().includes(searchLower) ||
+    recipe.description.toLowerCase().includes(searchLower) ||
+    recipe.tags.some((tag) => tag.toLowerCase().includes(searchLower))
+  );
+}
+
+function matchesCategory(recipe: Recipe, category: string): boolean {
+  return !category || recipe.category === category;
+}
+
+function hasAllTags(recipe: Recipe, tags: string[]): boolean {
+  return tags.every((tag) => recipe.tags.includes(tag));
+}
+
 export default function RecipesClient({ recipes, categories, tags }: RecipesClientProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -60,59 +79,72 @@ export default function RecipesClient({ recipes, categories, tags }: RecipesClie
     router.replace(`${pathname}${buildQueryString(newFilters)}`, { scroll: false });
   }, [router, pathname]);
 
-  const filteredRecipes = useMemo(() => {
-    return recipes.filter((recipe) => {
-      if (filters.search) {
-        const searchLower = filters.search.toLowerCase();
-        const matchesSearch =
-          recipe.title.toLowerCase().includes(searchLower) ||
-          recipe.description.toLowerCase().includes(searchLower) ||
-          recipe.tags.some((tag) => tag.toLowerCase().includes(searchLower));
-        if (!matchesSearch) return false;
-      }
+  const searchMatches = useMemo(
+    () => recipes.filter((recipe) => matchesSearch(recipe, filters.search)),
+    [recipes, filters.search]
+  );
 
-      if (filters.category && recipe.category !== filters.category) {
-        return false;
-      }
+  const filteredRecipes = useMemo(
+    () => searchMatches.filter((recipe) =>
+      matchesCategory(recipe, filters.category) && hasAllTags(recipe, filters.selectedTags)
+    ),
+    [searchMatches, filters.category, filters.selectedTags]
+  );
 
-      if (filters.selectedTags.length > 0) {
-        const hasAllTags = filters.selectedTags.every((tag) => recipe.tags.includes(tag));
-        if (!hasAllTags) return false;
+  // Each facet's counts apply every filter except its own, so options show
+  // how many results picking them would give
+  const facetCounts = useMemo<FacetCounts>(() => {
+    const counts: FacetCounts = { categories: {}, tags: {} };
+    for (const recipe of searchMatches) {
+      if (!hasAllTags(recipe, filters.selectedTags)) continue;
+      counts.categories[recipe.category] = (counts.categories[recipe.category] ?? 0) + 1;
+      if (!matchesCategory(recipe, filters.category)) continue;
+      for (const tag of recipe.tags) {
+        counts.tags[tag] = (counts.tags[tag] ?? 0) + 1;
       }
-
-      return true;
-    });
-  }, [recipes, filters]);
+    }
+    return counts;
+  }, [searchMatches, filters.category, filters.selectedTags]);
 
   return (
     <RecipeLayout
       categories={categories}
       tags={tags}
+      facetCounts={facetCounts}
+      resultCount={filteredRecipes.length}
       filters={filters}
       onFilterChange={updateFilters}
-      showFilters={true}
     >
-      <div className="mb-4 text-sm text-gray-600 dark:text-gray-400">
-        {filteredRecipes.length === recipes.length
-          ? `Showing all ${recipes.length} recipes`
-          : `Showing ${filteredRecipes.length} of ${recipes.length} recipes`}
+      <div className="mb-6 space-y-3">
+        <p className="text-sm text-gray-600 dark:text-gray-400" aria-live="polite">
+          {filteredRecipes.length === recipes.length
+            ? `${recipes.length} recipes`
+            : `${filteredRecipes.length} of ${recipes.length} recipes`}
+        </p>
+        <ActiveFilters filters={filters} onFilterChange={updateFilters} />
       </div>
 
       {filteredRecipes.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
           {filteredRecipes.map((recipe) => (
-            <RecipeGridCard key={recipe.slug} recipe={recipe} />
+            <RecipeGridCard key={`${recipe.category}/${recipe.slug}`} recipe={recipe} />
           ))}
         </div>
       ) : (
-        <div className="text-center py-12">
-          <div className="text-6xl mb-4">🔍</div>
-          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-            No recipes found
-          </h3>
-          <p className="text-gray-600 dark:text-gray-400">
-            Try adjusting your filters or search terms
+        <div className="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 px-6 py-16 text-center">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+            No recipes match these filters
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Try removing a filter or searching for something else.
           </p>
+          <button
+            type="button"
+            onClick={() => updateFilters({ search: '', category: '', selectedTags: [] })}
+            className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+          >
+            Clear all filters
+          </button>
         </div>
       )}
     </RecipeLayout>
diff --git a/components/RecipesSidebar.tsx b/components/RecipesSidebar.tsx
index 3e16aab..03dc175 100644
--- a/components/RecipesSidebar.tsx
+++ b/components/RecipesSidebar.tsx
@@ -1,21 +1,43 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import SelectedTags from './SelectedTags';
-import TagSelector from './TagSelector';
-import type { FilterState } from '@/lib/types';
+import FacetGroup from './FacetGroup';
+import type { FacetCounts, FilterState } from '@/lib/types';
 
 interface RecipesSidebarProps {
   categories: string[];
   tags: string[];
+  facetCounts: FacetCounts;
   filters: FilterState;
   onFilterChange: (filters: FilterState) => void;
 }
 
-export default function RecipesSidebar({ categories, tags, filters, onFilterChange }: RecipesSidebarProps) {
-  const [searchInput, setSearchInput] = useState(filters.search);
+const COLLAPSED_CATEGORY_COUNT = 8;
+const COLLAPSED_TAG_COUNT = 10;
 
-  // Sync external search changes (e.g. "Clear All" or URL-driven) to local input
+function capitalize(value: string): string {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+function ShowMoreButton({ expanded, hiddenCount, onClick }: { expanded: boolean; hiddenCount: number; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="mt-2 px-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+    >
+      {expanded ? 'Show less' : `Show ${hiddenCount} more`}
+    </button>
+  );
+}
+
+export default function RecipesSidebar({ categories, tags, facetCounts, filters, onFilterChange }: RecipesSidebarProps) {
+  const [searchInput, setSearchInput] = useState(filters.search);
+  const [tagQuery, setTagQuery] = useState('');
+  const [showAllCategories, setShowAllCategories] = useState(false);
+  const [showAllTags, setShowAllTags] = useState(false);
+
+  // Sync external search changes (e.g. "Clear all" or URL-driven) to local input
   useEffect(() => {
     setSearchInput(filters.search);
   }, [filters.search]);
@@ -37,85 +59,164 @@ export default function RecipesSidebar({ categories, tags, filters, onFilterChan
     onFilterChange({ ...filters, selectedTags });
   };
 
-  const handleRemoveTag = (tag: string) => {
-    onFilterChange({ ...filters, selectedTags: filters.selectedTags.filter((t) => t !== tag) });
-  };
+  const allCategoriesCount = Object.values(facetCounts.categories).reduce((sum, n) => sum + n, 0);
 
-  const handleClearTags = () => {
-    onFilterChange({ ...filters, selectedTags: [] });
-  };
+  // Hide options that would lead to zero results, unless already selected
+  const availableCategories = categories.filter(
+    (cat) => (facetCounts.categories[cat] ?? 0) > 0 || cat === filters.category
+  );
+  const availableTags = tags.filter(
+    (tag) => ((facetCounts.tags[tag] ?? 0) > 0 || filters.selectedTags.includes(tag)) &&
+      tag.toLowerCase().includes(tagQuery.toLowerCase())
+  );
 
-  const handleClearFilters = () => {
-    setSearchInput('');
-    onFilterChange({ search: '', category: '', selectedTags: [] });
-  };
-
-  const hasActiveFilters = searchInput || filters.category || filters.selectedTags.length > 0;
+  // Selected values stay visible even when their group is collapsed
+  const visibleCategories = showAllCategories
+    ? availableCategories
+    : availableCategories.filter((cat, i) => i < COLLAPSED_CATEGORY_COUNT || cat === filters.category);
+  const visibleTags = showAllTags || tagQuery
+    ? availableTags
+    : availableTags.filter((tag, i) => i < COLLAPSED_TAG_COUNT || filters.selectedTags.includes(tag));
 
   return (
     <section aria-label="Recipe filters">
-      <div className="space-y-3">
-        <div>
-          <label htmlFor="search" className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-            Search
-          </label>
+      <div className="pb-4">
+        <label htmlFor="recipe-search" className="sr-only">
+          Search recipes
+        </label>
+        <div className="relative">
+          <svg
+            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z" />
+          </svg>
           <input
-            type="text"
-            id="search"
+            type="search"
+            id="recipe-search"
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
-            placeholder="Search recipes..."
-            className="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="Search recipes"
+            autoComplete="off"
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-2 pl-9 pr-9 text-sm text-gray-900 dark:text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 [&::-webkit-search-cancel-button]:appearance-none"
           />
+          {searchInput && (
+            <button
+              type="button"
+              onClick={() => {
+                setSearchInput('');
+                onFilterChange({ ...filters, search: '' });
+              }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+              aria-label="Clear search"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
         </div>
-
-        <div>
-          <label htmlFor="category" className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-            Category
-          </label>
-          <select
-            id="category"
-            value={filters.category}
-            onChange={(e) => onFilterChange({ ...filters, category: e.target.value })}
-            className="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            <option value="">All Categories</option>
-            {categories.map((cat) => (
-              <option key={cat} value={cat}>
-                {cat.charAt(0).toUpperCase() + cat.slice(1)}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div className="space-y-2">
-          <label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
-            Tags
-          </label>
-
-          <SelectedTags
-            tags={filters.selectedTags}
-            onRemove={handleRemoveTag}
-            onClear={handleClearTags}
-          />
-
-          <TagSelector
-            availableTags={tags}
-            selectedTags={filters.selectedTags}
-            onToggleTag={handleTagToggle}
-          />
-        </div>
-
-        {hasActiveFilters && (
-          <button
-            onClick={handleClearFilters}
-            className="w-full px-3 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-            aria-label="Clear all filters"
-          >
-            Clear All Filters
-          </button>
-        )}
       </div>
+
+      <FacetGroup title="Category" id="facet-category" activeCount={filters.category ? 1 : 0}>
+        <fieldset>
+          <legend className="sr-only">Category</legend>
+          <div className="space-y-0.5">
+            {[{ value: '', label: 'All categories', count: allCategoriesCount }]
+              .concat(visibleCategories.map((cat) => ({
+                value: cat,
+                label: capitalize(cat),
+                count: facetCounts.categories[cat] ?? 0,
+              })))
+              .map(({ value, label, count }) => {
+                const checked = filters.category === value;
+                return (
+                  <label
+                    key={value || 'all'}
+                    className={`flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors
+                      has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500
+                      ${checked
+                        ? 'bg-blue-50 dark:bg-blue-950 font-medium text-blue-700 dark:text-blue-300'
+                        : 'cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`}
+                  >
+                    <input
+                      type="radio"
+                      name="category"
+                      value={value}
+                      checked={checked}
+                      onChange={() => onFilterChange({ ...filters, category: value })}
+                      className="sr-only"
+                    />
+                    <span>{label}</span>
+                    <span className="text-xs tabular-nums text-gray-500 dark:text-gray-400">{count}</span>
+                  </label>
+                );
+              })}
+          </div>
+          {(showAllCategories ? availableCategories.length > COLLAPSED_CATEGORY_COUNT : visibleCategories.length < availableCategories.length) && (
+            <ShowMoreButton
+              expanded={showAllCategories}
+              hiddenCount={availableCategories.length - visibleCategories.length}
+              onClick={() => setShowAllCategories(!showAllCategories)}
+            />
+          )}
+        </fieldset>
+      </FacetGroup>
+
+      <FacetGroup title="Tags" id="facet-tags" activeCount={filters.selectedTags.length}>
+        <fieldset>
+          <legend className="sr-only">Tags</legend>
+          {tags.length > COLLAPSED_TAG_COUNT && (
+            <div className="mb-2">
+              <label htmlFor="tag-search" className="sr-only">Filter tags</label>
+              <input
+                id="tag-search"
+                type="text"
+                value={tagQuery}
+                onChange={(e) => setTagQuery(e.target.value)}
+                placeholder="Filter tags"
+                autoComplete="off"
+                className="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-900 dark:text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+              />
+            </div>
+          )}
+          <div className="space-y-0.5">
+            {visibleTags.map((tag) => {
+              const checked = filters.selectedTags.includes(tag);
+              const count = facetCounts.tags[tag] ?? 0;
+              return (
+                <label
+                  key={tag}
+                  className={`flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-800
+                    ${checked ? 'font-medium text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'}`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={() => handleTagToggle(tag)}
+                    className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 accent-blue-600"
+                  />
+                  <span className="flex-1 truncate">{tag}</span>
+                  <span className="text-xs tabular-nums text-gray-500 dark:text-gray-400">{count}</span>
+                </label>
+              );
+            })}
+            {visibleTags.length === 0 && (
+              <p className="px-2 py-1.5 text-sm text-gray-500 dark:text-gray-400">No matching tags</p>
+            )}
+          </div>
+          {!tagQuery && (showAllTags ? availableTags.length > COLLAPSED_TAG_COUNT : visibleTags.length < availableTags.length) && (
+            <ShowMoreButton
+              expanded={showAllTags}
+              hiddenCount={availableTags.length - visibleTags.length}
+              onClick={() => setShowAllTags(!showAllTags)}
+            />
+          )}
+        </fieldset>
+      </FacetGroup>
     </section>
   );
 }
diff --git a/components/SelectedTags.tsx b/components/SelectedTags.tsx
deleted file mode 100644
index 1fb1d3c..0000000
--- a/components/SelectedTags.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-interface SelectedTagsProps {
-  tags: string[];
-  onRemove: (tag: string) => void;
-  onClear: () => void;
-}
-
-export default function SelectedTags({ tags, onRemove, onClear }: SelectedTagsProps) {
-  if (tags.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-2" role="region" aria-label="Selected tags">
-      <div className="flex items-center justify-between">
-        <span className="text-xs font-medium text-gray-700 dark:text-gray-300" id="selected-tags-heading">
-          Selected Tags ({tags.length})
-        </span>
-        <button
-          onClick={onClear}
-          className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
-          aria-label={`Clear all ${tags.length} selected tags`}
-        >
-          Clear all
-        </button>
-      </div>
-      <div className="flex flex-wrap gap-1.5" role="list" aria-labelledby="selected-tags-heading">
-        {tags.map((tag) => (
-          <button
-            key={tag}
-            onClick={() => onRemove(tag)}
-            className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
-            role="listitem"
-            aria-label={`Remove ${tag} tag`}
-          >
-            <span>{tag}</span>
-            <span className="text-blue-600 dark:text-blue-300" aria-hidden="true">×</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/components/TagSelector.tsx b/components/TagSelector.tsx
deleted file mode 100644
index d0ad130..0000000
--- a/components/TagSelector.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-
-interface TagSelectorProps {
-  availableTags: string[];
-  selectedTags: string[];
-  onToggleTag: (tag: string) => void;
-}
-
-export default function TagSelector({ availableTags, selectedTags, onToggleTag }: TagSelectorProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen]);
-
-  const filteredTags = availableTags.filter((tag) =>
-    tag.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors flex items-center justify-between"
-        aria-expanded={isOpen}
-        aria-haspopup="true"
-        aria-controls="tag-selector-dropdown"
-        aria-label="Add tags to filter"
-      >
-        <span>Add Tags</span>
-        <span className="text-gray-400" aria-hidden="true">{isOpen ? '▲' : '▼'}</span>
-      </button>
-
-      {isOpen && (
-        <div
-          id="tag-selector-dropdown"
-          className="mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg max-h-48 flex flex-col"
-          role="dialog"
-          aria-label="Tag selection"
-        >
-          {/* Search input */}
-          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-            <label htmlFor="tag-search" className="sr-only">Search tags</label>
-            <input
-              id="tag-search"
-              type="text"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              placeholder="Search tags..."
-              className="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              aria-describedby="tag-search-description"
-            />
-            <span id="tag-search-description" className="sr-only">
-              Filter available tags by name
-            </span>
-          </div>
-
-          {/* Tag list */}
-          <div className="overflow-y-auto p-2" role="group" aria-label="Available tags">
-            {filteredTags.length > 0 ? (
-              <div className="space-y-0.5">
-                {filteredTags.map((tag) => (
-                  <label
-                    key={tag}
-                    className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedTags.includes(tag)}
-                      onChange={() => onToggleTag(tag)}
-                      className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
-                      aria-label={`${selectedTags.includes(tag) ? 'Deselect' : 'Select'} ${tag} tag`}
-                    />
-                    <span className="text-sm text-gray-700 dark:text-gray-300">{tag}</span>
-                    {selectedTags.includes(tag) && (
-                      <span className="ml-auto text-xs text-blue-600 dark:text-blue-400" aria-hidden="true">✓</span>
-                    )}
-                  </label>
-                ))}
-              </div>
-            ) : (
-              <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
-                No tags found
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="p-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-            <span aria-live="polite" aria-atomic="true">
-              {selectedTags.length} {selectedTags.length === 1 ? 'tag' : 'tags'} selected
-            </span>
-            <button
-              onClick={() => setIsOpen(false)}
-              className="px-2 py-1 text-blue-600 dark:text-blue-400 hover:underline"
-              aria-label="Close tag selector"
-            >
-              Done
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/lib/recipe-card.tsx b/lib/recipe-card.tsx
new file mode 100644
index 0000000..ada674b
--- /dev/null
+++ b/lib/recipe-card.tsx
@@ -0,0 +1,476 @@
+import fs from 'fs';
+import path from 'path';
+import satori, { type Font } from 'satori';
+import sharp from 'sharp';
+import type { List, Root } from 'mdast';
+import { toString } from 'mdast-util-to-string';
+import type { ReactElement } from 'react';
+import { getRecipeContent, type Recipe } from './recipes';
+import type { CardSectionName } from './recipe-content';
+import { recipeCardImageUrl } from './recipe-urls';
+import { SITE_NAME, SITE_URL } from './site';
+
+// 5×7 in landscape at 300 DPI. 5×7 is a standard photo print size, so the PNG
+// prints edge to edge on photo paper or card stock without scaling.
+export const CARD_DPI = 300;
+export const CARD_WIDTH = 7 * CARD_DPI;
+export const CARD_HEIGHT = 5 * CARD_DPI;
+
+const PADDING = 105;
+const GUTTER = 72;
+const INNER_WIDTH = CARD_WIDTH - 2 * PADDING;
+const FOOTER_FONT_SIZE = 26;
+const FOOTER_HEIGHT = 34;
+const FOOTER_GAP = 28;
+const LINE_HEIGHT = 1.32;
+
+// Body text sizes to try, largest first (34px ≈ 8pt, 30px ≈ 7pt when printed).
+// A single side at a smaller size beats front/back at a larger one.
+const SINGLE_SIDED_SIZES = [44, 42, 40, 38, 36, 34];
+const DOUBLE_SIDED_SIZES = [44, 42, 40, 38, 36, 34, 32, 30];
+
+const COLORS = {
+  background: '#ffffff',
+  ink: '#1c1917',
+  muted: '#78716c',
+  accent: '#9a3412',
+};
+
+const SECTION_LABELS: Record<CardSectionName, string> = {
+  ingredients: 'Ingredients',
+  instructions: 'Instructions',
+};
+
+type Block =
+  | { kind: 'heading'; text: string }
+  | { kind: 'item'; marker: string; ordered: boolean; depth: number; text: string }
+  | { kind: 'text'; text: string };
+
+interface CardSection {
+  name: CardSectionName;
+  blocks: Block[];
+}
+
+interface Region {
+  section: CardSection;
+  columnWidth: number;
+  columns: Block[][];
+}
+
+type FaceName = 'card' | 'front' | 'back';
+
+interface CardFace {
+  name: FaceName;
+  compactHeader: boolean;
+  regions: Region[];
+}
+
+interface CardLayout {
+  fontSize: number;
+  faces: CardFace[];
+}
+
+export interface RecipeCardImage {
+  label: string;
+  url: string;
+  fileName: string;
+  downloadName: string;
+}
+
+let fonts: Font[] | null = null;
+
+function getFonts(): Font[] {
+  if (!fonts) {
+    const file = (pkg: string, name: string) =>
+      fs.readFileSync(path.join(process.cwd(), 'node_modules/@fontsource', pkg, 'files', name));
+    fonts = [
+      { name: 'Inter', data: file('inter', 'inter-latin-400-normal.woff'), weight: 400, style: 'normal' },
+      { name: 'Inter', data: file('inter', 'inter-latin-600-normal.woff'), weight: 600, style: 'normal' },
+      { name: 'Inter', data: file('inter', 'inter-latin-700-normal.woff'), weight: 700, style: 'normal' },
+      { name: 'Lora', data: file('lora', 'lora-latin-700-normal.woff'), weight: 700, style: 'normal' },
+    ];
+  }
+  return fonts;
+}
+
+// Flattens markdown into the blocks a printed card shows; images, tables and code are dropped
+function toBlocks(tree: Root): Block[] {
+  const blocks: Block[] = [];
+  const addList = (list: List, depth: number) => {
+    list.children.forEach((item, i) => {
+      const ordered = Boolean(list.ordered);
+      blocks.push({
+        kind: 'item',
+        ordered,
+        depth,
+        marker: ordered ? `${(list.start ?? 1) + i}.` : depth > 0 ? '–' : '•',
+        text: item.children.filter((c) => c.type !== 'list').map((c) => toString(c)).join(' '),
+      });
+      for (const child of item.children) {
+        if (child.type === 'list') addList(child, depth + 1);
+      }
+    });
+  };
+
+  for (const node of tree.children) {
+    if (node.type === 'heading') {
+      blocks.push({ kind: 'heading', text: toString(node) });
+    } else if (node.type === 'list') {
+      addList(node, 0);
+    } else if (node.type === 'paragraph' && !node.data?.hName) {
+      const text = toString(node).trim();
+      if (text) blocks.push({ kind: 'text', text });
+    }
+  }
+  return blocks;
+}
+
+function formatMinutes(minutes: number): string {
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  if (!hours) return `${rest} min`;
+  return rest ? `${hours} hr ${rest} min` : `${hours} hr`;
+}
+
+function headingTopGap(fontSize: number) {
+  return Math.round(fontSize * 0.7);
+}
+
+function renderHeader(recipe: Recipe, fontSize: number, compact: boolean): ReactElement {
+  const meta = [
+    recipe.prepTime ? `Prep ${formatMinutes(recipe.prepTime)}` : null,
+    recipe.cookTime ? `Cook ${formatMinutes(recipe.cookTime)}` : null,
+    recipe.servings ? `Serves ${recipe.servings}` : null,
+  ].filter((part): part is string => part !== null);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', width: INNER_WIDTH }}>
+      <div
+        style={{
+          display: 'flex',
+          fontFamily: 'Lora',
+          fontWeight: 700,
+          fontSize: Math.round(fontSize * (compact ? 1.3 : 2)),
+          lineHeight: 1.12,
+          color: COLORS.ink,
+        }}
+      >
+        {recipe.title}
+      </div>
+      {!compact && meta.length > 0 && (
+        <div style={{ display: 'flex', marginTop: Math.round(fontSize * 0.35), fontSize: Math.round(fontSize * 0.82), fontWeight: 600, color: COLORS.muted }}>
+          {meta.map((part, i) => (
+            <div key={part} style={{ display: 'flex' }}>
+              {i > 0 && <div style={{ display: 'flex', margin: `0 ${Math.round(fontSize * 0.5)}px` }}>·</div>}
+              {part}
+            </div>
+          ))}
+        </div>
+      )}
+      <div
+        style={{
+          display: 'flex',
+          height: 4,
+          backgroundColor: COLORS.accent,
+          marginTop: Math.round(fontSize * 0.55),
+          marginBottom: Math.round(fontSize * 0.8),
+        }}
+      />
+    </div>
+  );
+}
+
+function renderLabel(section: CardSection, fontSize: number, visible: boolean, key?: string): ReactElement {
+  return (
+    <div
+      key={key}
+      style={{
+        display: 'flex',
+        fontSize: Math.round(fontSize * 0.66),
+        fontWeight: 700,
+        letterSpacing: Math.round(fontSize * 0.12),
+        textTransform: 'uppercase',
+        color: visible ? COLORS.accent : 'transparent',
+        paddingBottom: Math.round(fontSize * 0.45),
+      }}
+    >
+      {SECTION_LABELS[section.name]}
+    </div>
+  );
+}
+
+function renderBlock(block: Block, fontSize: number, firstInColumn: boolean, key: string): ReactElement {
+  if (block.kind === 'heading') {
+    return (
+      <div
+        key={key}
+        style={{
+          display: 'flex',
+          paddingTop: firstInColumn ? 0 : headingTopGap(fontSize),
+          paddingBottom: Math.round(fontSize * 0.22),
+          fontWeight: 700,
+          color: COLORS.ink,
+        }}
+      >
+        {block.text}
+      </div>
+    );
+  }
+  if (block.kind === 'text') {
+    return (
+      <div key={key} style={{ display: 'flex', paddingBottom: Math.round(fontSize * 0.4) }}>
+        {block.text}
+      </div>
+    );
+  }
+  return (
+    <div
+      key={key}
+      style={{
+        display: 'flex',
+        paddingBottom: Math.round(fontSize * 0.3),
+        paddingLeft: Math.round(block.depth * fontSize * 1.3),
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexShrink: 0,
+          width: Math.round(fontSize * (block.ordered ? 1.75 : 0.95)),
+          fontWeight: block.ordered ? 700 : 400,
+          color: block.ordered ? COLORS.accent : COLORS.muted,
+        }}
+      >
+        {block.marker}
+      </div>
+      <div style={{ display: 'flex', flex: 1, minWidth: 0 }}>{block.text}</div>
+    </div>
+  );
+}
+
+function textStyle(fontSize: number) {
+  return { fontFamily: 'Inter', fontSize, lineHeight: LINE_HEIGHT, color: COLORS.ink };
+}
+
+async function measureHeaderHeight(recipe: Recipe, fontSize: number, compact: boolean): Promise<number> {
+  const svg = await satori(
+    <div style={{ display: 'flex', ...textStyle(fontSize) }}>{renderHeader(recipe, fontSize, compact)}</div>,
+    { width: INNER_WIDTH, fonts: getFonts() }
+  );
+  return Number(svg.match(/height="([\d.]+)"/)![1]);
+}
+
+interface ColumnMeasurement {
+  label: number;
+  blocks: number[];
+}
+
+// Renders a section as one unconstrained column to get each block's height at this width
+async function measureSection(section: CardSection, width: number, fontSize: number): Promise<ColumnMeasurement> {
+  const heights = new Map<string, number>();
+  await satori(
+    <div style={{ display: 'flex', flexDirection: 'column', width, ...textStyle(fontSize) }}>
+      {renderLabel(section, fontSize, true, 'label')}
+      {section.blocks.map((block, i) => renderBlock(block, fontSize, false, `block-${i}`))}
+    </div>,
+    {
+      width,
+      fonts: getFonts(),
+      onNodeDetected: (node) => {
+        if (typeof node.key === 'string') heights.set(node.key, node.height);
+      },
+    }
+  );
+  return {
+    label: heights.get('label')!,
+    blocks: section.blocks.map((_, i) => heights.get(`block-${i}`)!),
+  };
+}
+
+// Splits blocks into `count` columns no taller than `available`, balancing their heights
+// and never leaving a heading at the bottom of a column. Returns null if it can't fit.
+function flowIntoColumns(
+  blocks: Block[],
+  measurement: ColumnMeasurement,
+  count: 1 | 2,
+  available: number,
+  fontSize: number
+): Block[][] | null {
+  const columnHeight = (start: number, end: number) => {
+    if (start === end) return measurement.label;
+    let height = measurement.label;
+    for (let i = start; i < end; i++) height += measurement.blocks[i];
+    if (blocks[start].kind === 'heading') height -= headingTopGap(fontSize);
+    return height;
+  };
+
+  if (count === 1) {
+    return columnHeight(0, blocks.length) <= available ? [blocks] : null;
+  }
+
+  let best: { split: number; tallest: number } | null = null;
+  for (let split = 1; split <= blocks.length; split++) {
+    if (split < blocks.length && blocks[split - 1].kind === 'heading') continue;
+    const tallest = Math.max(columnHeight(0, split), columnHeight(split, blocks.length));
+    if (tallest <= available && (!best || tallest < best.tallest)) {
+      best = { split, tallest };
+    }
+  }
+  return best ? [blocks.slice(0, best.split), blocks.slice(best.split)] : null;
+}
+
+async function computeLayout(recipe: Recipe): Promise<CardLayout | null> {
+  const content = getRecipeContent(recipe);
+  if (!content.card) return null;
+
+  const sections: CardSection[] = (['ingredients', 'instructions'] as const)
+    .map((name) => {
+      const tree = content.card?.[name] ?? content.sections[name];
+      return tree ? { name, blocks: toBlocks(tree) } : null;
+    })
+    .filter((s): s is CardSection => s !== null && s.blocks.length > 0);
+
+  const measurements = new Map<string, ColumnMeasurement>();
+  const measure = async (section: CardSection, width: number, fontSize: number) => {
+    const key = `${section.name}:${width}:${fontSize}`;
+    if (!measurements.has(key)) measurements.set(key, await measureSection(section, width, fontSize));
+    return measurements.get(key)!;
+  };
+
+  // Tries to place each [section, columnCount, columnWidth] side by side on one face
+  const tryFace = async (
+    name: FaceName,
+    compactHeader: boolean,
+    fontSize: number,
+    placements: Array<[CardSection, 1 | 2, number]>
+  ): Promise<CardFace | null> => {
+    const headerHeight = await measureHeaderHeight(recipe, fontSize, compactHeader);
+    const available = CARD_HEIGHT - 2 * PADDING - headerHeight - FOOTER_HEIGHT - FOOTER_GAP;
+    const regions: Region[] = [];
+    for (const [section, count, columnWidth] of placements) {
+      const columns = flowIntoColumns(section.blocks, await measure(section, columnWidth, fontSize), count, available, fontSize);
+      if (!columns) return null;
+      regions.push({ section, columnWidth, columns });
+    }
+    return { name, compactHeader, regions };
+  };
+
+  const half = Math.floor((INNER_WIDTH - GUTTER) / 2);
+  const third = Math.floor((INNER_WIDTH - 2 * GUTTER) / 3);
+  const [first, second] = sections;
+
+  for (const fontSize of SINGLE_SIDED_SIZES) {
+    const candidates: Array<Array<[CardSection, 1 | 2, number]>> = second
+      ? [
+          // Narrow ingredients beside wide instructions, then one ingredients column beside two instruction columns
+          [[first, 1, Math.floor((INNER_WIDTH - GUTTER) * 0.37)], [second, 1, Math.ceil((INNER_WIDTH - GUTTER) * 0.63)]],
+          [[first, 1, third], [second, 2, third]],
+        ]
+      : [[[first, 2, half]]];
+    for (const placements of candidates) {
+      const face = await tryFace('card', false, fontSize, placements);
+      if (face) return { fontSize, faces: [face] };
+    }
+  }
+
+  if (second) {
+    for (const fontSize of DOUBLE_SIDED_SIZES) {
+      const front = await tryFace('front', false, fontSize, [[first, 2, half]]);
+      const back = front && await tryFace('back', true, fontSize, [[second, 2, half]]);
+      if (front && back) return { fontSize, faces: [front, back] };
+    }
+  }
+
+  throw new Error(
+    `${path.relative(process.cwd(), recipe.filePath)}: the recipe card doesn't fit on a 5×7 card, even front and back ` +
+    `at the smallest text size. Write a shorter version for the card with ::::card.`
+  );
+}
+
+const layoutCache = new Map<string, Promise<CardLayout | null>>();
+
+function getLayout(recipe: Recipe): Promise<CardLayout | null> {
+  if (!layoutCache.has(recipe.filePath)) layoutCache.set(recipe.filePath, computeLayout(recipe));
+  return layoutCache.get(recipe.filePath)!;
+}
+
+const FACE_LABELS: Record<FaceName, string> = { card: 'Card', front: 'Front', back: 'Back' };
+
+// The card's image files, or null if the recipe doesn't opt in with ::card
+export async function getRecipeCardImages(recipe: Recipe): Promise<RecipeCardImage[] | null> {
+  const layout = await getLayout(recipe);
+  if (!layout) return null;
+  return layout.faces.map((face) => ({
+    label: FACE_LABELS[face.name],
+    fileName: `${face.name}.png`,
+    url: recipeCardImageUrl(recipe, `${face.name}.png`),
+    downloadName: `${recipe.slug}-recipe-card${face.name === 'card' ? '' : `-${face.name}`}.png`,
+  }));
+}
+
+function renderFace(recipe: Recipe, layout: CardLayout, face: CardFace): ReactElement {
+  const { fontSize } = layout;
+  const pageUrl = `${SITE_URL}/recipes/${recipe.category}/${recipe.slug}`.replace(/^https?:\/\//, '');
+  let columnIndex = 0;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: CARD_WIDTH,
+        height: CARD_HEIGHT,
+        padding: PADDING,
+        backgroundColor: COLORS.background,
+        ...textStyle(fontSize),
+      }}
+    >
+      {renderHeader(recipe, fontSize, face.compactHeader)}
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        {face.regions.flatMap((region) =>
+          region.columns.map((blocks, i) => (
+            <div
+              key={`column-${columnIndex}`}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: region.columnWidth,
+                marginLeft: columnIndex++ === 0 ? 0 : GUTTER,
+              }}
+            >
+              {renderLabel(region.section, fontSize, i === 0)}
+              {blocks.map((block, j) => renderBlock(block, fontSize, j === 0, `block-${j}`))}
+            </div>
+          ))
+        )}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginTop: 'auto',
+          height: FOOTER_HEIGHT,
+          fontSize: FOOTER_FONT_SIZE,
+          lineHeight: 1.3,
+          color: COLORS.muted,
+        }}
+      >
+        <div style={{ display: 'flex' }}>{pageUrl}</div>
+        <div style={{ display: 'flex' }}>{face.name === 'card' ? SITE_NAME : `${SITE_NAME}  ·  ${FACE_LABELS[face.name]}`}</div>
+      </div>
+    </div>
+  );
+}
+
+export async function renderRecipeCardImage(recipe: Recipe, fileName: string): Promise<Buffer | undefined> {
+  const layout = await getLayout(recipe);
+  const face = layout?.faces.find((f) => `${f.name}.png` === fileName);
+  if (!layout || !face) return undefined;
+
+  const svg = await satori(renderFace(recipe, layout, face), {
+    width: CARD_WIDTH,
+    height: CARD_HEIGHT,
+    fonts: getFonts(),
+  });
+  return sharp(Buffer.from(svg)).png().withMetadata({ density: CARD_DPI }).toBuffer();
+}
diff --git a/lib/recipe-content.ts b/lib/recipe-content.ts
new file mode 100644
index 0000000..5815fbc
--- /dev/null
+++ b/lib/recipe-content.ts
@@ -0,0 +1,159 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkDirective from 'remark-directive';
+import type { Image, Paragraph, Parent, Root, RootContent } from 'mdast';
+import type { ContainerDirective } from 'mdast-util-directive';
+import type { ElementContent } from 'hast';
+
+// Section directives, in tab order
+export const SECTION_NAMES = ['photos', 'ingredients', 'instructions', 'notes', 'references'] as const;
+export type SectionName = (typeof SECTION_NAMES)[number];
+
+// Sections a custom ::::card can override
+const CARD_SECTION_NAMES = ['ingredients', 'instructions'] as const;
+export type CardSectionName = (typeof CARD_SECTION_NAMES)[number];
+
+export interface RecipeContent {
+  intro: Root;
+  sections: Partial<Record<SectionName, Root>>;
+  // null unless the recipe opts in with ::card or ::::card
+  card: Partial<Record<CardSectionName, Root>> | null;
+  outro: Root;
+}
+
+export class RecipeFormatError extends Error {
+  constructor(filePath: string, node: { position?: { start: { line: number } } } | undefined, message: string) {
+    super(`${filePath}:${node?.position?.start.line ?? '?'}: ${message}`);
+    this.name = 'RecipeFormatError';
+  }
+}
+
+const processor = unified().use(remarkParse).use(remarkGfm).use(remarkDirective);
+
+function isSectionName(name: string): name is SectionName {
+  return (SECTION_NAMES as readonly string[]).includes(name);
+}
+
+function isCardSectionName(name: string): name is CardSectionName {
+  return (CARD_SECTION_NAMES as readonly string[]).includes(name);
+}
+
+function root(children: RootContent[]): Root {
+  return { type: 'root', children };
+}
+
+// Walks every parent node depth-first, letting the callback replace children
+function transformChildren(node: Parent, fn: (child: RootContent, parent: Parent) => RootContent[] | undefined) {
+  node.children = node.children.flatMap((child) => {
+    const replacement = fn(child as RootContent, node);
+    const result = replacement ?? [child as RootContent];
+    for (const r of result) {
+      if ('children' in r) transformChildren(r as Parent, fn);
+    }
+    return result;
+  }) as Parent['children'];
+}
+
+// No text directives are defined yet, so `:name` in prose (e.g. "Tip:Use") stays literal
+function restoreTextDirectives(tree: Root, source: string) {
+  transformChildren(tree, (child) => {
+    if (child.type !== 'textDirective') return undefined;
+    const start = child.position?.start.offset;
+    const end = child.position?.end.offset;
+    const value = start !== undefined && end !== undefined ? source.slice(start, end) : `:${child.name}`;
+    return [{ type: 'text', value }];
+  });
+}
+
+// A paragraph holding only images becomes one <figure> per image, captioned by the image title:
+// ![Alt text](./assets/photo.jpg "Caption")
+function imageParagraphsToFigures(tree: Root) {
+  transformChildren(tree, (child) => {
+    if (child.type !== 'paragraph') return undefined;
+    const images = child.children.filter((c): c is Image => c.type === 'image');
+    const onlyImages = images.length > 0 && child.children.every(
+      (c) => c.type === 'image' || c.type === 'break' || (c.type === 'text' && !c.value.trim())
+    );
+    if (!onlyImages) return undefined;
+
+    return images.map((image): Paragraph => {
+      const hChildren: ElementContent[] = [
+        { type: 'element', tagName: 'img', properties: { src: image.url, alt: image.alt ?? '' }, children: [] },
+      ];
+      if (image.title) {
+        hChildren.push({ type: 'element', tagName: 'figcaption', properties: {}, children: [{ type: 'text', value: image.title }] });
+      }
+      return { type: 'paragraph', children: [], data: { hName: 'figure', hChildren }, position: image.position };
+    });
+  });
+}
+
+function parseCardContainer(node: ContainerDirective, filePath: string): Partial<Record<CardSectionName, Root>> {
+  const card: Partial<Record<CardSectionName, Root>> = {};
+  for (const child of node.children) {
+    if (child.type === 'containerDirective' && isCardSectionName(child.name)) {
+      if (card[child.name]) {
+        throw new RecipeFormatError(filePath, child, `::::card has more than one :::${child.name}`);
+      }
+      card[child.name] = root(child.children as RootContent[]);
+    } else {
+      throw new RecipeFormatError(
+        filePath,
+        child,
+        `::::card may only contain :::ingredients and :::instructions blocks (the outer fence needs four colons)`
+      );
+    }
+  }
+  return card;
+}
+
+export function parseRecipeContent(source: string, filePath: string): RecipeContent {
+  const tree = processor.runSync(processor.parse(source)) as Root;
+  restoreTextDirectives(tree, source);
+  imageParagraphsToFigures(tree);
+
+  const content: RecipeContent = { intro: root([]), sections: {}, card: null, outro: root([]) };
+  let cardNode: RootContent | undefined;
+  let seenSection = false;
+  let trailing: RootContent[] = [];
+
+  for (const node of tree.children) {
+    if (node.type === 'containerDirective' && isSectionName(node.name)) {
+      if (trailing.length > 0) {
+        throw new RecipeFormatError(filePath, trailing[0], 'Content between sections must go inside a section');
+      }
+      if (content.sections[node.name]) {
+        throw new RecipeFormatError(filePath, node, `Duplicate :::${node.name} section`);
+      }
+      if (node.children.length > 0) {
+        content.sections[node.name] = root(node.children as RootContent[]);
+      }
+      seenSection = true;
+      trailing = [];
+    } else if ((node.type === 'leafDirective' || node.type === 'containerDirective') && node.name === 'card') {
+      if (content.card) {
+        throw new RecipeFormatError(filePath, node, 'A recipe can only have one ::card');
+      }
+      content.card = node.type === 'containerDirective' ? parseCardContainer(node, filePath) : {};
+      cardNode = node;
+    } else if (node.type === 'leafDirective' || node.type === 'containerDirective') {
+      const hint = node.type === 'leafDirective' && isSectionName(node.name)
+        ? ` Sections need the container form: :::${node.name} … :::`
+        : ` Known directives: ${SECTION_NAMES.map((n) => `:::${n}`).join(', ')}, ::card`;
+      throw new RecipeFormatError(filePath, node, `Unknown directive "${node.name}".${hint}`);
+    } else if (seenSection) {
+      trailing.push(node);
+    } else {
+      content.intro.children.push(node);
+    }
+  }
+  content.outro.children = trailing;
+
+  if (content.card && !content.card.ingredients && !content.card.instructions &&
+      !content.sections.ingredients && !content.sections.instructions) {
+    throw new RecipeFormatError(filePath, cardNode, '::card needs an :::ingredients or :::instructions section');
+  }
+
+  return content;
+}
diff --git a/lib/recipe-urls.ts b/lib/recipe-urls.ts
new file mode 100644
index 0000000..277cf3b
--- /dev/null
+++ b/lib/recipe-urls.ts
@@ -0,0 +1,17 @@
+// Client-safe URL helpers (no fs imports)
+
+interface RecipeLocation {
+  category: string;
+  slug: string;
+}
+
+// Rewrites a recipe-relative path like "./assets/hero.jpg" to its served URL
+export function resolveRecipeAssetUrl(recipe: RecipeLocation, src: string): string {
+  if (!src.startsWith('./')) return src;
+  return `/recipes/${recipe.category}/${recipe.slug}/${src.slice(2)}`;
+}
+
+// Generated recipe card image, e.g. "card.png" or "front.png"
+export function recipeCardImageUrl(recipe: RecipeLocation, fileName: string): string {
+  return `/recipes/${recipe.category}/${recipe.slug}/card/${fileName}`;
+}
diff --git a/lib/recipes.ts b/lib/recipes.ts
index 01e6ad8..2410b62 100644
--- a/lib/recipes.ts
+++ b/lib/recipes.ts
@@ -1,11 +1,13 @@
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
+import { parseRecipeContent, type RecipeContent } from './recipe-content';
 
-const recipesDirectory = path.join(process.cwd(), 'public/recipes');
+const recipesDirectory = path.join(process.cwd(), 'recipes');
 
 // Cache to avoid repeated file system walks
 let recipesCache: Recipe[] | null = null;
+const contentCache = new Map<string, RecipeContent>();
 
 export interface RecipeMetadata {
   title: string;
@@ -30,7 +32,7 @@ export interface Recipe extends RecipeMetadata {
   content: string;
 }
 
-function findMDXFiles(dir: string, fileList: string[] = []): string[] {
+function findRecipeFiles(dir: string, fileList: string[] = []): string[] {
   const files = fs.readdirSync(dir);
 
   files.forEach((file) => {
@@ -38,8 +40,8 @@ function findMDXFiles(dir: string, fileList: string[] = []): string[] {
     const stat = fs.statSync(filePath);
 
     if (stat.isDirectory()) {
-      findMDXFiles(filePath, fileList);
-    } else if (file.endsWith('.mdx')) {
+      findRecipeFiles(filePath, fileList);
+    } else if (file.endsWith('.md') && file.toLowerCase() !== 'readme.md') {
       fileList.push(filePath);
     }
   });
@@ -52,9 +54,7 @@ function getOrPopulateRecipes(): Recipe[] {
     return recipesCache;
   }
 
-  const mdxFiles = findMDXFiles(recipesDirectory);
-
-  const recipes = mdxFiles
+  const recipes = findRecipeFiles(recipesDirectory)
     .map((filePath) => {
       const fileContents = fs.readFileSync(filePath, 'utf8');
       const { data, content } = matter(fileContents);
@@ -77,6 +77,16 @@ function getOrPopulateRecipes(): Recipe[] {
   return sortedRecipes;
 }
 
+// Parsed section structure of a recipe's markdown body; throws RecipeFormatError on bad syntax
+export function getRecipeContent(recipe: Recipe): RecipeContent {
+  let content = contentCache.get(recipe.filePath);
+  if (!content) {
+    content = parseRecipeContent(recipe.content, path.relative(process.cwd(), recipe.filePath));
+    contentCache.set(recipe.filePath, content);
+  }
+  return content;
+}
+
 export function getAllRecipes(): Recipe[] {
   return getOrPopulateRecipes();
 }
@@ -87,10 +97,15 @@ export function getAllCategories(): string[] {
   return Array.from(categories).sort();
 }
 
+// Tags ordered by how many recipes use them, then alphabetically
 export function getAllTags(): string[] {
   const allRecipes = getOrPopulateRecipes();
-  const tags = new Set(allRecipes.flatMap((recipe) => recipe.tags));
-  return Array.from(tags).sort();
+  const counts = new Map<string, number>();
+  for (const tag of allRecipes.flatMap((recipe) => recipe.tags)) {
+    counts.set(tag, (counts.get(tag) ?? 0) + 1);
+  }
+  // Most-used first, so collapsed tag lists show the most useful tags
+  return Array.from(counts.keys()).sort((a, b) => counts.get(b)! - counts.get(a)! || a.localeCompare(b));
 }
 
 export function getRecipeByCategoryAndSlug(category: string, slug: string): Recipe | undefined {
@@ -105,3 +120,56 @@ export function getAllRecipePaths(): Array<{ category: string; slug: string }> {
     slug: recipe.slug,
   }));
 }
+
+const ASSET_CONTENT_TYPES: Record<string, string> = {
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+};
+
+function findAssetFiles(dir: string, fileList: string[] = []): string[] {
+  if (!fs.existsSync(dir)) return fileList;
+  for (const file of fs.readdirSync(dir)) {
+    const filePath = path.join(dir, file);
+    if (fs.statSync(filePath).isDirectory()) {
+      findAssetFiles(filePath, fileList);
+    } else if (path.extname(file).toLowerCase() in ASSET_CONTENT_TYPES) {
+      fileList.push(filePath);
+    }
+  }
+  return fileList;
+}
+
+// Every servable file under each recipe's assets/ folder, as route params
+export function getAllRecipeAssetPaths(): Array<{ category: string; slug: string; file: string[] }> {
+  return getOrPopulateRecipes().flatMap((recipe) => {
+    const assetsDir = path.join(recipesDirectory, recipe.folderPath, 'assets');
+    return findAssetFiles(assetsDir).map((filePath) => ({
+      category: recipe.category,
+      slug: recipe.slug,
+      file: path.relative(assetsDir, filePath).split(path.sep),
+    }));
+  });
+}
+
+export function readRecipeAsset(
+  category: string,
+  slug: string,
+  file: string[]
+): { data: Buffer; contentType: string } | undefined {
+  const recipe = getRecipeByCategoryAndSlug(category, slug);
+  if (!recipe) return undefined;
+
+  const assetsDir = path.join(recipesDirectory, recipe.folderPath, 'assets');
+  const filePath = path.resolve(assetsDir, ...file);
+  const contentType = ASSET_CONTENT_TYPES[path.extname(filePath).toLowerCase()];
+  if (!filePath.startsWith(assetsDir + path.sep) || !contentType || !fs.existsSync(filePath)) {
+    return undefined;
+  }
+
+  return { data: fs.readFileSync(filePath), contentType };
+}
diff --git a/lib/site.ts b/lib/site.ts
new file mode 100644
index 0000000..e1c0d11
--- /dev/null
+++ b/lib/site.ts
@@ -0,0 +1,2 @@
+export const SITE_NAME = 'PWS Recipes';
+export const SITE_URL = 'https://recipes.whitney.rip';
diff --git a/lib/types.ts b/lib/types.ts
index 5e893ec..967b607 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -3,3 +3,9 @@ export interface FilterState {
   category: string;
   selectedTags: string[];
 }
+
+// Result counts per facet value, given the other active filters
+export interface FacetCounts {
+  categories: Record<string, number>;
+  tags: Record<string, number>;
+}
diff --git a/next.config.ts b/next.config.ts
index 4b8572d..8ed3e70 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,6 +3,8 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   output: 'standalone',
   reactStrictMode: true,
+  // satori loads its layout engine as WebAssembly, which shouldn't go through the bundler
+  serverExternalPackages: ['satori'],
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index b5fbcbe..455b02f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,26 @@
       "name": "cooking",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource/inter": "^5.3.0",
+        "@fontsource/lora": "^5.3.0",
         "@tailwindcss/typography": "^0.5.19",
         "gray-matter": "^4.0.3",
+        "hast-util-to-jsx-runtime": "^2.3.6",
+        "mdast-util-to-hast": "^13.2.1",
+        "mdast-util-to-string": "^4.0.0",
         "next": "^15.1.6",
-        "next-mdx-remote": "^6.0.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "remark-gfm": "^4.0.1"
+        "remark-directive": "^4.0.0",
+        "remark-gfm": "^4.0.1",
+        "remark-parse": "^11.0.0",
+        "satori": "^0.33.4",
+        "sharp": "^0.34.5",
+        "unified": "^11.0.5"
       },
       "devDependencies": {
+        "@types/hast": "^3.0.5",
+        "@types/mdast": "^4.0.4",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -40,29 +51,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -159,6 +147,24 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/lora": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/lora/-/lora-5.3.0.tgz",
+      "integrity": "sha512-OK1g1z01rHVPqO5aw/FOIoDqc46KKYZdgL3NOLkxLWDk6QhDHhdr/h2BV1cke6gTvR1tzpDfdKyUkGsC+sQLeQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -202,7 +208,6 @@
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
       "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=18"
       }
@@ -698,60 +703,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mdx-js/mdx": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.1.tgz",
-      "integrity": "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/estree-jsx": "^1.0.0",
-        "@types/hast": "^3.0.0",
-        "@types/mdx": "^2.0.0",
-        "acorn": "^8.0.0",
-        "collapse-white-space": "^2.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "estree-util-scope": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "hast-util-to-jsx-runtime": "^2.0.0",
-        "markdown-extensions": "^2.0.0",
-        "recma-build-jsx": "^1.0.0",
-        "recma-jsx": "^1.0.0",
-        "recma-stringify": "^1.0.0",
-        "rehype-recma": "^1.0.0",
-        "remark-mdx": "^3.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.0.0",
-        "source-map": "^0.7.0",
-        "unified": "^11.0.0",
-        "unist-util-position-from-estree": "^2.0.0",
-        "unist-util-stringify-position": "^4.0.0",
-        "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/@mdx-js/react": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
-      "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/mdx": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16",
-        "react": ">=16"
-      }
-    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -968,6 +919,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@shuding/opentype.js": {
+      "version": "1.4.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
+      "integrity": "sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==",
+      "license": "MIT",
+      "dependencies": {
+        "fflate": "^0.7.3",
+        "string.prototype.codepointat": "^0.2.1"
+      },
+      "bin": {
+        "ot": "bin/ot"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1038,9 +1005,9 @@
       }
     },
     "node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz",
+      "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -1062,12 +1029,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/mdx": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
-      "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==",
-      "license": "MIT"
-    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -1088,6 +1049,7 @@
       "version": "19.2.13",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.13.tgz",
       "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1657,6 +1619,7 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -1669,6 +1632,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -1926,15 +1890,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/astring": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
-      "integrity": "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==",
-      "license": "MIT",
-      "bin": {
-        "astring": "bin/astring"
-      }
-    },
     "node_modules/async-function": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
@@ -2035,6 +1990,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.19",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
@@ -2183,6 +2147,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001769",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz",
@@ -2312,16 +2285,6 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
-    "node_modules/collapse-white-space": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
-      "integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2339,7 +2302,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/comma-separated-tokens": {
@@ -2383,6 +2345,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-background-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/css-background-parser/-/css-background-parser-0.1.0.tgz",
+      "integrity": "sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==",
+      "license": "MIT"
+    },
+    "node_modules/css-box-shadow": {
+      "version": "1.0.0-3",
+      "resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
+      "integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==",
+      "license": "MIT"
+    },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-gradient-parser": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/css-gradient-parser/-/css-gradient-parser-0.0.17.tgz",
+      "integrity": "sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2399,6 +2402,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -2549,7 +2553,6 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2621,6 +2624,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-2.0.1.tgz",
+      "integrity": "sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -2798,38 +2810,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/esast-util-from-estree": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/esast-util-from-estree/-/esast-util-from-estree-2.0.0.tgz",
-      "integrity": "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree-jsx": "^1.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-visit": "^2.0.0",
-        "unist-util-position-from-estree": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/esast-util-from-js": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/esast-util-from-js/-/esast-util-from-js-2.0.1.tgz",
-      "integrity": "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree-jsx": "^1.0.0",
-        "acorn": "^8.0.0",
-        "esast-util-from-estree": "^2.0.0",
-        "vfile-message": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2840,6 +2820,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3304,35 +3290,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estree-util-attach-comments": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz",
-      "integrity": "sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/estree-util-build-jsx": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz",
-      "integrity": "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree-jsx": "^1.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "estree-walker": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/estree-util-is-identifier-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
@@ -3343,58 +3300,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/estree-util-scope": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/estree-util-scope/-/estree-util-scope-1.0.0.tgz",
-      "integrity": "sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "devlop": "^1.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/estree-util-to-js": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-2.0.0.tgz",
-      "integrity": "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree-jsx": "^1.0.0",
-        "astring": "^1.8.0",
-        "source-map": "^0.7.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/estree-util-visit": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
-      "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree-jsx": "^1.0.0",
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3483,6 +3388,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.3.tgz",
+      "integrity": "sha512-0Zz1jOzJWERhyhsimS54VTqOteCNwRtIlh8isdL0AXLo0g7xNTfTL7oWrkmCnPhZGocKIkWHBistBrrpoNH3aw==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3842,6 +3753,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/harfbuzzjs": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/harfbuzzjs/-/harfbuzzjs-0.10.0.tgz",
+      "integrity": "sha512-SN8LVwCOzvTq3OPNd0+EAghgXugItz56wst567D1vs7LnnKGWprhi3EG58aVOBwhN8HEbQxL4I9NDWkcXUutRw==",
+      "license": "MIT"
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -3935,34 +3852,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hast-util-to-estree": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
-      "integrity": "sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/estree-jsx": "^1.0.0",
-        "@types/hast": "^3.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-attach-comments": "^3.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "hast-util-whitespace": "^3.0.0",
-        "mdast-util-mdx-expression": "^2.0.0",
-        "mdast-util-mdx-jsx": "^3.0.0",
-        "mdast-util-mdxjs-esm": "^2.0.0",
-        "property-information": "^7.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "style-to-js": "^1.0.0",
-        "unist-util-position": "^5.0.0",
-        "zwitch": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -4003,6 +3892,18 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hex-rgb": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
+      "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4610,6 +4511,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4740,6 +4642,16 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -4792,18 +4704,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/markdown-extensions": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
-      "integrity": "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -4824,6 +4724,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-directive": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-3.1.0.tgz",
+      "integrity": "sha512-I3fNFt+DHmpWCYAT7quoM6lHf9wuqtI+oCOfvILnoicNIqjh5E3dEJWiXuYME2gNe8vl1iMQwyUHa7bgFmak6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-find-and-replace": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
@@ -4977,23 +4898,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdx": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
-      "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
-      "license": "MIT",
-      "dependencies": {
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-mdx-expression": "^2.0.0",
-        "mdast-util-mdx-jsx": "^3.0.0",
-        "mdast-util-mdxjs-esm": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -5201,6 +5105,25 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-directive": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz",
+      "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-extension-gfm": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
@@ -5322,108 +5245,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/micromark-extension-mdx-expression": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.1.tgz",
-      "integrity": "sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "devlop": "^1.0.0",
-        "micromark-factory-mdx-expression": "^2.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-events-to-acorn": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-extension-mdx-jsx": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.2.tgz",
-      "integrity": "sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "micromark-factory-mdx-expression": "^2.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-events-to-acorn": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0",
-        "vfile-message": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-mdx-md": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
-      "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-mdxjs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
-      "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.0.0",
-        "acorn-jsx": "^5.0.0",
-        "micromark-extension-mdx-expression": "^3.0.0",
-        "micromark-extension-mdx-jsx": "^3.0.0",
-        "micromark-extension-mdx-md": "^2.0.0",
-        "micromark-extension-mdxjs-esm": "^3.0.0",
-        "micromark-util-combine-extensions": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-mdxjs-esm": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
-      "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "devlop": "^1.0.0",
-        "micromark-core-commonmark": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-events-to-acorn": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0",
-        "unist-util-position-from-estree": "^2.0.0",
-        "vfile-message": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -5467,33 +5288,6 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/micromark-factory-mdx-expression": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.3.tgz",
-      "integrity": "sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "devlop": "^1.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-events-to-acorn": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0",
-        "unist-util-position-from-estree": "^2.0.0",
-        "vfile-message": "^4.0.0"
-      }
-    },
     "node_modules/micromark-factory-space": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
@@ -5695,31 +5489,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/micromark-util-events-to-acorn": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.3.tgz",
-      "integrity": "sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/unist": "^3.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-visit": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0",
-        "vfile-message": "^4.0.0"
-      }
-    },
     "node_modules/micromark-util-html-tag-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
@@ -5995,28 +5764,6 @@
         }
       }
     },
-    "node_modules/next-mdx-remote": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-6.0.0.tgz",
-      "integrity": "sha512-cJEpEZlgD6xGjB4jL8BnI8FaYdN9BzZM4NwadPe1YQr7pqoWjg9EBCMv3nXBkuHqMRfv2y33SzUsuyNh9LFAQQ==",
-      "license": "MPL-2.0",
-      "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@mdx-js/mdx": "^3.0.1",
-        "@mdx-js/react": "^3.0.1",
-        "unist-util-remove": "^4.0.0",
-        "unist-util-visit": "^5.1.0",
-        "vfile": "^6.0.1",
-        "vfile-matter": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=14",
-        "npm": ">=7"
-      },
-      "peerDependencies": {
-        "react": ">=16"
-      }
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -6270,6 +6017,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6283,6 +6036,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-css-color": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/parse-css-color/-/parse-css-color-0.2.1.tgz",
+      "integrity": "sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "hex-rgb": "^4.1.0"
+      }
+    },
     "node_modules/parse-entities": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
@@ -6657,73 +6420,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/recma-build-jsx": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/recma-build-jsx/-/recma-build-jsx-1.0.0.tgz",
-      "integrity": "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-util-build-jsx": "^3.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/recma-jsx": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/recma-jsx/-/recma-jsx-1.0.1.tgz",
-      "integrity": "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==",
-      "license": "MIT",
-      "dependencies": {
-        "acorn-jsx": "^5.0.0",
-        "estree-util-to-js": "^2.0.0",
-        "recma-parse": "^1.0.0",
-        "recma-stringify": "^1.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/recma-parse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/recma-parse/-/recma-parse-1.0.0.tgz",
-      "integrity": "sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "esast-util-from-js": "^2.0.0",
-        "unified": "^11.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/recma-stringify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/recma-stringify/-/recma-stringify-1.0.0.tgz",
-      "integrity": "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-util-to-js": "^2.0.0",
-        "unified": "^11.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6768,15 +6464,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/rehype-recma": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz",
-      "integrity": "sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==",
+    "node_modules/remark-directive": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-directive/-/remark-directive-4.0.0.tgz",
+      "integrity": "sha512-7sxn4RfF1o3izevPV1DheyGDD6X4c9hrGpfdUpm7uC++dqrnJxIZVkk7CoKqcLm0VUMAuOol7Mno3m6g8cfMuA==",
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/hast": "^3.0.0",
-        "hast-util-to-estree": "^3.0.0"
+        "@types/mdast": "^4.0.0",
+        "mdast-util-directive": "^3.0.0",
+        "micromark-extension-directive": "^4.0.0",
+        "unified": "^11.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -6801,20 +6498,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remark-mdx": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.1.tgz",
-      "integrity": "sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==",
-      "license": "MIT",
-      "dependencies": {
-        "mdast-util-mdx": "^3.0.0",
-        "micromark-extension-mdxjs": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -6831,23 +6514,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remark-rehype": {
-      "version": "11.1.2",
-      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
-      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/mdast": "^4.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "unified": "^11.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/remark-stringify": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
@@ -7008,6 +6674,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/satori": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/satori/-/satori-0.33.4.tgz",
+      "integrity": "sha512-dCnaW6D/tkCJxG5UvpZPWnnvfTdGTVVSAq1tzH6xC5MeOhAeeswRcSq5zT7C6lRCdTGow9PRGus7PCzdp5JJYw==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@shuding/opentype.js": "1.4.0-beta.0",
+        "css-background-parser": "^0.1.0",
+        "css-box-shadow": "1.0.0-3",
+        "css-gradient-parser": "^0.0.17",
+        "css-to-react-native": "^3.0.0",
+        "emoji-regex-xs": "^2.0.1",
+        "escape-html": "^1.0.3",
+        "fflate": "0.7.3",
+        "harfbuzzjs": "0.10.0",
+        "linebreak": "^1.1.0",
+        "parse-css-color": "^0.2.1",
+        "postcss-value-parser": "^4.2.0",
+        "yoga-layout": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -7031,7 +6721,6 @@
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
       "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "devOptional": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -7095,7 +6784,6 @@
       "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "@img/colour": "^1.0.0",
         "detect-libc": "^2.1.2",
@@ -7233,15 +6921,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -7288,6 +6967,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string.prototype.codepointat": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
+      "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -7641,6 +7326,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -7900,6 +7591,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -7945,34 +7646,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unist-util-position-from-estree": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
-      "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-remove": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-4.0.0.tgz",
-      "integrity": "sha512-b4gokeGId57UVRX/eVKej5gXqGlc9+trkORhFJpu9raqZkZhU0zm8Doi05+HaiBsMEIJowL+2WtQ5ItjsngPXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0",
-        "unist-util-visit-parents": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -8111,20 +7784,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vfile-matter": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-5.0.1.tgz",
-      "integrity": "sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw==",
-      "license": "MIT",
-      "dependencies": {
-        "vfile": "^6.0.0",
-        "yaml": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -8261,21 +7920,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
-      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -8289,6 +7933,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 95e92ed..1b63c54 100644
--- a/package.json
+++ b/package.json
@@ -9,15 +9,26 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.3.0",
+    "@fontsource/lora": "^5.3.0",
     "@tailwindcss/typography": "^0.5.19",
     "gray-matter": "^4.0.3",
+    "hast-util-to-jsx-runtime": "^2.3.6",
+    "mdast-util-to-hast": "^13.2.1",
+    "mdast-util-to-string": "^4.0.0",
     "next": "^15.1.6",
-    "next-mdx-remote": "^6.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-directive": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "satori": "^0.33.4",
+    "sharp": "^0.34.5",
+    "unified": "^11.0.5"
   },
   "devDependencies": {
+    "@types/hast": "^3.0.5",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/public/recipes/README.md b/recipes/README.md
similarity index 66%
rename from public/recipes/README.md
rename to recipes/README.md
index 72540ca..72190fa 100644
--- a/public/recipes/README.md
+++ b/recipes/README.md
@@ -5,7 +5,7 @@ This directory contains all recipe content for the cooking website.
 ## Folder Organization
 
 ```
-public/recipes/
+recipes/
 ├── appetizers/
 ├── mains/
 ├── desserts/
@@ -16,26 +16,26 @@ public/recipes/
 
 Each recipe follows this structure:
 ```
-public/recipes/category/
+recipes/category/
 └── recipe-slug/
-    ├── recipe-slug.mdx
+    ├── recipe-slug.md
     └── assets/
         ├── hero.jpg
         ├── step1.jpg
         └── ...
 ```
 
-**Note:** All recipe content (MDX files and images) lives together in `public/recipes/` for better organization and readability. This keeps everything for a recipe in one place.
+**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
 
-### MDX File Structure
+### File Structure
 
-The `.mdx` file contains all recipe metadata and content in one place.
+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 MDX file:
+All recipe metadata is stored in YAML frontmatter at the top of the file:
 
 ```yaml
 ---
@@ -76,17 +76,34 @@ displayPhoto: "./assets/hero.jpg"
 
 #### Content Sections
 
-The following `## ` (h2) sections are parsed into tabs in the UI:
+Content is plain markdown, divided into sections with directives. Each `:::name` … `:::` block becomes a tab:
 
-1. **## Photos** - Recipe images with captions
-2. **## Ingredients** - Lists of ingredients (can use h3 subsections)
-3. **## Instructions** - Step-by-step cooking instructions
-4. **## Notes** - Tips, variations, storage info (optional)
-5. **## References** - Sources, inspirations, credits (optional)
+1. **`:::photos`** - Recipe images; the image title is the caption: `![Alt](./assets/hero.jpg "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 (optional)
+5. **`:::references`** - Sources, inspirations, credits (optional)
 
-#### Example MDX Structure
+Markdown before the first section is intro prose; markdown after the last is outro prose.
 
-```mdx
+#### 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.
+
+To put a shorter version on the card, use the container form with **four** colons. Leave out a section to use the full one:
+
+```md
+::::card
+:::ingredients
+- 2 cups flour
+- 1 cup sugar
+:::
+::::
+```
+
+#### Example Recipe
+
+```md
 ---
 title: "Recipe Name"
 slug: "recipe-name"
@@ -104,59 +121,46 @@ display: true
 displayPhoto: "./assets/hero.jpg"
 ---
 
-# Recipe Name
-
 Introduction paragraph about the recipe.
 
-## Photos
+:::photos
+![Hero image](./assets/hero.jpg "Caption describing the image")
 
-![Hero image](./assets/hero.jpg)
-*Caption describing the image*
-
-![Step photo](./assets/step1.jpg)
-*Another helpful image*
-
-## Ingredients
+![Step photo](./assets/step1.jpg "Another helpful image")
+:::
 
+:::ingredients
 ### For the Main Component
 - 2 cups ingredient one
 - 1 tablespoon ingredient two
-- Salt and pepper to taste
 
 ### For the Sauce
 - 1 cup sauce base
-- Seasonings
-
-## Instructions
+:::
 
+:::instructions
 ### Preparation
 1. **Step name**: Detailed instruction with technique.
 2. **Another step**: More details here.
 
 ### Cooking
-3. **Heat and cook**: Continue with numbered steps.
-4. **Finish**: Final steps.
-
-## Notes
-
-### Tips for Success
-- Helpful tip one
-- Helpful tip two
+1. **Heat and cook**: Continue with numbered steps.
+:::
 
+:::notes
 ### Storage
 - How to store leftovers
-- Freezing instructions
-
-### Variations
-- How to adapt the recipe
-
-## References
+:::
 
+:::references
 - Source credits
-- Inspiration mentions
-- Cookbook references
+:::
+
+::card
 ```
 
+Typos in directive names (e.g. `:::ingrediants`) fail the build with the file and line number.
+
 ## Content Guidelines
 
 ### Writing Style
@@ -183,11 +187,11 @@ Choose from these categories:
 
 ## Adding New Recipes
 
-1. Create recipe folder: `public/recipes/[category]/recipe-name/`
-2. Create `recipe-name.mdx` with frontmatter and content
+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 in MDX using relative paths: `./assets/image.jpg`
+5. Reference images using relative paths: `./assets/image.jpg`
 6. Build locally to verify rendering
 7. Commit and push (everything is tracked in git)
 
diff --git a/public/recipes/african/shakshuka/assets/shakshuka.jpg b/recipes/african/shakshuka/assets/shakshuka.jpg
similarity index 100%
rename from public/recipes/african/shakshuka/assets/shakshuka.jpg
rename to recipes/african/shakshuka/assets/shakshuka.jpg
diff --git a/public/recipes/african/shakshuka/assets/shakshuka2.jpg b/recipes/african/shakshuka/assets/shakshuka2.jpg
similarity index 100%
rename from public/recipes/african/shakshuka/assets/shakshuka2.jpg
rename to recipes/african/shakshuka/assets/shakshuka2.jpg
diff --git a/public/recipes/african/shakshuka/shakshuka.mdx b/recipes/african/shakshuka/shakshuka.md
similarity index 93%
rename from public/recipes/african/shakshuka/shakshuka.mdx
rename to recipes/african/shakshuka/shakshuka.md
index e8a9a2c..5161d16 100644
--- a/public/recipes/african/shakshuka/shakshuka.mdx
+++ b/recipes/african/shakshuka/shakshuka.md
@@ -15,16 +15,13 @@ display: true
 displayPhoto: "./assets/shakshuka2.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Shakshuka](./assets/shakshuka.jpg "Shakshuka")
 
-## Photos
-![Shakshuka](./assets/shakshuka.jpg)
-*Shakshuka*
+![Shakshuka (Glamour Shot)](./assets/shakshuka2.jpg "Shakshuka (Glamour Shot)")
+:::
 
-![Shakshuka (Glamour Shot)](./assets/shakshuka2.jpg)
-*Shakshuka (Glamour Shot)*
-
-## Ingredients
+:::ingredients
 ### Sauce
 - 2 tablespoons olive oil
 - 3 medium tomatoes halved, and/or 1 tablespoon tomato paste and/or 1 can (28oz) crushed tomatoes
@@ -40,8 +37,9 @@ displayPhoto: "./assets/shakshuka2.jpg"
 - 1/2 teaspoon sugar (optional)
 - 2 oz crumbled feta cheese (optional)
 - Crusty bread or pita, for serving
+:::
 
-## Instructions
+:::instructions
 1. Heat **olive oil** in a large, deep skillet or Dutch oven over medium heat.
 2. Add the **onion** and **red bell pepper**. Cook, stirring occasionally, until softened and lightly golden, about 7–8 minutes.
 3. Halve the **tomatoes** and place them face side down in the pan. Cook, covered for 7-8 minutes until the skin on the tomatoes can be removed by tongs.
@@ -54,8 +52,9 @@ displayPhoto: "./assets/shakshuka2.jpg"
 10. Cover the skillet and cook for 8–10 minutes, or until the egg whites are just set but the yolks are still runny. Check frequently — they go from underdone to overdone quickly.
 11. Remove from heat. Scatter **feta** (if using) and **fresh herbs** over the top.
 12. Serve directly from the pan with plenty of **crusty bread or pita** for scooping.
+:::
 
-## Notes
+:::notes
 ### Egg Doneness
 - For runny yolks, cover and cook 7–8 minutes. For fully set yolks, cook 10–12 minutes. Start checking early — residual heat will continue cooking the eggs after you remove the lid.
 
@@ -66,7 +65,10 @@ displayPhoto: "./assets/shakshuka2.jpg"
 - **Green shakshuka**: swap tomatoes for tomatillos and add spinach or chard.
 - **Spicier**: add a finely chopped jalapeño or a pinch of red pepper flakes with the onion.
 - Add a can of drained chickpeas to the sauce for extra protein.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://downshiftology.com/recipes/shakshuka/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/baking/apple-pie/apple-pie.mdx b/recipes/baking/apple-pie/apple-pie.md
similarity index 95%
rename from public/recipes/baking/apple-pie/apple-pie.mdx
rename to recipes/baking/apple-pie/apple-pie.md
index 9de4122..4064d18 100644
--- a/public/recipes/baking/apple-pie/apple-pie.mdx
+++ b/recipes/baking/apple-pie/apple-pie.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Egg Wash
 - 1 large egg, beaten with 1 tablespoon milk
 ### Apple Pie
@@ -34,8 +32,9 @@ displayPhoto: ""
 - 1/4 teaspoon ground allspice
 - 1/4 teaspoon ground nutmeg
 - Coarse sugar for sprinkling on crust (optional)
+:::
 
-## Instructions
+:::instructions
 1. Prep **pie crust** if making from scratch. Keep prepared or store-bought pie crust chilled until using.
 2. Stir the **apple slices**, **sugar**, **flour**, **lemon juice**, **cinnamon**, **allspice**, and **nutmeg** together until thoroughly combined.
 3. (Optional) Pre-cook the apples by pouring into a very large skillet/dutch oven, and place over medium-low heat. Stir and cook for 5 minutes until the apples begin to soften. Remove from heat and set aside.
@@ -49,14 +48,18 @@ displayPhoto: ""
 11. Continue baking the pie until the filling is bubbling around the edges, 35–40 more minutes. The internal temperature of the filling should be around 200°F (93°C) when done.
 12. Remove pie from the oven, place on a cooling rack, and cool for at least 3 hours before slicing and serving. Filling will be too juicy if the pie is warm when you slice it.
 13. Cover and store leftover pie at room temperature for up to 1 day or in the refrigerator for up to 5 days.
+:::
 
-## Notes
+:::notes
 ### Hat on a Hat
 - A frozen pie shell stacked on top will melt into a good covering if you don't want to make a nice top for the pie.
 
 ### Golden Brown
 - Don't forget the egg wash!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://sallysbakingaddiction.com/apple-pie-recipe/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/baking/apple-pie/assets/not-found.svg b/recipes/baking/apple-pie/assets/not-found.svg
similarity index 100%
rename from public/recipes/baking/apple-pie/assets/not-found.svg
rename to recipes/baking/apple-pie/assets/not-found.svg
diff --git a/public/recipes/cajun/gumbo/assets/not-found.svg b/recipes/cajun/gumbo/assets/not-found.svg
similarity index 100%
rename from public/recipes/cajun/gumbo/assets/not-found.svg
rename to recipes/cajun/gumbo/assets/not-found.svg
diff --git a/public/recipes/cajun/gumbo/gumbo.mdx b/recipes/cajun/gumbo/gumbo.md
similarity index 95%
rename from public/recipes/cajun/gumbo/gumbo.mdx
rename to recipes/cajun/gumbo/gumbo.md
index 8ef3a3c..3dc49f6 100644
--- a/public/recipes/cajun/gumbo/gumbo.mdx
+++ b/recipes/cajun/gumbo/gumbo.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 cup all-purpose flour
 - 1 cup vegetable oil (plus 1 tablespoon)
 - 3 ribs celery, diced small
@@ -40,8 +38,9 @@ displayPhoto: ""
 - pepper
 - 1 pound large shrimp, peeled and deveined***
 - cooked white rice, sliced green onion, and hot sauce for serving
+:::
 
-## Instructions
+:::instructions
 1. In a large dutch oven, heat **vegetable oil** over low heat. Add **flour** and stir essentially constantly until the roux becomes dark brown. This can take between 30-60 mins depending on the stove.
 2. Place the dutch oven with the finished roux over medium heat and add **celery**, **onion**, and **bell pepper**. Cook for 8 to 10 minutes, stirring frequently, until the vegetables have softened and the **onions** are translucent.
 3. Add the **garlic** and **creole seasoning** and cook for about 1 minute or until the **garlic** is fragrant.
@@ -54,12 +53,16 @@ displayPhoto: ""
 Every 15 seconds or so precipitate will form in the roux, which you need to scrape off the bottom. A whisk is a pretty good tool for this.
 If bits get stuck to the bottom, they will burn and the roux will be ruined; you can confirm this by tasting it.
 The roux should be a dark brown color and have a nutty aroma.
+:::
 
-## Notes
+:::notes
 ### A Darker Roux is a Tasty Roux
 - A dark roux adds deep flavor but can burn easily. Stir constantly over low heat, judging completeness by color, smell, and taste. The ideal finished roux should be chocolate brown, with a nutty aroma and smooth taste.
 - Toward the end of cooking, every 15 seconds or so precipitate will form in the roux. Scrape this off the bottom using a spoon or whisk.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://southernbite.com/chicken-sausage-and-shrimp-gumbo/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/chinese/broccoli-beef-in-oyster-sauce/assets/not-found.svg b/recipes/chinese/broccoli-beef-in-oyster-sauce/assets/not-found.svg
similarity index 100%
rename from public/recipes/chinese/broccoli-beef-in-oyster-sauce/assets/not-found.svg
rename to recipes/chinese/broccoli-beef-in-oyster-sauce/assets/not-found.svg
diff --git a/public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx b/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.md
similarity index 92%
rename from public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx
rename to recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.md
index 2593bcd..0fe4da4 100644
--- a/public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx
+++ b/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.md
@@ -15,14 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-<RecipeCard>
-
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Marinade
 - Kosher salt and freshly ground pepper
 - 1/2 teaspoon granulated sugar
@@ -35,8 +32,9 @@ displayPhoto: ""
 ### Cornflour Slurry
 - 1 tablespoon cornflour
 - 5 tablespoons water
+:::
 
-## Instructions
+:::instructions
 1. Chop the **beef** into thin, long, bite-sized strips. Place in a bowl that can hold the beef and the rest of the marinade.
 2. Add a pinch of **salt**, **sugar**, **vegetable oil**, **sodium bicarbonate**, **corn starch**, **rice wine**, and **ginger** to the bowl with the beef.
 3. Give the marinade a good mix and leave in the fridge for at least 60 minutes.
@@ -48,14 +46,18 @@ displayPhoto: ""
 9. Add **broccoli** along with the **oyster sauce**. Stir through to coat.
 10. Turn the heat down to low.
 11. Mix the **cornflour slurry ingredients** and add it to the wok. Gradually turn the heat back to medium as you stir fry. Continue until the sauce thickens and becomes translucent.
+:::
 
-## Notes
+:::notes
 ### Substitute
 - Replace rice wine with dry sherry if not available.
 
 ### Healthy Era
 - Use more broccoli than you think you need!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.youtube.com/watch?v=fSO83XlKcPI)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/chinese/egg-flower-soup/assets/egg-flower-soup.jpg b/recipes/chinese/egg-flower-soup/assets/egg-flower-soup.jpg
similarity index 100%
rename from public/recipes/chinese/egg-flower-soup/assets/egg-flower-soup.jpg
rename to recipes/chinese/egg-flower-soup/assets/egg-flower-soup.jpg
diff --git a/public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx b/recipes/chinese/egg-flower-soup/egg-flower-soup.md
similarity index 92%
rename from public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx
rename to recipes/chinese/egg-flower-soup/egg-flower-soup.md
index 55d9d6a..8a52980 100644
--- a/public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx
+++ b/recipes/chinese/egg-flower-soup/egg-flower-soup.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/egg-flower-soup.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Egg Flower Soup](./assets/egg-flower-soup.jpg "Egg Flower Soup")
+:::
 
-## Photos
-![Egg Flower Soup](./assets/egg-flower-soup.jpg)
-*Egg Flower Soup*
-
-## Ingredients
+:::ingredients
 - 4 cups chicken stock
 - 1/2 teaspoon sesame oil
 - 3/4 teaspoon salt
@@ -34,8 +32,9 @@ displayPhoto: "./assets/egg-flower-soup.jpg"
 - 1/2 teaspoon shaoxing cooking wine (optional)
 - 1/4 teaspoon msg (optional)
 - 1/2 teaspoon turmeric (optional)
+:::
 
-## Instructions
+:::instructions
 1. Bring the **chicken stock** to a simmer in a pot.
 2. Stir in **sesame oil**, **salt**, **sugar**, **white pepper**. Adjust to taste at this point.
 3. If using, also stir in the **msg**, **cooking wine**, and **turmeric**.
@@ -46,15 +45,19 @@ displayPhoto: "./assets/egg-flower-soup.jpg"
 8. Top with **scallions** and extra **white pepper** if desired.
 Stir SLOWLY when adding in the egg for the best results. Stirring quickly yields a pretty homogenous result.
 Also give the cooking wine addition a try (thanks, mom)
+:::
 
-## Notes
+:::notes
 ### Eyeball It
 - It's pretty good regardless of the exact ratios. Also I'm a fan of excess pepper when sick.
 
 ### Ribbons
 - Stir SLOWLY when adding in the egg for the best results. Stirring quickly yields a pretty homogenous result. 
         Also give the cooking wine addition a try (thanks, mom)
+:::
 
-## References
+:::references
 - Reference Recipe [HERE](https://thewoksoflife.com/egg-drop-soup/)
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/chinese/fried-rice/assets/fried-rice.jpg b/recipes/chinese/fried-rice/assets/fried-rice.jpg
similarity index 100%
rename from public/recipes/chinese/fried-rice/assets/fried-rice.jpg
rename to recipes/chinese/fried-rice/assets/fried-rice.jpg
diff --git a/public/recipes/chinese/fried-rice/fried-rice.mdx b/recipes/chinese/fried-rice/fried-rice.md
similarity index 94%
rename from public/recipes/chinese/fried-rice/fried-rice.mdx
rename to recipes/chinese/fried-rice/fried-rice.md
index 4c6aa38..cccc586 100644
--- a/public/recipes/chinese/fried-rice/fried-rice.mdx
+++ b/recipes/chinese/fried-rice/fried-rice.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/fried-rice.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Fried Rice](./assets/fried-rice.jpg "Fried Rice")
+:::
 
-## Photos
-![Fried Rice](./assets/fried-rice.jpg)
-*Fried Rice*
-
-## Ingredients
+:::ingredients
 - 3 cups cooked long-grain white rice, day-old or cooled (about 1 cup dry)
 - 3 tablespoons neutral oil
 - 3 large eggs, beaten
@@ -32,8 +30,9 @@ displayPhoto: "./assets/fried-rice.jpg"
 - 1 tablespoon oyster sauce
 - 1 teaspoon sesame oil
 - Salt and white pepper, to taste
+:::
 
-## Instructions
+:::instructions
 1. Break up the **cold rice** with your hands or a fork so there are no large clumps.
 2. Heat a wok or large skillet over high heat until very hot. Add 1 tablespoon **oil** and swirl to coat.
 3. Add your vegetables to the wok and stir fry for 1-2 minutes until heated through. 
@@ -42,8 +41,9 @@ displayPhoto: "./assets/fried-rice.jpg"
 6. Clear a center in the middle of the rice, and put the rest of the oil in. Add your beaten **eggs** and cook them completely through.
 7. Fold the eggs in and break up any larger pieces. Drizzle with **sesame oil**, season with **salt and white pepper**, and toss once more.
 8. Garnish with the rest of the **green onions** and serve immediately.
+:::
 
-## Notes
+:::notes
 ### Day-Old Rice
 - Freshly cooked rice has too much moisture and will steam instead of fry. Spread cooked rice on a sheet pan and refrigerate uncovered overnight for best results.
 
@@ -54,7 +54,10 @@ displayPhoto: "./assets/fried-rice.jpg"
 - Add diced chicken, shrimp, or tofu in step 4 before the vegetables.
 - A splash of rice wine or Shaoxing wine added with the soy sauce adds depth.
 - Substitute frozen corn, edamame, or diced bell pepper for the peas and carrots.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.thekitchn.com/fried-rice-recipe-23652991)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/chinese/mabu-tofu/assets/mapo-tofu.jpg b/recipes/chinese/mabu-tofu/assets/mapo-tofu.jpg
similarity index 100%
rename from public/recipes/chinese/mabu-tofu/assets/mapo-tofu.jpg
rename to recipes/chinese/mabu-tofu/assets/mapo-tofu.jpg
diff --git a/public/recipes/chinese/mabu-tofu/mapo-tofu.mdx b/recipes/chinese/mabu-tofu/mapo-tofu.md
similarity index 94%
rename from public/recipes/chinese/mabu-tofu/mapo-tofu.mdx
rename to recipes/chinese/mabu-tofu/mapo-tofu.md
index 8c7731c..1a7a2df 100644
--- a/public/recipes/chinese/mabu-tofu/mapo-tofu.mdx
+++ b/recipes/chinese/mabu-tofu/mapo-tofu.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/mapo-tofu.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Mapo Tofu](./assets/mapo-tofu.jpg "Mapo Tofu")
+:::
 
-## Photos
-![Mapo Tofu](./assets/mapo-tofu.jpg)
-*Mapo Tofu*
-
-## Ingredients
+:::ingredients
 ### Chili Oil
 - 1/2 cup oil, divided
 - 1-2 fresh Thai bird chili peppers, thinly sliced
@@ -40,8 +38,9 @@ displayPhoto: "./assets/mapo-tofu.jpg"
 - 1/4 teaspoon sesame oil (optional)
 - 1/4 teaspoon sugar (optional)
 - 1 scallion, finely chopped
+:::
 
-## Instructions
+:::instructions
 ### Chili Oil
 1. Heat half the oil in a wok over low heat. Add fresh and dried chili peppers, stirring occasionally for about 5 minutes until fragrant. Do not let them burn.
 2. Remove peppers and oil and set aside.
@@ -57,13 +56,17 @@ displayPhoto: "./assets/mapo-tofu.jpg"
 8. Gently fold in **tofu cubes** and cook for 3-5 minutes.
 9. Stir in **sesame oil**, **sugar**, and **scallions**. Cook until scallions just wilt.
 10. Serve immediately over steamed rice, garnished with extra Sichuan peppercorn powder if desired.
+:::
 
-## Notes
+:::notes
 ### Ingredients
 - If using bottled pastes, consider the amount of salt coming from them and your chicken broth. If everything is salted the dish will definitely be on the saltier end.
 - Sichuan (málà) peppercorns are worth getting for this recipe if you want a true Sichuan experience.
 - I much prefer silken (soft) tofu for this recipe.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://thewoksoflife.com/ma-po-tofu-real-deal/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/chinese/tangy-runyan-eggroll/assets/tangy-runyan-eggroll.jpg b/recipes/chinese/tangy-runyan-eggroll/assets/tangy-runyan-eggroll.jpg
similarity index 100%
rename from public/recipes/chinese/tangy-runyan-eggroll/assets/tangy-runyan-eggroll.jpg
rename to recipes/chinese/tangy-runyan-eggroll/assets/tangy-runyan-eggroll.jpg
diff --git a/public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx b/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.md
similarity index 93%
rename from public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx
rename to recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.md
index 58a7676..ac2dca0 100644
--- a/public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx
+++ b/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/tangy-runyan-eggroll.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Tangy Runyan Eggroll](./assets/tangy-runyan-eggroll.jpg "Tangy Runyan Eggroll")
+:::
 
-## Photos
-![Tangy Runyan Eggroll](./assets/tangy-runyan-eggroll.jpg)
-*Tangy Runyan Eggroll*
-
-## Ingredients
+:::ingredients
 - 1 package bean thread noodles
 - 1 lb ground pork
 - 2 tbsp dark soy sauce
@@ -34,8 +32,9 @@ displayPhoto: "./assets/tangy-runyan-eggroll.jpg"
 - 1 egg (plus one extra for sealing wrappers)
 - 1 package lumpia wrappers
 - Oil for frying
+:::
 
-## Instructions
+:::instructions
 1. Soak the **bean thread noodles** in hot water until soft, then chop into small pieces.
 2. In a large mixing bowl, combine the **ground pork**, **noodles**, **soy sauce**, **green onion**, **wood ear mushroom**, **fish sauce**, **carrot**, **ginger**, **garlic**, and **egg**.
 3. Mix thoroughly until well combined.
@@ -50,8 +49,9 @@ They can be frozen on a tray (not touching) then transferred to a freezer bag fo
 To make wontons instead, use wonton wrappers and fold into triangles or nurse's caps.
 Instead of frying, boil in water or broth for 3-4 minutes until the wrapper becomes translucent.
 These make excellent additions to soup!
+:::
 
-## Notes
+:::notes
 ### Wrapper Options
 - Lumpia wrappers are thinner than traditional eggroll wrappers, but either will work. For wontons, use wonton wrappers instead.
 
@@ -64,7 +64,10 @@ These make excellent additions to soup!
 - To make wontons instead, use wonton wrappers and fold into triangles or nurse's caps. 
         Instead of frying, boil in water or broth for 3-4 minutes until the wrapper becomes translucent. 
         These make excellent additions to soup!
+:::
 
-## References
+:::references
 - Thanks to my sister for providing the recipe!
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/desserts/ice-cream/assets/ice-cream.jpg b/recipes/desserts/ice-cream/assets/ice-cream.jpg
similarity index 100%
rename from public/recipes/desserts/ice-cream/assets/ice-cream.jpg
rename to recipes/desserts/ice-cream/assets/ice-cream.jpg
diff --git a/public/recipes/desserts/ice-cream/ice-cream.mdx b/recipes/desserts/ice-cream/ice-cream.md
similarity index 93%
rename from public/recipes/desserts/ice-cream/ice-cream.mdx
rename to recipes/desserts/ice-cream/ice-cream.md
index f3e1b36..c899381 100644
--- a/public/recipes/desserts/ice-cream/ice-cream.mdx
+++ b/recipes/desserts/ice-cream/ice-cream.md
@@ -15,22 +15,21 @@ display: true
 displayPhoto: "./assets/ice-cream.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Ice Cream](./assets/ice-cream.jpg "Ice Cream")
+:::
 
-## Photos
-![Ice Cream](./assets/ice-cream.jpg)
-*Ice Cream*
-
-## Ingredients
+:::ingredients
 - 2 cups whole milk
 - 1 cup heavy cream
 - 4 large egg yolks
 - 3/4 cup granulated sugar
 - 1 tablespoon pure vanilla extract
 - salt
-- ice 
+- ice
+:::
 
-## Instructions
+:::instructions
 1. In a saucepan, slowly combine the **whole milk** and **heavy cream**. Heat over medium heat until the mixture is hot, but not boiling, for about 5-7 minutes.
 2. In a separate bowl, whisk the egg yolks and granulated sugar together. Mix until it becomes pale and thick, to create a rich custard base. 
 3. Temper the egg yolks by slowly pouring about half the **hot milk mixture** into the **egg yolks** while constantly whisking.
@@ -42,12 +41,15 @@ displayPhoto: "./assets/ice-cream.jpg"
 9. If you don't have an ice cream maker, fill a bowl halfway with ice, and a generous amount of salt. Mix the ice together. Find a smaller metal bowl to set inside. 
 10. Whisk the custard mixture vigorously, and then cover and let sit in the freezer for 30 minutes. Repeat this process around 4 times or until the desired consistency is achieved.
 11. When done the consistency should be a very loose soft serve. Let it sit in the freezer for 4 hours or overnight, then enjoy.
+:::
 
-## Notes
+:::notes
 ### Covering
 When covering the custard, make sure the plastic wrap touches the surface or the air contact will dry out the top layer of the custard, making it lumpy when mixed. This is less important after it has cooled to room temperature.
+:::
 
-## References
+:::references
 - Reference Recipes **[HERE](https://sweetfromscratch.com/easy-homemade-custard-ice-cream-recipe/)** and **[HERE](https://www.youtube.com/watch?v=MdirPsiHnCA)**.
+:::
 
-</RecipeCard>
+::card
diff --git a/public/recipes/drinks/banana-chocolate-smoothie/assets/banana-chocolate-smoothie.jpg b/recipes/drinks/banana-chocolate-smoothie/assets/banana-chocolate-smoothie.jpg
similarity index 100%
rename from public/recipes/drinks/banana-chocolate-smoothie/assets/banana-chocolate-smoothie.jpg
rename to recipes/drinks/banana-chocolate-smoothie/assets/banana-chocolate-smoothie.jpg
diff --git a/public/recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.mdx b/recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.md
similarity index 86%
rename from public/recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.mdx
rename to recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.md
index 3625335..4823e7d 100644
--- a/public/recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.mdx
+++ b/recipes/drinks/banana-chocolate-smoothie/banana-chocolate-smoothie.md
@@ -15,24 +15,25 @@ display: true
 displayPhoto: "./assets/banana-chocolate-smoothie.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Banana-Chocolate Smoothie](./assets/banana-chocolate-smoothie.jpg "Banana-Chocolate Smoothie")
+:::
 
-## Photos
-![Banana-Chocolate Smoothie](./assets/banana-chocolate-smoothie.jpg)
-*Banana-Chocolate Smoothie*
-
-## Ingredients
+:::ingredients
 - 1 cup vanilla greek yogurt
 - 1 banana
 - 1/8 cup cream / whole milk
 - 1 tsp chocolate powder
+:::
 
-## Instructions
+:::instructions
 1. Put all ingredients into a blender and blend until smooth.
 2. Enjoy!
+:::
 
-## Notes
+:::notes
 ### Yogurt Choice
 - Greek yogurt is healthier and becomes less watery over time.
+:::
 
-</RecipeCard>
+::card
diff --git a/public/recipes/drinks/berry-smoothie/assets/berry-smoothie.jpg b/recipes/drinks/berry-smoothie/assets/berry-smoothie.jpg
similarity index 100%
rename from public/recipes/drinks/berry-smoothie/assets/berry-smoothie.jpg
rename to recipes/drinks/berry-smoothie/assets/berry-smoothie.jpg
diff --git a/public/recipes/drinks/berry-smoothie/berry-smoothie.mdx b/recipes/drinks/berry-smoothie/berry-smoothie.md
similarity index 80%
rename from public/recipes/drinks/berry-smoothie/berry-smoothie.mdx
rename to recipes/drinks/berry-smoothie/berry-smoothie.md
index 18459a8..2f2df72 100644
--- a/public/recipes/drinks/berry-smoothie/berry-smoothie.mdx
+++ b/recipes/drinks/berry-smoothie/berry-smoothie.md
@@ -15,24 +15,25 @@ display: true
 displayPhoto: "./assets/berry-smoothie.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Berry Smoothie](./assets/berry-smoothie.jpg "Berry Smoothie")
+:::
 
-## Photos
-![Berry Smoothie](./assets/berry-smoothie.jpg)
-*Berry Smoothie*
-
-## Ingredients
+:::ingredients
 - 1 cup honey vanilla greek yogurt
 - 1 banana
 - 1 cup berry mix
 - 1 cup blueberries
+:::
 
-## Instructions
+:::instructions
 1. Put all ingredients into a blender and blend until smooth.
 2. Enjoy!
+:::
 
-## Notes
+:::notes
 ### Yogurt Choice
 - Greek yogurt is healthier and becomes less watery over time.
+:::
 
-</RecipeCard>
+::card
diff --git a/public/recipes/drinks/peach-simple-syrup/assets/not-found.svg b/recipes/drinks/peach-simple-syrup/assets/not-found.svg
similarity index 100%
rename from public/recipes/drinks/peach-simple-syrup/assets/not-found.svg
rename to recipes/drinks/peach-simple-syrup/assets/not-found.svg
diff --git a/public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx b/recipes/drinks/peach-simple-syrup/peach-simple-syrup.md
similarity index 93%
rename from public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx
rename to recipes/drinks/peach-simple-syrup/peach-simple-syrup.md
index 0629f91..5ae56d4 100644
--- a/public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx
+++ b/recipes/drinks/peach-simple-syrup/peach-simple-syrup.md
@@ -15,19 +15,18 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 cup peaches (about 2 medium), fresh or frozen, chopped
 - 1 cup sugar (unrefined cane, granulated, or brown)
 - 1 cup water
 - 1/2 tsp vanilla extract (optional)
+:::
 
-## Instructions
+:::instructions
 1. Wash and chop the **peaches** into small pieces. There's no need to peel them.
 2. In a medium saucepan, combine the chopped **peaches**, **sugar**, and **water**.
 3. Bring the mixture to a simmer over medium heat, stirring until the **sugar** is fully dissolved.
@@ -37,14 +36,18 @@ displayPhoto: ""
 7. If using, stir in the **vanilla extract** once the syrup has been strained.
 8. Store in an airtight container in the refrigerator for up to 2 weeks.
 This peach syrup is perfect for cocktails (like a Peach Mojito or Bellini), mocktails, sweetening iced tea or lemonade, drizzling over pancakes, or adding to sparkling water for a refreshing peach soda.
+:::
 
-## Notes
+:::notes
 ### Sugar Choice
 - Unrefined cane sugar is a great choice, but regular granulated white sugar or even brown sugar will also work well. Brown sugar will result in a slightly darker syrup with a hint of caramel flavor.
 
 ### How to Use
 - This peach syrup is perfect for cocktails (like a Peach Mojito or Bellini), mocktails, sweetening iced tea or lemonade, drizzling over pancakes, or adding to sparkling water for a refreshing peach soda.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.alphafoodie.com/how-to-make-peach-simple-syrup/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/drinks/strawberry-smoothie/assets/strawberry-smoothie.jpg b/recipes/drinks/strawberry-smoothie/assets/strawberry-smoothie.jpg
similarity index 100%
rename from public/recipes/drinks/strawberry-smoothie/assets/strawberry-smoothie.jpg
rename to recipes/drinks/strawberry-smoothie/assets/strawberry-smoothie.jpg
diff --git a/public/recipes/drinks/strawberry-smoothie/strawberry-smoothie.mdx b/recipes/drinks/strawberry-smoothie/strawberry-smoothie.md
similarity index 79%
rename from public/recipes/drinks/strawberry-smoothie/strawberry-smoothie.mdx
rename to recipes/drinks/strawberry-smoothie/strawberry-smoothie.md
index f60de22..ecde20a 100644
--- a/public/recipes/drinks/strawberry-smoothie/strawberry-smoothie.mdx
+++ b/recipes/drinks/strawberry-smoothie/strawberry-smoothie.md
@@ -15,24 +15,25 @@ display: true
 displayPhoto: "./assets/strawberry-smoothie.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Strawberry Smoothie](./assets/strawberry-smoothie.jpg "Strawberry Smoothie")
+:::
 
-## Photos
-![Strawberry Smoothie](./assets/strawberry-smoothie.jpg)
-*Strawberry Smoothie*
-
-## Ingredients
+:::ingredients
 - 1 cup honey vanilla greek yogurt
 - 1 banana
 - 1/4 cup frozen berry mix
 - 2 cups fresh strawberries
+:::
 
-## Instructions
+:::instructions
 1. Put all ingredients into a blender and blend until smooth.
 2. Enjoy!
+:::
 
-## Notes
+:::notes
 ### Yogurt Choice
 - Greek yogurt is healthier and becomes less watery over time.
+:::
 
-</RecipeCard>
+::card
diff --git a/public/recipes/example/example-recipe-1/assets/not-found.svg b/recipes/example/example-recipe-1/assets/not-found.svg
similarity index 100%
rename from public/recipes/example/example-recipe-1/assets/not-found.svg
rename to recipes/example/example-recipe-1/assets/not-found.svg
diff --git a/public/recipes/example/example-recipe-1/example-recipe-1.mdx b/recipes/example/example-recipe-1/example-recipe-1.md
similarity index 92%
rename from public/recipes/example/example-recipe-1/example-recipe-1.mdx
rename to recipes/example/example-recipe-1/example-recipe-1.md
index e0b3af6..136cae1 100644
--- a/public/recipes/example/example-recipe-1/example-recipe-1.mdx
+++ b/recipes/example/example-recipe-1/example-recipe-1.md
@@ -17,16 +17,13 @@ displayPhoto: "./assets/not-found.svg"
 
 A beloved Italian-American comfort food that combines crispy breaded chicken cutlets with rich marinara sauce and gooey melted cheese. Perfect for a family dinner or special occasion.
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
+![Chicken Parmesan](./assets/chocolate-chip-cookies.png "Chicken Parmesan")
+:::
 
-![Chicken Parmesan](./assets/chocolate-chip-cookies.png)
-*Chicken Parmesan*
-
-## Ingredients
+:::ingredients
 - 4 boneless, skinless chicken breasts (about 6-8 oz each)
 - 1 cup all-purpose flour
 - 2 large eggs, beaten
@@ -40,8 +37,9 @@ A beloved Italian-American comfort food that combines crispy breaded chicken cut
 - 1 1/2 cups shredded mozzarella cheese
 - 1/4 cup fresh basil leaves, torn
 - Extra Parmesan for serving
+:::
 
-## Instructions
+:::instructions
 1. Place **chicken breasts** between two sheets of **plastic wrap** and pound to an even 1/2-inch thickness using a meat mallet.
 2. Season both sides generously with **salt** and **pepper**.
 3. Prepare three shallow dishes:
@@ -55,8 +53,9 @@ A beloved Italian-American comfort food that combines crispy breaded chicken cut
 8. Place fried **chicken** in a baking dish. Spoon **marinara sauce** over each piece, then top with **mozzarella** and remaining **Parmesan**.
 9. Bake for 10-12 minutes (or broil for 3-4 minutes) until cheese is melted and bubbly.
 10. Top with fresh torn **basil** and serve immediately with **pasta** or a side salad.
+:::
 
-## Notes
+:::notes
 ### Tips
 - **Don't overcrowd**: Fry in batches to maintain oil temperature
 - **Gluten-free option**: Substitute with gluten-free flour and breadcrumbs
@@ -64,7 +63,10 @@ A beloved Italian-American comfort food that combines crispy breaded chicken cut
 ### Variations
 - **Baked version**: Skip frying and bake breaded chicken at 425°F for 20-25 minutes
 - **Spicy**: Add red pepper flakes to the breadcrumb mixture
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.example.com)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/example/example-recipe-2/assets/not-found.svg b/recipes/example/example-recipe-2/assets/not-found.svg
similarity index 100%
rename from public/recipes/example/example-recipe-2/assets/not-found.svg
rename to recipes/example/example-recipe-2/assets/not-found.svg
diff --git a/public/recipes/example/example-recipe-2/example-recipe-2.mdx b/recipes/example/example-recipe-2/example-recipe-2.md
similarity index 92%
rename from public/recipes/example/example-recipe-2/example-recipe-2.mdx
rename to recipes/example/example-recipe-2/example-recipe-2.md
index 22b9970..8ac1cd4 100644
--- a/public/recipes/example/example-recipe-2/example-recipe-2.mdx
+++ b/recipes/example/example-recipe-2/example-recipe-2.md
@@ -17,16 +17,13 @@ displayPhoto: "./assets/not-found.svg"
 
 The ultimate chocolate chip cookie recipe that delivers crispy edges, chewy centers, and loads of melty chocolate chips in every bite. This recipe has been tested and perfected to create bakery-style cookies at home.
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
+![Chocolate Chip Cookies](./assets/chocolate-chip-cookies.png "Chocolate Chip Cookies")
+:::
 
-![Chocolate Chip Cookies](./assets/chocolate-chip-cookies.png)
-*Chocolate Chip Cookies*
-
-## Ingredients
+:::ingredients
 - 2 1/4 cups (280g) all-purpose flour
 - 1 teaspoon baking soda
 - 1 teaspoon fine sea salt
@@ -38,8 +35,9 @@ The ultimate chocolate chip cookie recipe that delivers crispy edges, chewy cent
 - 2 cups (340g) semi-sweet chocolate chips
 - 1 cup (170g) milk chocolate chips (optional, for extra chocolate)
 - Flaky sea salt for topping (optional)
+:::
 
-## Instructions
+:::instructions
 1. Preheat oven to 375°F (190°C). Line two baking sheets with **parchment paper**.
 2. In a medium bowl, whisk together **flour**, **baking soda**, and **salt**. Set aside.
 3. In a large bowl or stand mixer, beat softened **butter** with both **sugars** on medium speed for 2-3 minutes until light and fluffy.
@@ -52,8 +50,9 @@ The ultimate chocolate chip cookie recipe that delivers crispy edges, chewy cent
 10. Bake for 10-12 minutes until edges are golden brown but centers still look slightly underdone.
 11. Let cookies cool on the baking sheet for 5 minutes (they'll continue to set), then transfer to a wire rack.
 12. Serve warm or at room temperature. Best enjoyed with cold **milk**!
+:::
 
-## Notes
+:::notes
 ### Tips for Success
 - **Room temperature ingredients**: Softened butter and eggs create the best texture
 - **Don't skip chilling**: Cold dough prevents spreading and creates thicker cookies
@@ -61,7 +60,10 @@ The ultimate chocolate chip cookie recipe that delivers crispy edges, chewy cent
 ### Variations
 - **Brown butter cookies**: Brown the butter for a nutty, caramel flavor
 - **Thick and bakery-style**: Increase flour to 2 1/2 cups and chill overnight
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.example.com)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/indian/brown-lentils/assets/not-found.svg b/recipes/indian/brown-lentils/assets/not-found.svg
similarity index 100%
rename from public/recipes/indian/brown-lentils/assets/not-found.svg
rename to recipes/indian/brown-lentils/assets/not-found.svg
diff --git a/public/recipes/indian/brown-lentils/brown-lentils.mdx b/recipes/indian/brown-lentils/brown-lentils.md
similarity index 93%
rename from public/recipes/indian/brown-lentils/brown-lentils.mdx
rename to recipes/indian/brown-lentils/brown-lentils.md
index 52aaf00..439c50d 100644
--- a/public/recipes/indian/brown-lentils/brown-lentils.mdx
+++ b/recipes/indian/brown-lentils/brown-lentils.md
@@ -19,13 +19,11 @@ This recipe uses brown lentils (whole Masoor Dal), as well as their hulled (red
 
 The whole dal retain their consistency, and the hulled and split dal thicken the gravy. Both are recommended to be used. Some substitutes for the whole dal can be done, I have used whole mung beans (Green Moong Dal) as a replacement, and any split dal can be used instead of the split red dal.
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Brown & Red Lentils
 - 1 cup whole masoor dal (brown lentils)
 - 1 cup split masoor dal (hulled and split brown lentils aka red lentils)
@@ -47,14 +45,15 @@ The whole dal retain their consistency, and the hulled and split dal thicken the
 - 1 tsp garam masala, adjust to taste
 - 1 tbsp amchur powder
 - 1 tbsp dried fenugreek leaves (kasuri methi)
+:::
 
-## Instructions
-**Lentil Preparation**
+:::instructions
+### Lentil Preparation
 1. Add each type of **lentil** individually to a large bowl and rinse well at least 3x.
 2. Add to a pot with 4 cups **water** if using both types of lentils, 3 cups if not using split lentils.
 3. Bring to a rolling boil, skimming froth if it appears.
 4. Reduce to medium and cook until tender, for 20-25 mins. Red lentils should break down completely and brown lentils to retain their shape.
-**Gravy Instructions**
+### Gravy Instructions
 1. On a medium flame, heat 2/3 tbsp **ghee/oil** in large pot.
 2. When medium hot, add **cumin** and **fennel seeds** followed by **dried red chilis**. If using chili flakes save for a later step.
 3. Once sizzling and the chilis turn crisp but not burnt, add **onions**. Saute until light golden for 5-6 mins.
@@ -65,11 +64,15 @@ The whole dal retain their consistency, and the hulled and split dal thicken the
 8. Add **cooked lentils** along with the liquid in the pot and mix well. Pour **hot water** as needed (about 1/2 cup or as needed) and bring to boil.
 9. Simmer for 5 minutes until thick and traces of fats visible on top. Optionally mash lentils a bit for a creamier consistency.
 10. Stir in **amchur powder** and **fenugreek leaves**.
+:::
 
-## Notes
+:::notes
 ### Mix & Match
 - Try with all types of lentils!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/brown-lentils/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/indian/chana-masala/assets/chana-masala.jpg b/recipes/indian/chana-masala/assets/chana-masala.jpg
similarity index 100%
rename from public/recipes/indian/chana-masala/assets/chana-masala.jpg
rename to recipes/indian/chana-masala/assets/chana-masala.jpg
diff --git a/public/recipes/indian/chana-masala/chana-masala.mdx b/recipes/indian/chana-masala/chana-masala.md
similarity index 93%
rename from public/recipes/indian/chana-masala/chana-masala.mdx
rename to recipes/indian/chana-masala/chana-masala.md
index e5e3790..519634f 100644
--- a/public/recipes/indian/chana-masala/chana-masala.mdx
+++ b/recipes/indian/chana-masala/chana-masala.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/chana-masala.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Chana Masala](./assets/chana-masala.jpg "Chana Masala")
+:::
 
-## Photos
-![Chana Masala](./assets/chana-masala.jpg)
-*Chana Masala*
-
-## Ingredients
+:::ingredients
 ### Chana
 - 1 cup dry chana (raw chickpeas) or 3 cups soaked/2 15 oz cans
 - 1 1/2 cups water, more for gravy
@@ -44,13 +42,14 @@ displayPhoto: "./assets/chana-masala.jpg"
 - 1 teaspoon kasuri methi (dry fenugreek leaves, optional)
 - 1/4 teaspoon amchur (dry mango powder, optional)
 - 2 tbsp finely chopped coriander leaves/cilantro
+:::
 
-## Instructions
-**Chana Preparation**
+:::instructions
+### Chana Preparation
 1. Rinse dried **chickpeas** at least 3 times to remove loose skin. Soak in 3 1/2 to 4 cups water overnight for at least 8 hours. Additionally you can add a small amount of baking soda to loosen the chana skins.
 2. Drain water and rinse well. Optionally separate skins from chana (but keep them later to thicken sauce). Pour the recipe water in and pressure cook for 5 to 6 minutes on a stovetop or 18 minutes on high pressure in an instant pot.
 3. Check for tenderness. Fully cooked chickpeas should mash fully when squeezed.
-**Gravy Instructions (Stovetop)**
+### Gravy Instructions (Stovetop)
 1. Heat **oil** in a large pot. Add the whole spices - **cinnamon**, **cloves**, **cardamom**, and **bay leaf**.
 2. After they start to sizzle, add **onions** and **green chili**. Saute until they start to turn light golden.
 3. Add **ginger garlic paste** and saute for 1 minute, avoiding burning it.
@@ -61,20 +60,24 @@ displayPhoto: "./assets/chana-masala.jpg"
 8. Mix well, taste and add more **salt**. Cover and simmer for 15 minutes.
 9. When consistency is thick, add **amchur powder** and **kasuri methi**.
 10. Garnish with coriander leaves, sprinkle lemon juice if desired.
-**Gravy Instructions (Instant Pot)**
+### Gravy Instructions (Instant Pot)
 - If cooking in the Instant pot, make the onion tomato masala on saute mode.
 - Optionally cool and blend.
 - Add soaked chickpeas with 2 cups water. Deglaze and pressure cook on high for 35 minutes.
 - After pressure drops, open the lid and cook on saute mode until thick.
 - Serve with kasuri methi and amchur.
+:::
 
-## Notes
+:::notes
 ### Don't Eyeball It
 - Match the chana amount correctly, or the gravy gets very thin.
 
 ### Protein Powerhouse
 - Recipe usually heavy on the chana, adjust how you like it.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/chana-masala/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/indian/chicken-tikka-masala/assets/chicken-tikka-masala.jpg b/recipes/indian/chicken-tikka-masala/assets/chicken-tikka-masala.jpg
similarity index 100%
rename from public/recipes/indian/chicken-tikka-masala/assets/chicken-tikka-masala.jpg
rename to recipes/indian/chicken-tikka-masala/assets/chicken-tikka-masala.jpg
diff --git a/public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx b/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.md
similarity index 94%
rename from public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx
rename to recipes/indian/chicken-tikka-masala/chicken-tikka-masala.md
index 7c712f1..684fab0 100644
--- a/public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx
+++ b/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/chicken-tikka-masala.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Chicken Tikka Masala](./assets/chicken-tikka-masala.jpg "Chicken Tikka Masala")
+:::
 
-## Photos
-![Chicken Tikka Masala](./assets/chicken-tikka-masala.jpg)
-*Chicken Tikka Masala*
-
-## Ingredients
+:::ingredients
 ### Chicken Marinade
 - 28 oz (800g) boneless and skinless chicken thighs (cut into bite-sized pieces)
 - 1 cup plain yogurt
@@ -50,8 +48,9 @@ displayPhoto: "./assets/chicken-tikka-masala.jpg"
 - 1 teaspoon brown sugar
 - 1/4 cup water if needed
 - 4 tablespoons fresh cilantro or coriander to garnish
+:::
 
-## Instructions
+:::instructions
 1. In a bowl, combine **chicken** with all of the ingredients for the **chicken marinade**; let marinate for 10 minutes to an hour (or overnight if time allows).
 2. Heat **oil** in a large skillet or pot over medium-high heat. When sizzling, add **marinated chicken pieces** in batches of two or three, making sure not to crowd the pan. Fry until browned for only 3 minutes on each side. Set aside and keep warm. (You will finish cooking the chicken in the sauce.)
 3. Melt the **butter** in the same pan. Fry the **onions** until soft (about 3 minutes) while scraping up any browned bits stuck on the bottom of the pan.
@@ -59,14 +58,18 @@ displayPhoto: "./assets/chicken-tikka-masala.jpg"
 5. Pour in the **tomato puree**, **chili powders** and **salt**. Let simmer for about 10-15 minutes, stirring occasionally until sauce thickens and becomes a deep brown red colour.
 6. Stir the **cream** and **sugar** through the sauce. Add the **chicken** and its juices back into the pan and cook for an additional 8-10 minutes until chicken is cooked through and the sauce is thick and bubbling. Pour in the water to thin out the sauce, if needed.
 7. Garnish with cilantro (coriander) and serve.
+:::
 
-## Notes
+:::notes
 ### Diet
 - Switch cream for low fat milk to make this a bit healthier.
 
 ### Prep Early
 - Let chicken marinate for overnight if possible.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://cafedelites.com/chicken-tikka-masala/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/indian/lamb-vindaloo/assets/lamb-vindaloo.jpg b/recipes/indian/lamb-vindaloo/assets/lamb-vindaloo.jpg
similarity index 100%
rename from public/recipes/indian/lamb-vindaloo/assets/lamb-vindaloo.jpg
rename to recipes/indian/lamb-vindaloo/assets/lamb-vindaloo.jpg
diff --git a/public/recipes/indian/lamb-vindaloo/lamb-vindaloo.mdx b/recipes/indian/lamb-vindaloo/lamb-vindaloo.md
similarity index 95%
rename from public/recipes/indian/lamb-vindaloo/lamb-vindaloo.mdx
rename to recipes/indian/lamb-vindaloo/lamb-vindaloo.md
index 8591763..131a382 100644
--- a/public/recipes/indian/lamb-vindaloo/lamb-vindaloo.mdx
+++ b/recipes/indian/lamb-vindaloo/lamb-vindaloo.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/lamb-vindaloo.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Lamb Vindaloo](./assets/lamb-vindaloo.jpg "Lamb Vindaloo")
+:::
 
-## Photos
-![Lamb Vindaloo](./assets/lamb-vindaloo.jpg)
-*Lamb Vindaloo*
-
-## Ingredients
+:::ingredients
 - 1.25 lbs (500-600g) boneless lamb shoulder or leg
 - 20 dried and deseeded Kashmiri red chilies or 1 tablespoon Kashmiri chili powder
 - 1/4 cup vinegar
@@ -41,8 +39,9 @@ displayPhoto: "./assets/lamb-vindaloo.jpg"
 - Salt, to taste
 - 1/2 teaspoon mustard seeds (optional)
 - 1 sprig fresh curry leaves (optional)
+:::
 
-## Instructions
+:::instructions
 1. Deseed the **Kashmiri chilies** and soak them in the **vinegar** and 1/4 cup **water** for 15-20 minutes until softened. Skip this step if using chili powder.
 2. Combine the **coriander**, **cumin**, **peppercorns**, **cloves**, **cinnamon**, and **mustard seeds** and grind to a fine powder if using whole spices. Keep the **turmeric** separate to avoid staining the grinder.
 3. Transfer the ground spices to a blender along with the soaked **chilies and their liquid**, **turmeric**, **salt**, **jaggery**, **garlic**, and **ginger**. Blend into a smooth paste, adding a splash more water if needed. Use an immersion blender to get a smoother final result.
@@ -54,13 +53,17 @@ displayPhoto: "./assets/lamb-vindaloo.jpg"
 9. Cook until the lamb is fork-tender, about 1 hour 15-30 minutes depending on the cut. Boneless leg may take closer to 90 minutes.
 10. Once tender, uncover and reduce the sauce to a thick, clingy consistency. Taste and adjust with additional **salt** and **jaggery** — the dish should balance hot, sour, and slightly sweet.
 11. Rest 10 minutes before serving — the sauce thickens as it cools.
+:::
 
-## Notes
+:::notes
 ### Tips
 - **Make ahead**: Vindaloo always tastes better the next day. Make it a day in advance and reheat gently with a splash of water.
 - **Vinegar matters**: Traditional Goan vindaloo uses palm vinegar (toddy vinegar). Cane, apple cider, or rice vinegar are acceptable substitutes; avoid white distilled.
 - **It's Not Vindaloo if it's Not Spicy**: My friends say it's so - you better be coughing!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/lamb-vindaloo/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/indian/palak-paneer/assets/palak-paneer.jpg b/recipes/indian/palak-paneer/assets/palak-paneer.jpg
similarity index 100%
rename from public/recipes/indian/palak-paneer/assets/palak-paneer.jpg
rename to recipes/indian/palak-paneer/assets/palak-paneer.jpg
diff --git a/public/recipes/indian/palak-paneer/palak-paneer.mdx b/recipes/indian/palak-paneer/palak-paneer.md
similarity index 93%
rename from public/recipes/indian/palak-paneer/palak-paneer.mdx
rename to recipes/indian/palak-paneer/palak-paneer.md
index c105634..7d106bd 100644
--- a/public/recipes/indian/palak-paneer/palak-paneer.mdx
+++ b/recipes/indian/palak-paneer/palak-paneer.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/palak-paneer.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Palak Paneer](./assets/palak-paneer.jpg "Palak Paneer")
+:::
 
-## Photos
-![Palak Paneer](./assets/palak-paneer.jpg)
-*Palak Paneer*
-
-## Ingredients
+:::ingredients
 - 1 1/4 cups paneer
 - 4 cups palak/spinach
 - 2 tbsp oil (can use half oil half butter)
@@ -40,14 +38,15 @@ displayPhoto: "./assets/palak-paneer.jpg"
 - 2 green cardamoms (optional)
 - 1 inch cinnamon (optional)
 - 2 cloves (optional)
+:::
 
-## Instructions
-**Palak/Spinach Preparation**
+:::instructions
+### Palak/Spinach Preparation
 1. For best results separate stems as they may leave a bitter taste, or use baby spinach.
 2. Rinse and drain **spinach**. Leave as little water as possible as spinach will be cooked in oil.
 3. Heat 1/2 tsp **oil** in a pan. Saute **green chilies**, **cashews**, and **spinach** for 3-4 mins until the leaves thoroughly wilt and the raw smell of spinach has gone away. Alternatively, blanch the palak in 4 cups of hot water with 1/4 tsp salt for 2 mins, then immerse in ice cold water, and drain completely.
 4. Cool this and blend along with 1/4 cup **water** to a smooth puree. The smoother the better, as the cashews may leave a gritty texture if not fully emulsified. Add additional water if needed.
-**Gravy Instructions**
+### Gravy Instructions
 1. (optional) Heat 1 tablespoon **butter** and half tablespoon **oil** to the same pan. Once melted, add **cumin seeds**, **cardamom**, **cinnamon**, and **cloves** until they begin to sizzle.
 2. Add the **onions** and fry until they turn transparent to golden.
 3. Saute **ginger garlic paste** for 1-2 minutes or until aromatic.
@@ -57,14 +56,18 @@ displayPhoto: "./assets/palak-paneer.jpg"
 7. (optional) For a smooth curry blend the gravy mixture.
 8. Lower the flame. Add **kasuri methi** and the pureed spinach. Mix well and cook until it begins to bubble for a few minutes. If too thick, add a few tablespoons of water.
 9. Add **paneer** and mix well. Optionally garnish with cream.
+:::
 
-## Notes
+:::notes
 ### Meal Prep
 - If using canned tomatoes, you'll typically have enough to double the recipe which is a good amount to have some leftovers.
 
 ### Keep it Healthy
 - It really doesn't need it, but you can add heavy whipping cream to thicken the gravy. However it should be relatively thick as is.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/palak-paneer-recipe-easy-paneer-recipes-step-by-step-pics/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/irish/corned-beef-and-cabbage/assets/corned-beef-and-cabbage.jpg b/recipes/irish/corned-beef-and-cabbage/assets/corned-beef-and-cabbage.jpg
similarity index 100%
rename from public/recipes/irish/corned-beef-and-cabbage/assets/corned-beef-and-cabbage.jpg
rename to recipes/irish/corned-beef-and-cabbage/assets/corned-beef-and-cabbage.jpg
diff --git a/public/recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.mdx b/recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.md
similarity index 90%
rename from public/recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.mdx
rename to recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.md
index 23ef816..eb71e45 100644
--- a/public/recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.mdx
+++ b/recipes/irish/corned-beef-and-cabbage/corned-beef-and-cabbage.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/corned-beef-and-cabbage.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Corned Beef and Cabbage](./assets/corned-beef-and-cabbage.jpg "Corned Beef and Cabbage")
+:::
 
-## Photos
-![Corned Beef and Cabbage](./assets/corned-beef-and-cabbage.jpg)
-*Corned Beef and Cabbage*
-
-## Ingredients
+:::ingredients
 - 2 lbs red potatoes, quartered
 - 1 lb carrots, cut into 3-inch pieces
 - 2 celery ribs, cut into 3-inch pieces
@@ -33,22 +31,27 @@ displayPhoto: "./assets/corned-beef-and-cabbage.jpg"
 - 1 bottle (12 oz) Guinness stout or reduced-sodium beef broth
 - ½ small head cabbage, thinly sliced
 - Prepared horseradish, for serving
+:::
 
-## Instructions
+:::instructions
 1. Add **potatoes**, **carrots**, **celery**, and **onion** to a 6-qt slow cooker. Place the **corned beef brisket** on top (discard or save the spice packet).
 2. Place **cloves**, **peppercorns**, and **bay leaf** on a piece of cheesecloth. Gather the corners and tie with string to make a sachet. Add to the slow cooker.
 3. Pour the **Guinness** over everything.
 4. Cook covered on low for 8-10 hours, until the meat and vegetables are tender. Add the **cabbage** during the final hour.
 5. Remove and discard the spice sachet. Slice the beef diagonally across the grain into thin pieces.
 6. Serve with the vegetables and **horseradish** on the side.
+:::
 
-## Notes
+:::notes
 ### Sweetness
 - Use brown sugar or honey with the beef to add complexity to the finished flavor.
 
 ### Slicing the Beef
 - Always slice corned beef against the grain or it will be tough and stringy.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.tasteofhome.com/recipes/guinness-corned-beef-and-cabbage/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/italian/chicken-parmesan/assets/not-found.svg b/recipes/italian/chicken-parmesan/assets/not-found.svg
similarity index 100%
rename from public/recipes/italian/chicken-parmesan/assets/not-found.svg
rename to recipes/italian/chicken-parmesan/assets/not-found.svg
diff --git a/public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx b/recipes/italian/chicken-parmesan/chicken-parmesan.md
similarity index 93%
rename from public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx
rename to recipes/italian/chicken-parmesan/chicken-parmesan.md
index 795e7a0..3af3ab4 100644
--- a/public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx
+++ b/recipes/italian/chicken-parmesan/chicken-parmesan.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Chicken & Breading
 - 6 boneless skinless chicken breasts
 - 1 cup flour
@@ -37,35 +35,40 @@ displayPhoto: ""
 - 1 quart Marinara Sauce
 - 2 cups grated/shredded whole milk mozzarella
 - Remaining ¼ cup minced flat leaf parsley (for garnish)
+:::
 
-## Instructions
-**Preparation**
+:::instructions
+### Preparation
 1. Pre-heat oven to **350°F**.
 2. Place one **chicken breast** inside a gallon size ziplock bag. Using a kitchen mallet, pound the chicken breast to an even size, approximately **½ inch** thick. Repeat for the remaining breasts.
-**Breading**
+### Breading
 1. Prepare three shallow trays. In the first tray, place the **flour** and season with **salt and pepper**.
 2. In a small bowl, beat **eggs** with the **cream**. Pour this egg wash into the second tray. Add **salt**, **pepper** and **half of the minced parsley** to the egg wash.
 3. In the third tray, place the **breadcrumbs** and mix in the **parmesan cheese**.
 4. To bread, dredge each cutlet in the **flour** on both sides, dip in the **egg wash**, and finally cover completely with **breadcrumbs**. Set aside and finish breading all cutlets.
-**Frying**
+### Frying
 1. Heat **olive oil** in a large skillet until very hot. Ensure this will cover about half of the chicken when placed in the skillet.
 2. Cook two cutlets at a time, turning when they start to get a golden color. They will cook fast on the outside; they will finish cooking in the oven.
 3. Drain fried cutlets on a paper towel and finish frying the rest of the cutlets.
-**Bake & Serve**
+### Bake & Serve
 1. Add 4 big spoonfuls of **marinara sauce** to the bottom of a large lasagna or baking pan. Alternatively place a spoonful on each piece of chicken. Avoid using too much or the final result will be soupy.
 2. Arrange the cutlets in a single layer or slightly overlapping.
 3. Add a spoonful of **marinara sauce** over each cutlet and around the sides.
 4. Sprinkle the **mozzarella cheese** over the cutlets, and finish with the rest of the **flat leaf parsley**.
 5. Bake for **25-35 minutes** until the cheese is starting to turn golden brown.
 6. Serve immediately.
+:::
 
-## Notes
+:::notes
 ### Chicken Substitute
 - Chicken thigh is an appropriate substitution for chicken breast in my experience.
 
 ### Low Fat Options
 - It's difficult to sub cheese in this recipe but using a low fat mozzarella cheese makes it a slight bit healthier.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.homemadeitaliancooking.com/chicken-parmesan/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/italian/fusilli-with-vodka-basil-parmesan/assets/not-found.svg b/recipes/italian/fusilli-with-vodka-basil-parmesan/assets/not-found.svg
similarity index 100%
rename from public/recipes/italian/fusilli-with-vodka-basil-parmesan/assets/not-found.svg
rename to recipes/italian/fusilli-with-vodka-basil-parmesan/assets/not-found.svg
diff --git a/public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx b/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.md
similarity index 93%
rename from public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx
rename to recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.md
index 4d03e0b..eafc8cd 100644
--- a/public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx
+++ b/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - ¼ cup olive oil
 - ½ shallot, finely chopped
 - 1 small garlic clove, finely grated
@@ -34,8 +32,9 @@ displayPhoto: ""
 - 2 tablespoons unsalted butter
 - 1 ounce finely grated Parmesan, plus more for serving
 - ¼ cup chopped fresh basil
+:::
 
-## Instructions
+:::instructions
 1. Heat **oil** in a large skillet over medium.
 2. Add **shallot** and **garlic** and cook, stirring occasionally, until softened, about 5 minutes.
 3. Begin cooking **pasta** in salted water until al dente. This can be done while working on the next few steps for the pasta in parallel.
@@ -47,14 +46,18 @@ displayPhoto: ""
 9. Add pasta to skillet with sauce along with **butter** and ½ cup **pasta cooking liquid**.
 10. Cook over medium-low heat, stirring constantly and adding more pasta cooking liquid if needed, until butter has melted and a thick, glossy sauce has formed, about 2 minutes.
 11. Season with salt and pepper and add 1 oz. **Parmesan**, tossing to coat. Divide pasta among bowls, then top with basil and more Parmesan.
+:::
 
-## Notes
+:::notes
 ### Family Sized
 - Recipe makes about a pound of pasta, in my experience that ends up being about 8 large servings.
 
 ### Eat it Quick!
 - Lasts quite a while, but reheat quality is not super presentable because of the heavy cream.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.bonappetit.com/recipe/fusilli-alla-vodka-basil-parmesan)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/italian/pizza-dough/assets/elote-pizza.jpg b/recipes/italian/pizza-dough/assets/elote-pizza.jpg
similarity index 100%
rename from public/recipes/italian/pizza-dough/assets/elote-pizza.jpg
rename to recipes/italian/pizza-dough/assets/elote-pizza.jpg
diff --git a/public/recipes/italian/pizza-dough/assets/pizza-dough.jpg b/recipes/italian/pizza-dough/assets/pizza-dough.jpg
similarity index 100%
rename from public/recipes/italian/pizza-dough/assets/pizza-dough.jpg
rename to recipes/italian/pizza-dough/assets/pizza-dough.jpg
diff --git a/public/recipes/italian/pizza-dough/pizza-dough.mdx b/recipes/italian/pizza-dough/pizza-dough.md
similarity index 89%
rename from public/recipes/italian/pizza-dough/pizza-dough.mdx
rename to recipes/italian/pizza-dough/pizza-dough.md
index 8e3abc2..fc3a22b 100644
--- a/public/recipes/italian/pizza-dough/pizza-dough.mdx
+++ b/recipes/italian/pizza-dough/pizza-dough.md
@@ -15,36 +15,38 @@ display: true
 displayPhoto: "./assets/pizza-dough.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Pizza Dough](./assets/pizza-dough.jpg "Pizza Dough")
 
-## Photos
-![Pizza Dough](./assets/pizza-dough.jpg)
-*Pizza Dough*
+![Elote Pizza](./assets/elote-pizza.jpg "Elote Pizza")
+:::
 
-![Elote Pizza](./assets/elote-pizza.jpg)
-*Elote Pizza*
-
-## Ingredients
+:::ingredients
 - 1 cup warm water (temperature depends on type of yeast, usually 100-110 degrees Fahrenheit)
 - 2 ¼ teaspoons dry active yeast (1 normal sized packet)
 - ½ teaspoon granulated sugar
 - 1 teaspoon salt
 - 3 tablespoons olive oil
 - 3 cups all-purpose flour (approximate)
+:::
 
-## Instructions
+:::instructions
 1. Measure **warm water** (between 100°-110°F) in a measuring cup, then add the **yeast** and **sugar**. Stir gently, then let sit around 5 minutes until it’s active and foamy. This will happen within 5 minutes. Use a thermometer to measure water temp.
 2. Stir **salt**, **oil**, and 2 cups **flour** in a large mixing bowl, stirring in the yeast mixture as you go, using a wooden spoon.
 3. Add the third cup of **flour** and then stir until you can’t anymore. Remove the spoon and then use your hands to work the dough into a ball that is slightly sticky.
 4. Spray a second large bowl with nonstick cooking spray, add your pizza dough ball, then spray the top lightly with cooking spray and cover tightly with plastic wrap. Place in a warm area of the kitchen and let rise until doubled in size, about 1-2 hours.
+:::
 
-## Notes
+:::notes
 ### Family Sized
 - Recipe makes about 4 medium sized pizza doughs. Each would cover most of a pizza spatula as a thinner crust.
 
 ### Yeast Quality
 - Good yeast is the secret here. From a packet is better than keeping bulk usually. Either way, the more bubbles the better.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.crazyforcrust.com/the-ultimate-pizza-crust-recipe/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/italian/pizza-sauce/assets/not-found.svg b/recipes/italian/pizza-sauce/assets/not-found.svg
similarity index 100%
rename from public/recipes/italian/pizza-sauce/assets/not-found.svg
rename to recipes/italian/pizza-sauce/assets/not-found.svg
diff --git a/public/recipes/italian/pizza-sauce/pizza-sauce.mdx b/recipes/italian/pizza-sauce/pizza-sauce.md
similarity index 88%
rename from public/recipes/italian/pizza-sauce/pizza-sauce.mdx
rename to recipes/italian/pizza-sauce/pizza-sauce.md
index 419641f..d33c7a5 100644
--- a/public/recipes/italian/pizza-sauce/pizza-sauce.mdx
+++ b/recipes/italian/pizza-sauce/pizza-sauce.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 15 oz tomato sauce
 - OR cut 6 oz tomato paste with water
 - 1-2 tablespoons dried oregano to taste
@@ -31,19 +29,24 @@ displayPhoto: ""
 - ½ tablespoon garlic salt
 - ¼ teaspoon freshly ground black pepper
 - 1 teaspoon sugar
+:::
 
-## Instructions
+:::instructions
 1. Mix **tomato paste** and **sauce** together in a medium size bowl until smooth.
 2. Add the rest of the ingredients – **oregano**, **Italian seasoning**, **garlic powder**, **onion powder**, **garlic salt**, **pepper** and **sugar** – and stir until evenly distributed throughout the sauce.
 3. Taste and adjust seasonings to your liking.
+:::
 
-## Notes
+:::notes
 ### Low Sodium
 - Avoid excess salt as this doesn't really need it.
 
 ### Keep it Sweet
 - If you're adding meat a sweet sauce usually breaks up all the salt you'll be adding.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://joyfoodsunshine.com/easy-homemade-pizza-sauce-recipe/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx b/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.md
similarity index 89%
rename from public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx
rename to recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.md
index d1a4c4d..7aa9fd2 100644
--- a/public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx
+++ b/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.md
@@ -15,20 +15,19 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - Eggs
 - 2 tablespoons white vinegar
 - ¼ cup soy sauce
 - ¼ cup mirin cooking wine
 - 1 teaspoon brown sugar
+:::
 
-## Instructions
+:::instructions
 1. Bring a pot of enough water to cover the eggs to a boil once added.
 2. Place saucepan over high heat and add **vinegar** to help with peeling. Bring to a boil.
 3. Prick a hole in the wide end of each egg (helps with shape and peeling).
@@ -38,14 +37,18 @@ displayPhoto: ""
 7. Peel shells and lower into the **marinade**.
 8. Chill 1-4 (or more) hours.
 9. When serving, remove from marinade and cut in half.
+:::
 
-## Notes
+:::notes
 ### Tight Fit
 - Make sure to find a bowl that can just barely fit all the eggs together, the sauce has to cover all of them.
 
 ### To Age or Not to Age
 - Depending on how long you age these, they'll get really salty. A few days is a good middle ground, after that you can take the eggs out and store separately.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.aspicyperspective.com/easy-ramen-egg-recipe-ajitsuke-tamago/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/japanese/ajitsuke-tamago-ramen-egg/assets/not-found.svg b/recipes/japanese/ajitsuke-tamago-ramen-egg/assets/not-found.svg
similarity index 100%
rename from public/recipes/japanese/ajitsuke-tamago-ramen-egg/assets/not-found.svg
rename to recipes/japanese/ajitsuke-tamago-ramen-egg/assets/not-found.svg
diff --git a/public/recipes/japanese/golden-curry-beef-stew/assets/not-found.svg b/recipes/japanese/golden-curry-beef-stew/assets/not-found.svg
similarity index 100%
rename from public/recipes/japanese/golden-curry-beef-stew/assets/not-found.svg
rename to recipes/japanese/golden-curry-beef-stew/assets/not-found.svg
diff --git a/public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx b/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.md
similarity index 91%
rename from public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx
rename to recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.md
index c26524e..9fe3ac2 100644
--- a/public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx
+++ b/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 lbs beef (chuck or brisket), cut into bite-sized pieces
 - 4 cups water, 1 additional as needed
 - 1 large onion, chopped
@@ -29,8 +27,9 @@ displayPhoto: ""
 - 3 medium golden potatoes, chopped
 - 2 tablespoons vegetable oil
 - 1 carton S&B Golden Curry Mix
+:::
 
-## Instructions
+:::instructions
 1. In a large saucepan, heat **vegetable oil** over medium heat. Add **beef** and cook until browned. Remove and set aside.
 2. Add **onion**, **carrots**, and **potatoes**. Stir-fry until fragrant.
 3. Add **water**, **beef**, and **S&B Golden Curry Mix**.
@@ -38,8 +37,9 @@ displayPhoto: ""
 5. Serve hot over rice.
 If the sauce is too thick, make a slurry with water and cornstarch. Note this will reduce flavor so use sparingly.
 Macaroni salad goes great alongside the rice and curry stew.
+:::
 
-## Notes
+:::notes
 ### Let me elaborate on bite sized
 - Cut it smaller than you think necessary and against grain.
 
@@ -48,7 +48,10 @@ Macaroni salad goes great alongside the rice and curry stew.
 
 ### Additions
 - Macaroni salad goes great alongside the rice and curry stew.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.waiyeehong.com/food-ingredients/sauces-oils/curry-sauces-and-pastes/golden-curry-mild)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/japanese/golden-curry-chicken/assets/not-found.svg b/recipes/japanese/golden-curry-chicken/assets/not-found.svg
similarity index 100%
rename from public/recipes/japanese/golden-curry-chicken/assets/not-found.svg
rename to recipes/japanese/golden-curry-chicken/assets/not-found.svg
diff --git a/public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx b/recipes/japanese/golden-curry-chicken/golden-curry-chicken.md
similarity index 91%
rename from public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx
rename to recipes/japanese/golden-curry-chicken/golden-curry-chicken.md
index 39ba6eb..8cbf8a7 100644
--- a/public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx
+++ b/recipes/japanese/golden-curry-chicken/golden-curry-chicken.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 lbs chicken thigh fillets, cut into bite-sized pieces
 - 4 cups chicken stock, 1 additional as needed, or water
 - 1 large onion, chopped
@@ -31,8 +29,9 @@ displayPhoto: ""
 - 13 oz (1 can) coconut cream
 - 2 tablespoons vegetable oil
 - 1 carton S&B Golden Curry Mix
+:::
 
-## Instructions
+:::instructions
 1. In a large saucepan, heat **vegetable oil** over medium heat. Add **chicken** and cook until browned.
 2. Add **onion**, **carrots**, **bell pepper**, and **potatoes**. Stir-fry for about 5 minutes until fragrant.
 3. Add **chicken stock** and the **golden curry mix**. Bring to a boil.
@@ -40,14 +39,18 @@ displayPhoto: ""
 5. Stir in **coconut cream** and simmer for an additional 5 minutes.
 6. Serve hot over rice.
 The coconut cream settles to the bottom of the can, make sure to re-mix it before using.
+:::
 
-## Notes
+:::notes
 ### A different take on Golden Curry
 - The sweetness of the coconut cream makes this a very different dish than the normal way we make Curry Stew.
 
 ### A Note on the Coconut Cream
 - The coconut cream settles to the bottom of the can, make sure to re-mix it before using.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.recipetineats.com/golden-coconut-chicken-curry/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/meat/beef-bourguignon/assets/not-found.svg b/recipes/meat/beef-bourguignon/assets/not-found.svg
similarity index 100%
rename from public/recipes/meat/beef-bourguignon/assets/not-found.svg
rename to recipes/meat/beef-bourguignon/assets/not-found.svg
diff --git a/public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx b/recipes/meat/beef-bourguignon/beef-bourguignon.md
similarity index 93%
rename from public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx
rename to recipes/meat/beef-bourguignon/beef-bourguignon.md
index dea31d9..1691cc6 100644
--- a/public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx
+++ b/recipes/meat/beef-bourguignon/beef-bourguignon.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 pounds beef chuck, cut into 1-inch cubes
 - 1 bottle (750 ml) red wine (preferably Burgundy)
 - 2 cups beef stock
@@ -37,8 +35,9 @@ displayPhoto: ""
 - 8 ounces mushrooms, quartered
 - Salt and pepper to taste
 - Fresh parsley for garnish
+:::
 
-## Instructions
+:::instructions
 1. Preheat the oven to 325°F (160°C).
 2. In a large Dutch oven, cook the **bacon** over medium heat until crispy. Optionally add a small bit of water while cooking to ensure a better crisp. Remove and set aside, leaving the fat in the pot.
 3. Season the **beef** with **salt** and **pepper**, then dust with **flour**. In the same pot, brown the **beef** in batches until browned on all sides. Remove and set aside.
@@ -49,14 +48,18 @@ displayPhoto: ""
 8. Once cooked, remove from the oven, discard the **bouquet garni**, and adjust seasoning with **salt** and **pepper**.
 9. Serve hot, garnished with **fresh parsley**.
 Serve with crusty bread or over mashed potatoes for a hearty meal.
+:::
 
-## Notes
+:::notes
 ### Wine Selection
 - Use a good quality red wine for the best flavor. Burgundy is traditional, but any full-bodied red will work.
 
 ### Serving Suggestions
 - Serve with crusty bread or over mashed potatoes for a hearty meal.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://cafedelites.com/beef-bourguignon/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/meat/garlic-herb-butter-roast-turkey/assets/not-found.svg b/recipes/meat/garlic-herb-butter-roast-turkey/assets/not-found.svg
similarity index 100%
rename from public/recipes/meat/garlic-herb-butter-roast-turkey/assets/not-found.svg
rename to recipes/meat/garlic-herb-butter-roast-turkey/assets/not-found.svg
diff --git a/public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx b/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.md
similarity index 95%
rename from public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx
rename to recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.md
index 500495f..1c978d8 100644
--- a/public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx
+++ b/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Herb Butter
 - 4 ounces unsalted butter
 - 1 teaspoon chopped fresh thyme leaves
@@ -34,8 +32,9 @@ displayPhoto: ""
 - 6 sprigs thyme
 - 6 sprigs rosemary
 - 1/2 cup olive oil
+:::
 
-## Instructions
+:::instructions
 1. Preheat oven to 425°F. Lower oven shelf to the lowest part of your oven.
 2. Combine the **Herb Butter ingredients** in a bowl and mix well. Reserve half of the herb butter in the refrigerator for later.
 3. Line a large roasting pan with foil or parchment paper. Arrange the 4 halves of **garlic** cut-side down on the bottom of the pan with 4 sprigs each of **thyme** and **rosemary**, half of the **olive oil** and 1 slice of **lemon**.
@@ -49,14 +48,18 @@ displayPhoto: ""
 11. For extra crispy skin, broil or grill in the last 5-10 minutes, keeping your eye on it so it doesn't burn, until the skin is crispy and golden browned all over.
 12. Tent turkey with foil and allow it to rest for 20-30 minutes before carving and serving.
 13. Remove 2 1/2 cups of the liquid from the **pan juices** (top up with stock if you need too), strain and reserve for your gravy (see below).
+:::
 
-## Notes
+:::notes
 ### Scaling!
 - The recipe suggests using a 12 lb turkey, I have tried it with a 16 lb turkey with slightly scaled up measurements.
 
 ### Keep it Together
 - It's hard to get perfect cuts on the garlic. I found success by lightly sawing with a sharpened knife. When squeezing the garlic out try not to burn yourself.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://cafedelites.com/roast-turkey/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/meat/grilled-lemon-pepper-salmon/assets/not-found.svg b/recipes/meat/grilled-lemon-pepper-salmon/assets/not-found.svg
similarity index 100%
rename from public/recipes/meat/grilled-lemon-pepper-salmon/assets/not-found.svg
rename to recipes/meat/grilled-lemon-pepper-salmon/assets/not-found.svg
diff --git a/public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx b/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.md
similarity index 88%
rename from public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx
rename to recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.md
index 34c8322..fea1050 100644
--- a/public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx
+++ b/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.md
@@ -15,31 +15,34 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 Salmon fillet
 - 2 tbsp mayonnaise
 - 1 tbsp lemon pepper seasoning (to taste)
 - Freshly ground pepper (to taste)
 - 1 lemon (to taste)
+:::
 
-## Instructions
+:::instructions
 1. Find a metal grill tray, or grill basket.
 2. Place salmon skin-side down in the grill tray/basket.
 3. Mix **mayonnaise** and **lemon pepper seasoning** in a bowl to taste.
 4. Spread the **mayo mixture** over the salmon fillets in the grill tray/basket.
 5. On a grill preheated to 400/500F, grill salmon checking frequently until internal temperature reads 145F on an instant read thermometer. Alternatively, check the thickest portion of the fillet with a fork. If flaky, salmon is done.
 6. Serve with rice, and top with pepper and the juice of a lemon for best results.
+:::
 
-## Notes
+:::notes
 ### More Lemon Pepper
 - Use a good amount of lemon pepper, but be careful of making it too lemony. Extra pepper is usually fine.
+:::
 
-## References
+:::references
 - Idk talk to my mom...
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/meat/jamaican-jerk-chicken/assets/not-found.svg b/recipes/meat/jamaican-jerk-chicken/assets/not-found.svg
similarity index 100%
rename from public/recipes/meat/jamaican-jerk-chicken/assets/not-found.svg
rename to recipes/meat/jamaican-jerk-chicken/assets/not-found.svg
diff --git a/public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx b/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.md
similarity index 90%
rename from public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx
rename to recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.md
index e1e141c..ac45957 100644
--- a/public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx
+++ b/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 medium onion, coarsely chopped
 - 3 medium scallions, chopped
 - 2 Scotch bonnet chiles, chopped
@@ -35,8 +33,9 @@ displayPhoto: ""
 - 1/2 cup soy sauce
 - 1 tablespoon vegetable oil
 - 2 (3 1/2 to 4-pound) chickens, quartered
+:::
 
-## Instructions
+:::instructions
 1. In a food processor, combine the **onion**, **scallions**, **chiles**, **garlic**, **five-spice powder**, **allspice**, **pepper**, **thyme**, **nutmeg**, and **salt**; process to a coarse paste.
 2. With the machine on, add the **soy sauce** and **oil** in a steady stream.
 3. Pour the marinade into a large, shallow dish, add the **chicken**, and turn to coat.
@@ -44,8 +43,10 @@ displayPhoto: ""
 5. Light a grill and bring to medium.
 6. Grill the chicken over a medium-hot fire, turning occasionally, until well browned and cooked through, 35 to 40 minutes or 165 internal temp. Cover the grill for a smokier flavor.
 7. Transfer the chicken to a platter and serve.
+:::
 
-## Notes
-## References
+:::references
 - Reference Recipe **[HERE](https://www.foodandwine.com/recipes/jamaican-jerk-chicken)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/meat/ribs-instant-pot/assets/not-found.svg b/recipes/meat/ribs-instant-pot/assets/not-found.svg
similarity index 100%
rename from public/recipes/meat/ribs-instant-pot/assets/not-found.svg
rename to recipes/meat/ribs-instant-pot/assets/not-found.svg
diff --git a/public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx b/recipes/meat/ribs-instant-pot/ribs-instant-pot.md
similarity index 93%
rename from public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx
rename to recipes/meat/ribs-instant-pot/ribs-instant-pot.md
index c6ef248..14dd268 100644
--- a/public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx
+++ b/recipes/meat/ribs-instant-pot/ribs-instant-pot.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Ribs
 - 1 rack baby back ribs or spare ribs (about 1 1/2 to 2 pounds)
 - 1 cup water
@@ -37,8 +35,9 @@ displayPhoto: ""
 - 1 teaspoon garlic powder
 - 1 teaspoon onion powder
 - 1/4 teaspoon cayenne pepper
+:::
 
-## Instructions
+:::instructions
 1. Rinse the ribs and pat them dry. If your ribs still have the thin, shiny membrane on the back, remove it.
 2. In a small bowl, stir together the **brown sugar**, **paprika**, **black pepper**, **salt**, **chili powder**, **garlic powder**, **onion powder**, and **cayenne**.
 3. Rub it all over the ribs, generously coating all of the sides.
@@ -49,11 +48,15 @@ displayPhoto: ""
 8. After the ribs finish, allow the pressure to release naturally for 5 minutes, then vent to release all of the remaining pressure.
 9. Line a large baking sheet with aluminum foil. Transfer the cooked ribs to the foil, then brush liberally with **barbecue sauce**.
 10. Place under the broiler just until the sauce begins to caramelize, about 2 minutes.
+:::
 
-## Notes
+:::notes
 ### Homemade is Best
 - Always worth it to make your own barbecue sauce & rub!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.wellplated.com/instant-pot-ribs/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/meat/turkey-gravy/assets/not-found.svg b/recipes/meat/turkey-gravy/assets/not-found.svg
similarity index 100%
rename from public/recipes/meat/turkey-gravy/assets/not-found.svg
rename to recipes/meat/turkey-gravy/assets/not-found.svg
diff --git a/public/recipes/meat/turkey-gravy/turkey-gravy.mdx b/recipes/meat/turkey-gravy/turkey-gravy.md
similarity index 88%
rename from public/recipes/meat/turkey-gravy/turkey-gravy.mdx
rename to recipes/meat/turkey-gravy/turkey-gravy.md
index 773fe28..d4c6330 100644
--- a/public/recipes/meat/turkey-gravy/turkey-gravy.mdx
+++ b/recipes/meat/turkey-gravy/turkey-gravy.md
@@ -15,28 +15,31 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 1/4 - 2 1/2 cups pan juices (top up with chicken stock if needed)
 - 1/4 cup butter
 - 1/4 cup flour
 - 1 teaspoon worcestershire sauce
 - Kosher salt and freshly ground pepper (if needed)
+:::
 
-## Instructions
+:::instructions
 1. Melt the **butter** in a small pot over low-medium heat. Whisk in the **flour** and allow to cook for about a minute or two, while whisking.
 2. Pour in 1/2 cup of the **pan juices** and whisk until it forms a paste. Add remaining liquid in 1/2 cup increments, whisking in between, until the gravy is smooth.
 3. Allow to simmer over medium heat until thickened. Take off heat, stir in **worcestershire sauce** and season with **salt** and **pepper** (if needed). The gravy will continue to thicken as it cools.
+:::
 
-## Notes
+:::notes
 ### Use it All
 - Make sure to scoop up both drippings and fat when gathering the pan juices. All are important!
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://cafedelites.com/turkey-gravy/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/birria/assets/not-found.svg b/recipes/mexican/birria/assets/not-found.svg
similarity index 100%
rename from public/recipes/mexican/birria/assets/not-found.svg
rename to recipes/mexican/birria/assets/not-found.svg
diff --git a/public/recipes/mexican/birria/birria.mdx b/recipes/mexican/birria/birria.md
similarity index 94%
rename from public/recipes/mexican/birria/birria.mdx
rename to recipes/mexican/birria/birria.md
index 561beef..b623e8b 100644
--- a/public/recipes/mexican/birria/birria.mdx
+++ b/recipes/mexican/birria/birria.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Meat Prep
 - 4 to 5 pounds pork, cut into large chunks (Can substitute beef or lamb)
 - ½ tablespoon kosher salt
@@ -43,23 +41,28 @@ displayPhoto: ""
 - 1 teaspoon ground cumin
 - 1 teaspoon dried Mexican oregano
 - ½ teaspoon ground cloves
+:::
 
-## Instructions
+:::instructions
 1. Season the meat with **salt** and **pepper**. Heat **olive oil** in a large pot over medium-high heat and sear the meat on all sides until browned.
 2. In a separate pot, combine **guajillo**, **ancho**, and **árbol chiles**, **tomatoes**, **onion**, **cinnamon stick**, **bay leaves**, and **peppercorns**. Cover with water and boil for 10 minutes.
 3. Transfer the softened ingredients to a blender, add 1 cup of the cooking water, **beef broth**, **vinegar**, **garlic**, **cumin**, **oregano**, and **cloves**. Blend until smooth.
 4. Strain the blended sauce into the pot with the seared meat. Stir to combine and bring to a boil. Reduce heat, cover, and simmer for 3-3.5 hours until the meat is tender.
 5. Shred the meat and store in a new container. Add consumé to the meat as needed to keep moist. Save the remaining consumé for another batch or for making tacos.
 Straining after blending is important for a smooth texture in the consumé. However, leaving it lightly chunky is not a bad thing.
+:::
 
-## Notes
+:::notes
 ### Ingredient Sourcing
 - My local produce store carries bags of dried chilies - whole dried are the best. Purchasing online is a decent alternative for high quality chilies. 
 - Also, finding a decently fatty chuck roast is key for a quality consumé.
 
 ### For the best Consumé
 - Straining after blending is important for a smooth texture in the consumé. However, leaving it lightly chunky is not a bad thing.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.isabeleats.com/authentic-birria/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/creamy-jalapeno-sauce/assets/creamy-jalapeno-sauce.jpg b/recipes/mexican/creamy-jalapeno-sauce/assets/creamy-jalapeno-sauce.jpg
similarity index 100%
rename from public/recipes/mexican/creamy-jalapeno-sauce/assets/creamy-jalapeno-sauce.jpg
rename to recipes/mexican/creamy-jalapeno-sauce/assets/creamy-jalapeno-sauce.jpg
diff --git a/public/recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.mdx b/recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.md
similarity index 89%
rename from public/recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.mdx
rename to recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.md
index d41a7ed..39b69e2 100644
--- a/public/recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.mdx
+++ b/recipes/mexican/creamy-jalapeno-sauce/creamy-jalapeno-sauce.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/creamy-jalapeno-sauce.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Creamy Jalapeno Sauce](./assets/creamy-jalapeno-sauce.jpg "Creamy Jalapeno Sauce")
+:::
 
-## Photos
-![Creamy Jalapeno Sauce](./assets/creamy-jalapeno-sauce.jpg)
-*Creamy Jalapeno Sauce*
-
-## Ingredients
+:::ingredients
 - 1 12oz jar of pickled jalapeno slices (will not use the whole thing)
 - 1 teaspoon paprika
 - 1/2 teaspoon ground cumin
@@ -32,17 +30,22 @@ displayPhoto: "./assets/creamy-jalapeno-sauce.jpg"
 - 1/4 teaspoon cayenne pepper, or more for a spicier sauce
 - 1/2 cup mayonnaise
 - 1/2 cup sour cream
+:::
 
-## Instructions
+:::instructions
 1. Add the **pickled jalapeno slices** along with some of the liquid to a blender. Blend until completely smooth. It should be smooth and not chunky.
 2. In a mixing bowl, combine the **mayonnaise**, **sour cream**, **paprika**, **cumin**, **garlic powder**, **onion powder**, **chili powder**, **cayenne powder**, and **salt**. Stir until smooth and combined.
 3. Add 3-7 tablespoons of the blended jalapeno puree to the bowl and mix it in. Add more to taste/consistency.
 4. Move to an airtight container and wait at least an hour for the flavors to develop. It will get more pungent the longer you leave it. Will keep for around a week in the fridge.
+:::
 
-## Notes
+:::notes
 ### Ingredient Sourcing
 - Mt Olive sells both normal and sweet jalapeno slices, you can make your choice. I used the normal ones.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.youtube.com/watch?v=-q95xwVy94Y)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/elote/assets/elote.jpg b/recipes/mexican/elote/assets/elote.jpg
similarity index 100%
rename from public/recipes/mexican/elote/assets/elote.jpg
rename to recipes/mexican/elote/assets/elote.jpg
diff --git a/public/recipes/mexican/elote/elote.mdx b/recipes/mexican/elote/elote.md
similarity index 94%
rename from public/recipes/mexican/elote/elote.mdx
rename to recipes/mexican/elote/elote.md
index c1d7eb8..72dc52d 100644
--- a/public/recipes/mexican/elote/elote.mdx
+++ b/recipes/mexican/elote/elote.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/elote.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Elote](./assets/elote.jpg "Elote")
+:::
 
-## Photos
-![Elote](./assets/elote.jpg)
-*Elote*
-
-## Ingredients
+:::ingredients
 - 6-8 medium ears of corn, husks removed
 - 1/2 cup mayonnaise
 - 1/2 cup Mexican crema or sour cream
@@ -30,8 +28,9 @@ displayPhoto: "./assets/elote.jpg"
 - 1 medium clove garlic, minced
 - 1/2 teaspoon chili powder (ancho or guajillo recommended), plus more for serving
 - 1 lime, cut into wedges
+:::
 
-## Instructions
+:::instructions
 1. Preheat a grill to medium-high heat.
 2. While the grill heats, prepare the sauce. In a medium bowl, combine the **mayonnaise**, **crema** (or sour cream), 1/2 cup of **cotija cheese**, minced **cilantro**, **garlic**, and 1/2 teaspoon of **chili powder**. Mix well until combined.
 3. Grill the **corn**, turning occasionally, until it's cooked through and charred in spots, which should take about 10 minutes.
@@ -39,8 +38,9 @@ displayPhoto: "./assets/elote.jpg"
 5. Sprinkle the coated corn with additional **cotija cheese** and a dusting of **chili powder**.
 6. Serve immediately with **lime** wedges for squeezing over the corn just before eating.
 You can achieve a similar result by broiling the corn in your oven or carefully charring it over a gas stove flame. Be sure to turn it frequently for even cooking and char.
+:::
 
-## Notes
+:::notes
 ### Ingredient Selection
 - Cotija is a salty, crumbly Mexican cheese. If you can't find it, a dry feta or even grated Parmesan can be used as a substitute, though the flavor will be slightly different.
 - Lime is great on top but don't add it during the mixing process. It makes the elote a bit funky if meal prepping or sitting out a long time.
@@ -51,7 +51,10 @@ You can achieve a similar result by broiling the corn in your oven or carefully
 
 ### No Grill? No Problem!
 - You can achieve a similar result by broiling the corn in your oven or carefully charring it over a gas stove flame. Be sure to turn it frequently for even cooking and char.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.seriouseats.com/mexican-street-corn-elotes-recipe)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/fajita-vegetables/assets/fajita-vegetables.jpg b/recipes/mexican/fajita-vegetables/assets/fajita-vegetables.jpg
similarity index 100%
rename from public/recipes/mexican/fajita-vegetables/assets/fajita-vegetables.jpg
rename to recipes/mexican/fajita-vegetables/assets/fajita-vegetables.jpg
diff --git a/public/recipes/mexican/fajita-vegetables/fajita-vegetables.mdx b/recipes/mexican/fajita-vegetables/fajita-vegetables.md
similarity index 95%
rename from public/recipes/mexican/fajita-vegetables/fajita-vegetables.mdx
rename to recipes/mexican/fajita-vegetables/fajita-vegetables.md
index 13e3f4e..be29e18 100644
--- a/public/recipes/mexican/fajita-vegetables/fajita-vegetables.mdx
+++ b/recipes/mexican/fajita-vegetables/fajita-vegetables.md
@@ -15,13 +15,12 @@ display: true
 displayPhoto: "./assets/fajita-vegetables.jpg"
 ---
 
-<RecipeCard>
-
-## Photos
+:::photos
 ![Fajita Vegetables](./assets/fajita-vegetables.jpg)
 Fajita Vegetables
+:::
 
-## Ingredients
+:::ingredients
 - 1 medium onion, sliced into slivers
 - 3 bell peppers (mix of red, yellow, green, or orange), sliced into strips
 - 3 tablespoon olive oil
@@ -32,8 +31,9 @@ Fajita Vegetables
 - 1/2 teaspoon black pepper
 - 1/2 teaspoon cumin
 - 3/4 teaspoon salt
+:::
 
-## Instructions
+:::instructions
 1. Slice the **onion** into slivers and the **bell peppers** into thin strips.
 2. In a small bowl, whisk together 1 tablespoon **olive oil**, **lime juice**, **chili powder**, **smoked paprika**, **onion powder**, **black pepper**, **cumin**, and 1/2 teaspoon **salt**.
 3. Toss the sliced **peppers** and **onions** with the seasoning mixture until evenly coated.
@@ -41,12 +41,16 @@ Fajita Vegetables
 5. Add the **onions** first and cook 2 minutes until they begin to soften.
 6. Add the **peppers** along with the remaining 1/4 teaspoon **salt**. Cook 3-4 minutes, stirring occasionally, until the vegetables are tender-crisp with some char on the edges.
 7. Squeeze additional **lime juice** over the top and serve hot.
+:::
 
-## Notes
+:::notes
 ### Tips
 - **Tender-crisp is the goal**: don't overcook — the peppers should still have a bite.
 - **Hot pan, hot oil**: a ripping-hot skillet gives the char marks that make fajitas taste like fajitas.
+:::
 
-## References
+:::references
 - Adapted from **[Spend With Pennies - Easy Chicken Fajitas](https://www.spendwithpennies.com/easy-chicken-fajitas/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/horchata/assets/not-found.svg b/recipes/mexican/horchata/assets/not-found.svg
similarity index 100%
rename from public/recipes/mexican/horchata/assets/not-found.svg
rename to recipes/mexican/horchata/assets/not-found.svg
diff --git a/public/recipes/mexican/horchata/horchata.mdx b/recipes/mexican/horchata/horchata.md
similarity index 92%
rename from public/recipes/mexican/horchata/horchata.mdx
rename to recipes/mexican/horchata/horchata.md
index cc6a365..fc06d2b 100644
--- a/public/recipes/mexican/horchata/horchata.mdx
+++ b/recipes/mexican/horchata/horchata.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 cup uncooked white rice
 - 2 cinnamon sticks
 - 12 oz can evaporated milk
@@ -30,8 +28,9 @@ displayPhoto: ""
 - Sugar to taste
 - Ground cinnamon, for garnish (optional)
 - 1/2 teaspoon vanilla extract (optional)
+:::
 
-## Instructions
+:::instructions
 1. Rinse the **rice** under cold water. In a bowl, combine **rice**, **cinnamon sticks**, and 4 cups of **warm water**. Cover and refrigerate at least 4 hours or overnight.
 2. Remove most of the **cinnamon sticks**, leaving a few small pieces.
 3. Blend the soaked mixture in two batches until very smooth, about 3–4 minutes per batch.
@@ -39,14 +38,18 @@ displayPhoto: ""
 5. Stir in the **evaporated milk**, **sweetened condensed milk**, **vanilla** (if using), and the remaining 4 cups **water**. Adjust sweetness with **sugar** to taste.
 6. Chill thoroughly, then stir and serve over ice. Garnish with **ground cinnamon**, if desired.
 Heed the instructions and blend in batches. Water easily escapes from the blender or food processor and this stuff gets everywhere.
+:::
 
-## Notes
+:::notes
 ### Soaking
 - It is worth the time to soak the cinnamon and rice, helping you pull out more flavor and end with a product that is less lightly flavored water and more of a thicker drink.
 
 ### Blending
 - Heed the instructions and blend in batches. Water easily escapes from the blender or food processor and this stuff gets everywhere.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.muydelish.com/traditional-mexican-horchata/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/mexican-rice/assets/not-found.svg b/recipes/mexican/mexican-rice/assets/not-found.svg
similarity index 100%
rename from public/recipes/mexican/mexican-rice/assets/not-found.svg
rename to recipes/mexican/mexican-rice/assets/not-found.svg
diff --git a/public/recipes/mexican/mexican-rice/mexican-rice.mdx b/recipes/mexican/mexican-rice/mexican-rice.md
similarity index 92%
rename from public/recipes/mexican/mexican-rice/mexican-rice.mdx
rename to recipes/mexican/mexican-rice/mexican-rice.md
index 98cb7d3..9b606b7 100644
--- a/public/recipes/mexican/mexican-rice/mexican-rice.mdx
+++ b/recipes/mexican/mexican-rice/mexican-rice.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 tablespoons vegetable oil
 - 1 cup uncooked long-grain white rice
 - 1 (8 ounce) can tomato sauce
@@ -30,8 +28,9 @@ displayPhoto: ""
 - 1/2 teaspoon ground cumin
 - 1/4 teaspoon garlic powder
 - 1/4 teaspoon chili powder
+:::
 
-## Instructions
+:::instructions
 1. Heat the **vegetable oil** in a large saucepan or skillet with a lid over medium heat.
 2. Add the **rice** and cook, stirring constantly, until the grains are lightly golden brown. This toasting step is key for flavor and texture.
 3. Carefully stir in the **tomato sauce**, **chicken broth**, **salt**, **cumin**, **garlic powder**, and **chili powder**.
@@ -39,14 +38,18 @@ displayPhoto: ""
 5. Cook for 20 to 25 minutes, or until the rice is tender and all the liquid has been absorbed. Avoid lifting the lid while it simmers.
 6. Fluff the rice with a fork before serving.
 This rice is the perfect accompaniment to tacos, burritos, enchiladas, or any grilled meat. Garnish with fresh cilantro for extra flavor and color.
+:::
 
-## Notes
+:::notes
 ### Vegetarian Option
 - For a vegetarian version, simply substitute the chicken broth with vegetable broth. The result will be just as delicious.
 
 ### Serving Suggestion
 - This rice is the perfect accompaniment to tacos, burritos, enchiladas, or any grilled meat. Garnish with fresh cilantro for extra flavor and color.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.allrecipes.com/recipe/27072/mexican-rice-ii/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/pinto-beans/assets/not-found.svg b/recipes/mexican/pinto-beans/assets/not-found.svg
similarity index 100%
rename from public/recipes/mexican/pinto-beans/assets/not-found.svg
rename to recipes/mexican/pinto-beans/assets/not-found.svg
diff --git a/public/recipes/mexican/pinto-beans/pinto-beans.mdx b/recipes/mexican/pinto-beans/pinto-beans.md
similarity index 86%
rename from public/recipes/mexican/pinto-beans/pinto-beans.mdx
rename to recipes/mexican/pinto-beans/pinto-beans.md
index fefb49b..104100c 100644
--- a/public/recipes/mexican/pinto-beans/pinto-beans.mdx
+++ b/recipes/mexican/pinto-beans/pinto-beans.md
@@ -15,29 +15,32 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 cups uncooked pinto beans
 - 8 cups water
 - 1 small yellow onion, diced
 - 1 teaspoon salt
 - 1/4 teaspoon ground black pepper
 - 1 bay leaf (optional)
+:::
 
-## Instructions
+:::instructions
 1. Rinse the **pinto beans**.
 2. Add the rinsed **pinto beans**, **water**, diced **onions**, **salt**, **pepper**, and **bay leaf** to an instant pot.
 3. Set the instant pot to **Beans/Stew** setting, and cook for 32 minutes on high pressure. If cooking conventually simmer on a medium-low heat until the beans are the desired consistency.
+:::
 
-## Notes
+:::notes
 ### Ratios
 - In general, 1 cup of beans needs 4 cups of water to avoid the cooked beans drying out.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.rachelcooks.com/instant-pot-pinto-beans/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/mexican/taco-bell-meat/assets/crunchwrap.jpg b/recipes/mexican/taco-bell-meat/assets/crunchwrap.jpg
similarity index 100%
rename from public/recipes/mexican/taco-bell-meat/assets/crunchwrap.jpg
rename to recipes/mexican/taco-bell-meat/assets/crunchwrap.jpg
diff --git a/public/recipes/mexican/taco-bell-meat/assets/taco-bell-meat.jpg b/recipes/mexican/taco-bell-meat/assets/taco-bell-meat.jpg
similarity index 100%
rename from public/recipes/mexican/taco-bell-meat/assets/taco-bell-meat.jpg
rename to recipes/mexican/taco-bell-meat/assets/taco-bell-meat.jpg
diff --git a/public/recipes/mexican/taco-bell-meat/taco-bell-meat.mdx b/recipes/mexican/taco-bell-meat/taco-bell-meat.md
similarity index 86%
rename from public/recipes/mexican/taco-bell-meat/taco-bell-meat.mdx
rename to recipes/mexican/taco-bell-meat/taco-bell-meat.md
index 6aeb4c2..d6305af 100644
--- a/public/recipes/mexican/taco-bell-meat/taco-bell-meat.mdx
+++ b/recipes/mexican/taco-bell-meat/taco-bell-meat.md
@@ -15,34 +15,36 @@ display: true
 displayPhoto: "./assets/taco-bell-meat.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Taco Bell Meat](./assets/taco-bell-meat.jpg "Taco Bell Meat")
 
-## Photos
-![Taco Bell Meat](./assets/taco-bell-meat.jpg)
-*Taco Bell Meat*
+![Homemade Crunchwraps](./assets/crunchwrap.jpg "Homemade Crunchwraps")
+:::
 
-![Homemade Crunchwraps](./assets/crunchwrap.jpg)
-*Homemade Crunchwraps*
-
-## Ingredients
+:::ingredients
 - 2 lbs ground beef
 - 2 2/3 cups water or beef broth, divided
 - 5 tablespoons taco seasoning
 - 2 tablespoons cornstarch
 - 1 teaspoon unsweetened dark cocoa powder (optional, for color)
 - Salt, to taste
+:::
 
-## Instructions
+:::instructions
 1. In a large bowl, combine the **ground beef**, 1 2/3 cups **water**, **taco seasoning**, **cornstarch**, and **cocoa powder**. Mix by hand or with a hand mixer until it forms a thick, sticky batter-like consistency.
 2. Grease a large nonstick skillet or Dutch oven and add the meat mixture along with the remaining 2/3 cup **water**.
 3. Cover and cook over medium-high heat for 5 minutes.
 4. Uncover and break the meat apart fully with a spatula. Reduce heat to low and simmer 20-30 minutes, stirring occasionally, until the liquid has mostly evaporated and the mixture is thick and saucy.
 5. Taste and adjust with **salt** as needed.
+:::
 
-## Notes
+:::notes
 ### Meat Quality 
 Slightly fatty meat helps the cornstarch slurry thicken the meat.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.favfamilyrecipes.com/taco-bell-meat/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/salad/caesar-salad-dressing/assets/not-found.svg b/recipes/salad/caesar-salad-dressing/assets/not-found.svg
similarity index 100%
rename from public/recipes/salad/caesar-salad-dressing/assets/not-found.svg
rename to recipes/salad/caesar-salad-dressing/assets/not-found.svg
diff --git a/public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx b/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.md
similarity index 88%
rename from public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx
rename to recipes/salad/caesar-salad-dressing/caesar-salad-dressing.md
index 82f479a..bf8f144 100644
--- a/public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx
+++ b/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 2 small garlic cloves, minced
 - 1 tsp anchovy paste or 2 fillets
 - 1 tsp dijon mustard
@@ -30,19 +28,24 @@ displayPhoto: ""
 - 1/2 cup parmigiano-reggiano
 - 1/4 tsp salt
 - 1/4 tsp freshly ground black pepper
+:::
 
-## Instructions
+:::instructions
 1. In a medium bowl, whisk together the **garlic**, **anchovies**, **lemon juice**, **dijon mustard**, and **worcestershire sauce**.
 2. Add the **mayonnaise**, **parmigiano-reggiano**, **salt**, and **pepper**, and whisk until well combined.
 3. Taste and adjust to your liking.
+:::
 
-## Notes
+:::notes
 ### Anchovy Prep
 - If using anchovy fillets, it's a good idea to smear them into a paste using the side of a knife to break down any bones.
 
 ### Healthier Tastes Better
 - Using less mayonnaise makes for a thinner dressing, and in my opinion less mayo flavor is better.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.onceuponachef.com/recipes/caesar-salad-dressing.html)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/sides/cauliflower-mash/assets/not-found.svg b/recipes/sides/cauliflower-mash/assets/not-found.svg
similarity index 100%
rename from public/recipes/sides/cauliflower-mash/assets/not-found.svg
rename to recipes/sides/cauliflower-mash/assets/not-found.svg
diff --git a/public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx b/recipes/sides/cauliflower-mash/cauliflower-mash.md
similarity index 93%
rename from public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx
rename to recipes/sides/cauliflower-mash/cauliflower-mash.md
index a22c205..b48fbcc 100644
--- a/public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx
+++ b/recipes/sides/cauliflower-mash/cauliflower-mash.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 large head cauliflower, cut into florets (about 2 to 2.5 lb)
 - 2 tablespoons unsalted butter (or olive oil)
 - 2 cloves garlic, minced (or 1 teaspoon garlic powder)
@@ -30,8 +28,9 @@ displayPhoto: ""
 - 1/4 cup finely grated Parmesan (optional)
 - Kosher salt and freshly ground black pepper, to taste
 - Chives or parsley, finely chopped (optional, for garnish)
+:::
 
-## Instructions
+:::instructions
 1. Trim and cut the **cauliflower** into medium florets.
 2. Cook until very tender: steam 10–12 minutes (preferred) or boil 8–10 minutes. The florets should crush easily with tongs.
 3. Drain thoroughly in a colander and let steam‑dry 3–5 minutes. For extra dryness, return to the empty pot over low heat for 1–2 minutes, stirring.
@@ -39,14 +38,18 @@ displayPhoto: ""
 5. In a food processor or with an immersion blender, combine the hot **cauliflower**, melted **butter/garlic**, **cream cheese** (or sour cream/yogurt), and half of the **milk/cream**. Blend until smooth and silky, scraping as needed.
 6. Add **Parmesan** (if using), **salt**, and **pepper**. Pulse to combine. Adjust thickness with more warm **milk/cream**. Taste and season.
 7. Transfer to a bowl, garnish with **chives/parsley**, and serve hot.
+:::
 
-## Notes
+:::notes
 ### Drain Well
 - Waterlogged cauliflower makes a loose mash. After cooking, let the florets steam‑dry and drive off moisture for a fluffier, creamier texture.
 
 ### Make It Yours
 - For ultra‑smooth mash, strain through a fine sieve. For dairy‑free, use olive oil and unsweetened almond milk. Add‑ins: roasted garlic, horseradish, or a spoon of sour cream for tang.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.seriouseats.com/cauliflower-puree-recipe)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/sides/pickled-red-onions/assets/not-found.svg b/recipes/sides/pickled-red-onions/assets/not-found.svg
similarity index 100%
rename from public/recipes/sides/pickled-red-onions/assets/not-found.svg
rename to recipes/sides/pickled-red-onions/assets/not-found.svg
diff --git a/public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx b/recipes/sides/pickled-red-onions/pickled-red-onions.md
similarity index 91%
rename from public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx
rename to recipes/sides/pickled-red-onions/pickled-red-onions.md
index 9135b3a..6dedff0 100644
--- a/public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx
+++ b/recipes/sides/pickled-red-onions/pickled-red-onions.md
@@ -17,26 +17,26 @@ displayPhoto: ""
 
 These are a great topping for ramen, sandwiches, charcuterie, salads, or anything that could use a fermented kick!
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 large red onion, peeled and very thinly sliced
 - 3/4 cup apple cider vinegar
 - 1/4 cup water
 - 1 teaspoon fine sea salt
 - 1-2 tablespoons sweetener (maple syrup, honey, or sugar)
+:::
 
-## Instructions
+:::instructions
 1. Mix the **vinegar**, **water**, **salt**, and **sweetener** in a heated saucepan. Cook over medium-high heat until simmering. Microwave works as well.
 2. Stuff thinly-sliced **onions** into a jar or container with a lid. You can get way more in there than you think if you really stuff them.
 3. Pour the hot vinegar mixture over the onions and seal. Shake briefly to ensure full coverage. You can additionally shake periodically if you want.
 4. Marinate for as little as 30 minutes and up to 2 weeks before consuming. You can press onions down with a spoon to submerge after a while if they stick out of the liquid.
+:::
 
-## Notes
+:::notes
 ### As Thin as Possible
 - The onions will pack a lot better, and ferment more if they are sliced super thin. Use a mandoline if one is available.
 
@@ -45,7 +45,10 @@ These are a great topping for ramen, sandwiches, charcuterie, salads, or anythin
 
 ### Mix Well!
 - Mix additionally after bottling to ensure proper coverage.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.gimmesomeoven.com/quick-pickled-red-onions/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/sides/sous-vide-mashed-potatoes/assets/not-found.svg b/recipes/sides/sous-vide-mashed-potatoes/assets/not-found.svg
similarity index 100%
rename from public/recipes/sides/sous-vide-mashed-potatoes/assets/not-found.svg
rename to recipes/sides/sous-vide-mashed-potatoes/assets/not-found.svg
diff --git a/public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx b/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.md
similarity index 92%
rename from public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx
rename to recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.md
index 937d182..6490769 100644
--- a/public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx
+++ b/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 - 1 lbs Yukon Gold potatoes (enough cubed to fill 2/3 of a gallon ziploc bag)
 - 2 tbsp / 1/2 oz unsalted butter
 - 1/4 cup cream cheese (alternate: sour cream)
@@ -29,8 +27,9 @@ displayPhoto: ""
 - 1/2 cup milk
 - 1 tbsp rosemary, chopped fine
 - salt and pepper to taste
+:::
 
-## Instructions
+:::instructions
 1. Cube the **potatoes**, optionally leaving the skin on. Optionally soak in water to get the starch out.
 2. Load the potatoes into a sous vide bag. Fill it up no more than 3/4 of the way full, ideally closer to 1/2.
 3. Add the **butter**, **cream cheese**/**sour cream**, **garlic powder**, **salt**, **pepper**, **rosemary**, and **milk** to the bag.
@@ -40,14 +39,18 @@ displayPhoto: ""
 7. Take bags out of the water and let cool for 10 minutes.
 8. Hand mash in the bag, or pour into a bowl and use forks.
 9. Pour/plate into bowl. Sprinkle with garnish if available.
+:::
 
-## Notes
+:::notes
 ### No Pressure!
 - Adjust to what you know you like! Measurements can be adjusted after cooking if needed.
 
 ### Don't Poke the Bag!
 - The only way to mess up is to create a hole in the bag. This happens when the rosemary branches poke the bag. Make sure to chop up the rosemary before putting in the bag.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.youtube.com/watch?app=desktop&v=WRrtw9NwcIU&t=72s)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/soup/chicken-noodle-soup/assets/not-found.svg b/recipes/soup/chicken-noodle-soup/assets/not-found.svg
similarity index 100%
rename from public/recipes/soup/chicken-noodle-soup/assets/not-found.svg
rename to recipes/soup/chicken-noodle-soup/assets/not-found.svg
diff --git a/public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx b/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.md
similarity index 94%
rename from public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx
rename to recipes/soup/chicken-noodle-soup/chicken-noodle-soup.md
index 94c504c..7e3475d 100644
--- a/public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx
+++ b/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.md
@@ -17,13 +17,11 @@ displayPhoto: ""
 
 A comforting chicken noodle soup perfect for rainy or sick days. Made easy in the Instant Pot but can be adapted for stovetop cooking
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Main Ingredients
 - 2 tablespoons unsalted butter
 - 1 large onion, chopped
@@ -38,8 +36,9 @@ A comforting chicken noodle soup perfect for rainy or sick days. Made easy in th
 - 2 pounds chicken (usually one Safeway or Costco chicken)
 - 4 cups water
 - 2 cups uncooked egg noodles
+:::
 
-## Instructions
+:::instructions
 1. Turn your Instant Pot to the saute setting.
 2. Add the **butter** and cook until melted. Add the **onion**, **carrots**, and **celery** and saute for 3 minutes until the **onion** softens and becomes translucent.
 3. Season with **salt** and **pepper**, then add the **thyme**, **parsley**, **oregano**, and **chicken bouillon**. Stir to combine.
@@ -49,8 +48,9 @@ A comforting chicken noodle soup perfect for rainy or sick days. Made easy in th
 7. Remove the **chicken** pieces from the soup and shred with two forks.
 8. Add the **noodles** to the soup and set the Instant Pot to the saute setting again. Cook for another 6 minutes uncovered, or until the **noodles** are cooked.
 9. Turn off the Instant Pot. Add the shredded **chicken** back to the pot, taste for seasoning and adjust as necessary. Garnish with additional **parsley** if preferred.
+:::
 
-## Notes
+:::notes
 ### Meal Prep Tips
 - **Make it last**: This recipe can make nearly a whole week of soup. Double it if you're feeling dangerous.
 - **Noodle absorption**: If doing meal prep with lots of noodles or macaroni, they tend to soak up the broth. Double the water and broth amounts if you want it to keep in the fridge and retain liquid, versus becoming more of a soup-casserole.
@@ -60,7 +60,10 @@ A comforting chicken noodle soup perfect for rainy or sick days. Made easy in th
 
 ### Stovetop Adaptation
 This recipe can be made on the stovetop by simmering the ingredients in a large pot for about 30-40 minutes until the chicken is cooked through, then following the same steps for shredding and adding noodles.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.jocooks.com/recipes/instant-pot-chicken-noodle-soup/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/soup/chili/assets/chili.jpg b/recipes/soup/chili/assets/chili.jpg
similarity index 100%
rename from public/recipes/soup/chili/assets/chili.jpg
rename to recipes/soup/chili/assets/chili.jpg
diff --git a/public/recipes/soup/chili/chili.mdx b/recipes/soup/chili/chili.md
similarity index 94%
rename from public/recipes/soup/chili/chili.mdx
rename to recipes/soup/chili/chili.md
index 0c82cba..8fce81f 100644
--- a/public/recipes/soup/chili/chili.mdx
+++ b/recipes/soup/chili/chili.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: "./assets/chili.jpg"
 ---
 
-<RecipeCard>
+:::photos
+![Chili](./assets/chili.jpg "Chili")
+:::
 
-## Photos
-![Chili](./assets/chili.jpg)
-*Chili*
-
-## Ingredients
+:::ingredients
 - 2 lbs lean ground beef
 - 1 medium onion, diced
 - 1 jalapeño, seeded and finely diced
@@ -37,15 +35,17 @@ displayPhoto: "./assets/chili.jpg"
 - 1 tablespoon tomato paste
 - 1 tablespoon brown sugar (optional)
 - Salt and black pepper, to taste
+:::
 
-## Instructions
+:::instructions
 1. Combine **ground beef** with 1 1/2 tablespoons of the **chili powder** and mix well.
 2. In a large pot over medium-high heat, brown the seasoned **ground beef** with the **onion**, **jalapeño**, **bell pepper**, and **garlic**. Break up the meat as it cooks. Drain any excess fat.
 3. Add the remaining **chili powder**, **cumin**, **crushed tomatoes**, **diced tomatoes**, **kidney beans**, **beef broth**, **beer**, **tomato paste**, and **brown sugar**. Stir to combine.
 4. Bring to a boil, then reduce heat and simmer uncovered for 45-60 minutes, stirring occasionally, until the chili has thickened to your liking.
 5. Season with **salt** and **pepper** to taste. Serve topped with cheddar cheese, sour cream, green onions, or cilantro.
+:::
 
-## Notes
+:::notes
 ### Tips
 - Adding the first portion of chili powder directly to the raw beef helps bloom the spice in the fat as it browns, building a deeper flavor base.
 - The beer adds richness — a lager or amber ale works well. Substitute with more beef broth if preferred.
@@ -53,7 +53,10 @@ displayPhoto: "./assets/chili.jpg"
 
 ### Toppings
 - Shredded cheddar, sour cream, green onions, cilantro, sliced jalapeños, and hot sauce all work great.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://www.spendwithpennies.com/the-best-chili-recipe/)**
-</RecipeCard>
+:::
+
+::card
diff --git a/public/recipes/vietnamese/pho/assets/not-found.svg b/recipes/vietnamese/pho/assets/not-found.svg
similarity index 100%
rename from public/recipes/vietnamese/pho/assets/not-found.svg
rename to recipes/vietnamese/pho/assets/not-found.svg
diff --git a/public/recipes/vietnamese/pho/pho.mdx b/recipes/vietnamese/pho/pho.md
similarity index 94%
rename from public/recipes/vietnamese/pho/pho.mdx
rename to recipes/vietnamese/pho/pho.md
index 61d623d..5acb6ed 100644
--- a/public/recipes/vietnamese/pho/pho.mdx
+++ b/recipes/vietnamese/pho/pho.md
@@ -15,13 +15,11 @@ display: true
 displayPhoto: ""
 ---
 
-<RecipeCard>
+:::photos
+![Image Coming Soon](./assets/not-found.svg "Image Coming Soon")
+:::
 
-## Photos
-![Image Coming Soon](./assets/not-found.svg)
-*Image Coming Soon*
-
-## Ingredients
+:::ingredients
 ### Broth
 - 2 lbs beef bones (knuckle, marrow, or oxtail)
 - 1 lb beef brisket (chuck as substitute)
@@ -47,8 +45,9 @@ displayPhoto: ""
 - 2 limes, cut into wedges
 - 2 jalapeños, thinly sliced
 - Hoisin sauce and Sriracha for serving
+:::
 
-## Instructions
+:::instructions
 1. In a large pot, add **beef bones** and **brisket**. Make sure to cut the brisket in half prior to this. Cover with water and bring to a boil and boil for **5 minutes**. Skim any scum off the top.
 2. Simultaneously, char the **onion** and **ginger** over medium flame. Rinse away the blackened skin.
 3. Also, toast **star anise**, **cinnamon stick**, **cloves**, **cardamom pods**, **coriander seeds**, and **fennel seeds** over medium heat in a saucepan for **3 minutes**.
@@ -57,14 +56,18 @@ displayPhoto: ""
 6. Cover the pot and continue simmering on low heat for **4 hours**. Add salt, skimming as necessary until ready to serve. Finish the sauce by adding fish sauce, sugar, or salt as necessary.
 7. Boil the **noodles** according to package and add to a bowl. Place slices of brisket, and thinly sliced uncooked **sirloin** or other toppings. Squeeze fresh **lime** on top, and add **bean sprouts** and **basil** as desired. Serve with hoisin sauce and Sriracha on the side.
 Pho is traditionally served piping hot with plenty of fresh herbs and condiments. The key is the balance of rich broth, tender meat, and fresh garnishes.
+:::
 
-## Notes
+:::notes
 ### Cooking Instructions
 - Getting beef bones with cartilage is very important as well as getting a stew meat. Also do not forget to skim after boiling.
 
 ### Serving Suggestions
 - Pho is traditionally served piping hot with plenty of fresh herbs and condiments. The key is the balance of rich broth, tender meat, and fresh garnishes.
+:::
 
-## References
+:::references
 - Reference Recipe **[HERE](https://thewoksoflife.com/pho-vietnamese-noodle-soup/)**
-</RecipeCard>
+:::
+
+::card