Add syntax highlighting

site/astro.config.ts

@@ -19,7 +19,6 @@ import icon from "astro-icon";
 import rehypeFigure from "@microflash/rehype-figure";
 import remarkGfm from "remark-gfm-no-autolink";
 import cooklang from './cooklang-astro';
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://briansunter.com",

site/cooklang-astro.ts

@@ -39,6 +39,7 @@ const stepItemSchema = z.union([
 export const recipeSchema = {
   slug: z.string().optional(),
   ingredients: z.array(ingredientSchema).default([]),
+  cooklang: z.string(),
   cookwares: z.array(cookwareSchema).default([]),
   metadata: z.object({
     title: z.string(),
@@ -97,6 +98,7 @@ function getEntryInfo({ fileUrl, contents }: EntryInfoInput): EntryInfoOutput {
     metadata,
     shoppingList,
     steps,
+    cooklang: contents,
   };
   return {
     slug,

site/src/components/CopyCodeButton.astro

@@ -0,0 +1,37 @@
+---
+export interface Props {
+  code: string;
+}
+
+const { code } = Astro.props;
+---
+
+<button
+  class="copy-button absolute top-4 right-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center"
+  data-code={code}
+  title="Copy code to clipboard"
+>
+  <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
+  </svg>
+  <slot />
+</button>
+<script>
+  function copyCode(button: HTMLButtonElement) {
+    const code = button.dataset.code;
+    if(!code) return;
+    navigator.clipboard.writeText(code);
+    button.textContent = 'Copied!';
+    setTimeout(() => {
+      button.textContent = 'Copy Code';
+    }, 2000);
+  }
+  const buttons = document.querySelectorAll<HTMLButtonElement>('button.copy-button');
+
+  // Handle clicks on each button.
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+        copyCode(button);
+    });
+  });
+</script>

site/src/content/recipes/avocado-toast.cook

@@ -23,4 +23,4 @@ Optionally, Drizzle with the @chili oil{}
 
 Add a generous pinch of flaky sea salt
 
-Tear some basil and sprinkle on top
+Tear some @basil and sprinkle on top

site/src/content/recipes/banana-pancakes.cook

@@ -1,6 +1,6 @@
 >> title: Banana Pancakes
 >> description: You can make healthy pancakes out of a fluffy banana egg mixture.
->>source: https://www.amazon.com/Joshua-Weissman-Unapologetic-Cookbook/dp/1615649980?&_encoding=UTF8&tag=bsunter-20&linkCode=ur2&linkId=5300e43d60cfb8b95202ef018574abce&camp=1789&creative=9325
+>> source: https://www.amazon.com/Joshua-Weissman-Unapologetic-Cookbook/dp/1615649980?&_encoding=UTF8&tag=bsunter-20&linkCode=ur2&linkId=5300e43d60cfb8b95202ef018574abce&camp=1789&creative=9325
 >> tags: breakfast, vegetarian
 Combine @flour{120%g}, @white sugar{13%g}, @baking powder{2%tsp}, and @salt{1%g} in a bowl. Mix together @egg{3}, @milk{240%g}, @avocado oil{26%g}, and @bananas{3} in a second bowl.
 

site/src/content/recipes/kalbi-marinate.cook

@@ -1,23 +1,13 @@
->> title: Kalbi Marinate
->> description: For barbecued and braised meats, roasted vegetables, and salads. A classic marinade for kalbi, or grilled short ribs. It's garlicky, sweet, and savory with a nutty sesame flavor. Can be used as a braising sauce or salad dressing as well.
->> source: https://masterclass.com
->> tags: korean, asian, sauce
+>> title: Kalbi Marinade
+>> description: A versatile marinade that can be used for BBQ Kalbi and BBQ Mixed Vegetables. You can swap in pears or pineapple for the kiwifruit.
+>> yield: About 6 cups
+>> prep time: 5 minutes
+>> tags: marinade, sauce, korean
 
- It’s one of those recipes that every practitioner makes a little differently, but it’s always  You’ll use this sauce when making the BBQ Kalbi (see page 20) and BBQ Mixed Vegetables (see page 21), but it’s not just a marinade; it .
-Roy blends in the tangy flesh of the kiwifruit here, but
-you can swap in pears or pineapple or whatever fruits are available. Mirin, a sweet Japanese rice wine, can be found at Asian markets or online; if you don’t have a bottle, use apple juice instead.
-   INGREDIENTS
-1 large onion, peeled and roughly chopped
-1 cup peeled garlic cloves
-1 bunch scallions (about 8 scallions), roughly chopped
-5 tbsp toasted sesame seeds 1 cup sugar
-2 large kiwifruits
-2 cups soy sauce
-1 cup mirin, apple juice, or water 2 cups fresh orange juice
-1 cup toasted sesame oil
-METHOD
-   17
+Add the @onion{1%large}, peeled and roughly chopped, @peeled garlic cloves{1%cup}, @scallions{1%bunch} (about 8 scallions), roughly chopped, @toasted sesame seeds{5%tbsp}, and @sugar{1%cup} to a clean #blender jar.
 
-Add the onion, garlic, scallions, sesame seeds, and sugar to a clean blender jar. 
+Halve the @kiwifruits{2%large}, and use a #spoon to scoop out the flesh. Add the flesh to the #blender, and toss out the skins. 
 
-Halve the kiwifruits, and use a spoon to scoop out the flesh. Add the flesh to the blender, and toss out the skins. Add the remain- ing ingredients, and purée the mix- ture on high speed just until a smooth sauce forms, about 10 sec- onds. Pour the marinade into a sealable jar or container, and store it in the refrigerator for up to 1 week.
+Add the @soy sauce{2%cups}, @mirin{1%cup}, @apple juice{1%cup}, or @water{1%cup}, @fresh orange juice{2%cups}, and @toasted sesame oil{1%cup}, and purée the mixture on high speed just until a smooth sauce forms, about ~{10%seconds}. 
+
+Pour the marinade into a #sealable jar{} or container, and store it in the #refrigerator for up to 1 week.

site/src/content/recipes/lechon-kawali-sisig.cook

@@ -1,9 +1,9 @@
 >>source: https://www.soulsousvide.com/home/lechon-kawali
 >>title: Sous Vide Lechon Kawali Sisig
 >>description: Crispy fried pork belly with stir fried onions
->>tags:main, filipino
+>>tags:main, filipino, asian
 
-  In a #vacuum sealable bag{}, combine @pork belly{4%lbs}, @pounded garlic{1/2%head}, @salt{1%tbsp}, @cracked peppercorns{1.5%tsp}, and @bay leaves {} .
+In a #vacuum sealable bag{}, combine @pork belly{4%lbs}, @pounded garlic{1/2%head}, @salt{1%tbsp}, @cracked peppercorns{1.5%tsp}, and @bay leaves{} .
 
 #Sous vide{} for ~{24%hours} at 154° F.
 
@@ -19,7 +19,7 @@ Dice @yellow onions{2}
 
 Chop pork belley into ½-inch pieces and place it into a large mixing bowl. 
 
-Add @lemon juice{1/4%cup} , @cane vinegar{1/4%cup} and @soy sauce{1/2%cup} , and  @black pepper{1%tsp} .
+Add @lemon juice{1/4%cup}, @cane vinegar{1/4%cup}, and @soy sauce{1/2%cup} , and  @black pepper{1%tsp} .
 
 Heat onions and pork in a large cast iron plate at 450°F for 10 to 15 minutes. 
 

site/src/content/recipes/lime-soda.cook

@@ -9,7 +9,7 @@
 
 Make simple syrup by first boiling together equal parts sugar and water, then letting it cool.
 
-Fill a glass with ice cubes, then add @simple syrup{30%ml} (2 tbsp) and @freshly squeezed lime juice{20%ml} (1.5%tbsp) (use regular supermarket persian limes).
+Fill a glass with ice cubes, then add @simple syrup{30%ml} (2 tbsp) and @freshly squeezed lime juice{20%ml} (1.5 tbsp) (use regular supermarket persian limes).
 
 Add @soda water{240%ml} (1 cup).
 

site/src/content/recipes/lumpia-shanghai.cook

@@ -5,12 +5,15 @@
 
 Combine @ground pork (30%fat) {680%g}, @minced carrot{1}, @minced red onion{1/2}, @minced celery stalks{3}, @garlic{6%cloves}, @egg{1}, @soy sauce{2%tbsp}, @salt{1%tsp}, @ground black pepper{1.5%tsp}, @salt{1%tsp}, @sugar{1%tsp} in a #big bowl{}. Use a spatula to mix it in a circular motion, until everything comes together and the pork feels elastic. It might take a few minutes to get this consistency.
 
-Place the @lumpia wrapper{}s on a plate and cover with a damp towel to prevent from drying out.
-Take a wrapper and lay it in front of you with the pointed edge facing up. Take a heaping tablespoon of filling and place it a few inches from the corner closest to you. Shape the filling into a 4 to 5" (10 to 12 cm) strip. Fold the bottom corner over the filling, then fold the two side corners. Roll the filling parcel up so the folded edges are tucked in. Gently use your finger to press out any air bubbles and make sure the filling is sealed in tightly. Continue rolling up the filling until just before it is completely sealed. Dab the upper corner with a small amount of egg wash with your finger, then fold the filling over to finish wrapping the lumpia. Set aside. Repeat with the remaining filling and wrappers.
+Place the @lumpia wrapper{}s on a plate and cover with a damp towel to prevent from drying out. Take a wrapper and lay it in front of you with the pointed edge facing up. 
 
-Once you wrap the lumpia, you can store them uncooked in a large Ziplock bag with as much air squeezed out as possible, for up to 3 months in the freezer.
+Take a heaping tablespoon of filling and place it a few inches from the corner closest to you. Shape the filling into a 4 to 5" (10 to 12 cm) strip. 
+
+Fold the bottom corner over the filling, then fold the two side corners. Roll the filling parcel up so the folded edges are tucked in. Gently use your finger to press out any air bubbles and make sure the filling is sealed in tightly. Continue rolling up the filling until just before it is completely sealed. Dab the upper corner with a small amount of egg wash with your finger, then fold the filling over to finish wrapping the lumpia. Set aside. 
 
-To cook the frozen lumpia, cook them according to the instructions below without thawing. The cooking time will take slightly longer.
+Repeat with the remaining filling and wrappers.
+
+Once you wrap the lumpia, you can store them uncooked in a large Ziplock bag with as much air squeezed out as possible, for up to 3 months in the freezer.
 
 Add the @peanut oil{} to a #medium deep pan{} or pot so that it comes about 1" (2.5cm) up. Heat over medium-high heat until it reaches 350°F (176°C).
 

site/src/content/recipes/milk-bread.cook

@@ -39,4 +39,4 @@ Sweat garlic for ~{30%s} and then remove from the heat and let the residual heat
 
 Remove buns from oven and immediately add the garlic butter. 
 
-Add maldon salt to the top.
+Add @maldon flaky sea salt{} to the top.

site/src/content/recipes/pork-dumplings.cook

@@ -1,6 +1,7 @@
 >>title: Pork Dumplings
->>description: Fried pork dumplings
->>tags: chinese, pork, dumplings
+>>description: 
+>>description: Delicious and savory pork dumplings, pan-fried to perfection.
+>>tags: chinese, pork, dumplings, pan-fried
 
 Mix together the @pork{1/2%lb}, @sliced scallions{1%cup}, @grated ginger{1%tbsp}, @soy sauce{2%tbsp}, @sesame oil{1%tbsp}, @re-hydrated chinese mushrooms{4}, @cilantro{1%tbsp} and @bamboo shoots or water chestnuts{1/2%cup}.
 

site/src/content/recipes/quick-pickled-vegetables.cook

@@ -1,6 +1,6 @@
 >>source: https://www.amazon.com/Joshua-Weissman-Unapologetic-Cookbook/dp/1615649980?&_encoding=UTF8&tag=bsunter-20&linkCode=ur2&linkId=5300e43d60cfb8b95202ef018574abce&camp=1789&creative=9325
 >>title: Quick Pickled Vegetables
->>description: I like quick pickled vegetables just as much as naturally fermented personally. This recipe is easy, works with many vegetables, and keeps forever. 
+>>description: I like quick pickled vegetables just as much as naturally fermented. This recipe is easy, works with many vegetables, and keeps for months. 
 >>tags:fermented, sauce, side
 
 Fill a large jar with the desired vegetables and any fresh herbs and garlic (for example, cucumbers and sprigs of sage), leaving a bit of headspace.

site/src/content/recipes/ratatouille.cook

@@ -7,7 +7,7 @@ Preheat the oven for 375˚F (190˚C).
 
 Slice the @eggplant{2}, @tomatoes,{6} @squash{2}, and @zucchini{2} into approximately ¹⁄₁₆-inch (1-mm) rounds, then set aside.
 
-For the sauce: Heat the @olive oil{2%tbsp} in a 12-inch (30-cm) oven-safe pan over medium-high heat. 
+For the sauce: Heat the @olive oil{2%tbsp} in a #12-inch (30-cm) oven-safe pan{} over medium-high heat. 
 
 Sauté the @diced onion{1}, @minced garlic{4%cloves}, @diced  bell pepper{2}, until soft, about ~{10%minutes}. Season with @salt and @pepper, then add the @crushed tomatoes{28%oz}.