Merge pull request #52 from reednel/develop

food updates

src/content/config.ts

@@ -46,6 +46,8 @@ const foodCollection = defineCollection({
     cover: image().optional(),
     author: z.string().default("none"),
     draft: z.boolean().optional(),
+    prep_time: z.number().optional(),
+    servings: z.number().optional(),
     ingredients: z.object({
       list: z.array(z.string()).optional(),
       qty: z.array(z.string()).optional(),

src/content/food/_food.md

@@ -1,10 +1,13 @@
 ---
 title: Food
 meta_title: Food
-author: Reed Nelson
-draft: true
 description:  recipe.
+draft: true
+
 cover: "@assets/food/.jpg"
+author: Reed Nelson
+prep_time: 0
+servings: 0
 
 ingredients:
   list:

src/content/food/bruschetta.md

@@ -0,0 +1,47 @@
+---
+title: Bruschetta
+meta_title: Bruschetta
+description: This is just some tame bruschetta. Truly the poor-man's mini pizza, while simultaneously a classy appetizer.
+draft: false
+
+cover: "@assets/food/bruschetta.jpg"
+author: Reed Nelson
+prep_time: 30
+servings: 3
+
+ingredients:
+  list:
+    - Baguette
+    - Roma tomatoes
+    - Basil
+    - Parmesan
+    - Balsamic vinegar
+    - Olive oil
+    - Balsamic glaze
+    - Spicy honey
+  qty:
+    - "1"
+    - "4"
+    - 8-12 leaves
+    - some
+    - some
+    - some
+    - some
+    - some
+
+instructions:
+  - Preheat the oven to 400.
+  - Dice tomatoes to the desired size, add them to a bowl.
+  - Cut the basil to shreds, mix it in with the tomatoes.
+  - Add balsamic vinegar to the bowl and let it soak 5-60 minutes.
+  - Cut the baguette into slices around 1cm thick.
+  - Lightly coat both sides of each slice in olive oil, and place them on a baking sheet.
+  - Spoon an even amount of tomato stuff onto each slice, and place in the oven until golden.
+  - Sprinkle each piece with parmesan, then give it a couple more minutes in the oven.
+  - Serve, topping with balsamic glaze and spicy honey to taste.
+
+notes:
+  - Watch out for the pieces sticking to the baking sheet. This can be ameliorated by nudging the pieces of bruschetta as they bake.
+  - You may be tempted to add salt to the tomato stuff, but the balsamic will do plenty.
+  - It's nice to get a little balsamic vinegar in each spoonful for the baguette, but it's easy to get the bread soggy with it.
+---

src/content/food/fish-tacos.md

@@ -0,0 +1,45 @@
+---
+title: Fish Tacos
+meta_title: Fish Tacos
+description: This is a recipe for mango salsa fish tacos. This recipe is missing the essential component of how to prepare the fish. I don't know.
+draft: false
+
+cover: "@assets/food/fish-tacos.jpg"
+author: Ben
+prep_time: 60
+servings: 3
+
+ingredients:
+  list:
+    - Mango
+    - Red bell pepper
+    - Sweet chilli sauce
+    - Paprika
+    - Avocado
+    - Onion
+    - Cilantro
+    - Garlic powder
+    - Freshwater fish
+    - Tortillas
+  qty:
+    - "1"
+    - 1⁄2
+    - 2 tbsp
+    - 1 tsp
+    - "2"
+    - 1⁄4 cup
+    - <= 1 bunch
+    - some
+    - some
+    - "6"
+
+instructions:
+  - "Salsa prep: dice the mango and pepper, add the chilli sauce and paprika."
+  - "Guac prep: make guac using the avocados, onion, cilantro, garlic, and salt."
+  - Have Ben make you fish.
+  - Construct tacos atop tortillas with the three components described above.
+
+notes:
+  - You'll probably want more than literally just fish for preparing the fish, but that's not my business.
+  - The premier sweet chilli sauce for this recipe is Mae Ploy sweet chilli sauce.
+---

src/content/food/pad-thai.md

@@ -1,10 +1,13 @@
 ---
 title: Pad Thai
 meta_title: Pad Thai
-author: Reed Nelson
 draft: false
-description: Pad Thai recipe.
+description: This vegan pad thai recipe may not be the most culturtally authentic one out there, but it is my own.
+
 cover: "@assets/food/pad-thai.jpg"
+author: Reed Nelson
+prep_time: 45
+servings: 4
 
 ingredients:
   list:
@@ -33,15 +36,15 @@ ingredients:
     - 1⁄4 cup
 
 instructions:
-  - "Stir fry prep: chop and combine garlic, ginger, cilantro, green onion, and any other desired ingredients*"
-  - "Noodle prep: cook noodles al dente; rinse and drain well"
-  - "Sauce prep: combine brown sugar, peanut butter, soy sauce, lime juice, and sriracha in a bowl"
-  - "Garnish prep: optionally chop peanuts/limes/cilantro and set aside for serving"
-  - Saute stir fry ingredients in a large pan; account for differences in cook time among ingredients
-  - Add noodles to the pan, combine thoroughly
-  - Add sauce, combine thoroughly
-  - Remove from heat when sauce is cooked in to your liking
-  - Serve
+  - "Stir fry prep: chop and combine garlic, ginger, cilantro, green onion, and any other desired ingredients*."
+  - "Noodle prep: cook noodles al dente; rinse and drain well."
+  - "Sauce prep: combine brown sugar, peanut butter, soy sauce, lime juice, and sriracha in a bowl."
+  - "Garnish prep: optionally chop peanuts/limes/cilantro and set aside for serving."
+  - Saute stir fry ingredients in a large pan; account for differences in cook time among ingredients.
+  - Add noodles to the pan, combine thoroughly.
+  - Add sauce, combine thoroughly.
+  - Remove from heat when sauce is cooked in to your liking.
+  - Serve.
 
 notes:
   - "*Other desired ingredients may include spinach, broccoli, bell pepper, baby corn, etc."

src/content/food/pierogis.md

@@ -0,0 +1,41 @@
+---
+title: Pierogis
+meta_title: Pierogis
+author: Reed Nelson
+draft: false
+description: A simple pierogi recipe leaning on flavors of lemon and thyme.
+cover: "@assets/food/pierogis.jpg"
+
+prep_time: 30
+servings: 2
+
+ingredients:
+  list:
+    - Pierogis
+    - Onion
+    - Thyme
+    - Lemon juice
+    - Shredded parmesan
+    - Olive oil
+  qty:
+    - 1 lb
+    - 1⁄2 large
+    - 1⁄2 pack (ish)
+    - some
+    - some
+    - some
+
+instructions:
+  - Boil pierogis; remove wheh floating.
+  - Chop onion (not too small).
+  - Sautee onion lightly, they should need more time than the pierogis.
+  - Add pierogis to pan.
+  - When close to done, turn down the heat and add lemon, thyme, salt, and pepper.
+  - Cook until golden.
+  - Serve into a bowl, top with parmesan and any additional salt, pepper, or lemon juice to taste.
+
+notes:
+  - I recommend the pierogis from Fresh Thyme, given their quality and price.
+  - A good nonstick pan is important for avoiding a ripped-noodle potatoey mess.
+  - Covering the pan for a period as soon as lemon is added will make it absorb better.
+---

src/content/food/tofu-burritos.md

@@ -1,10 +1,13 @@
 ---
 title: Tofu Burritos
 meta_title: Tofu Burritos
-author: Reed Nelson
 draft: false
-description: Tofu Burrito recipe.
-cover: "@assets/food/placeholder.jpg"
+description: This (nearly) vegan recipe is great fresh or as meal prep.
+
+cover: "@assets/food/tofu-burritos.jpg"
+author: Reed Nelson
+prep_time: 30
+servings: 4
 
 ingredients:
   list:
@@ -13,10 +16,10 @@ ingredients:
     - Romaine
     - Tortillas
     - Mexican cheese blend
-    - Spanish style rice (Trader Joe's)
+    - Spanish style rice
     - Roma tomatoes
     - Sweet onion
-    - cilantro
+    - Cilantro
     - Lime juice
   qty:
     - 1 slab (pressed)
@@ -32,13 +35,15 @@ ingredients:
     - some
 
 instructions:
-  - Dice the tofu into ~ 1⁄2 cm cubes; fry dry until crispy
-  - "Prepare pico: chop tomatoes, onion, and cilantro, add lime juice and salt"
-  - Cook rice according to its instructions
-  - Chop lettuce
-  - Wrap everything together
+  - Dice the tofu into ~ 1⁄2 cm cubes; fry dry until crispy, adding taco seasoning at the end.
+  - "Prepare pico: chop tomatoes, onion, and cilantro, add lime juice and salt."
+  - Cook rice according to its instructions.
+  - Chop lettuce.
+  - Wrap everything together.
 
 notes:
-  - I recommend storing leftover tofu and rice together, pico in another container, then cheese, lettuce, and tortillas separately.
-  - All ingredients can be acquired at Trader Joe's, the rice must be, and the rice does a lot here.
+  - I specify romaine in the ingredients list for measurement purposes, but pick your favorite leafy green.
+  - I recommend storing leftover tofu and rice together, pico in another container, then cheese, leafy greens, and tortillas separately.
+  - All ingredients can be acquired at Trader Joe's. The rice in particular is a good Joe's purchase.
+  - I like to add a bit of spicy honey to the pico.
 ---

src/layouts/FoodSingle.astro

@@ -2,6 +2,13 @@
 import Share from "@/components/Share.astro";
 import config from "@/config/config.json";
 import { Image } from "astro:assets";
+import { humanize, markdownify } from "@/lib/utils/textConverter";
+
+import {
+  FaRegClock,
+  FaRegUserCircle,
+  FaUtensils,
+} from "react-icons/fa/index.js";
 
 interface Recipe {
   ingredients: {
@@ -14,7 +21,7 @@ interface Recipe {
 
 const { food_folder } = config.settings;
 const { post } = Astro.props;
-const { title, description, cover } = post.data;
+const { title, author, description, cover, prep_time, servings } = post.data;
 const { ingredients, instructions, notes }: Recipe = post.data;
 ---
 
@@ -25,6 +32,7 @@ const { ingredients, instructions, notes }: Recipe = post.data;
         <h1 set:html={title} class="mb-4" />
 
         <div class="row">
+          <!-- Cover Photo -->
           <div class="lg:col-8 mb-8">
             {
               cover && (
@@ -39,6 +47,33 @@ const { ingredients, instructions, notes }: Recipe = post.data;
               )
             }
           </div>
+          <!-- About -->
+          <div class="lg:col-4 mb-8">
+            <section class={`section-sm h-full bg-theme-light dark:bg-darkmode-theme-light rounded-lg`}>
+              <div class="container -my-14">
+                <!-- Author -->
+                <div class="m-4">
+                  <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
+                  {humanize(author)}
+                </div>
+                <!-- Prep Time -->
+                <div class="m-4">
+                  <FaRegClock className={"mr-2 -mt-1 inline-block"} />
+                  {prep_time + " minutes"}
+                </div>
+                <!-- Servings -->
+                <div class="m-4">
+                  <FaUtensils className={"mr-2 -mt-1 inline-block"} />
+                  {servings + " servings"}
+                </div>
+                <!-- Description -->
+                <hr class="my-2" />
+                <div class="m-4">
+                  <div set:html={markdownify(description)} />
+                </div>
+              </div>
+            </section>
+          </div>
         </div>
 
         <!-- Ingredients -->
@@ -48,13 +83,15 @@ const { ingredients, instructions, notes }: Recipe = post.data;
               <div class="md:col-6 lg:col-6 md:order-1">
                 <h2 set:html="Ingredients" class="mb-4" />
                 <div class="row mx-4">
-                  {ingredients.list.map((it: string, index: number) => (
-                    <div class="row my-1">
-                        <div class="col-7" set:html={ingredients.list[index]} />
-                        <div class="col-5 text-right" set:html={ingredients.qty[index]} />
-                      <hr class="my-1">
-                    </div>
-                  ))}
+                  {
+                    ingredients.list.map((it: string, index: number) => (
+                      <div class="row my-1">
+                          <div class="col-7" set:html={ingredients.list[index]} />
+                          <div class="col-5 text-right" set:html={ingredients.qty[index]} />
+                        <hr class="my-1">
+                      </div>
+                    ))
+                  }
                 </div>
               </div>
             </div>
@@ -83,25 +120,27 @@ const { ingredients, instructions, notes }: Recipe = post.data;
         </section>
 
         <!-- Notes -->
-        <section class="section-sm bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4">
-          <div class="container -my-10">
-            <div class="row items-center justify-between">
-              <div class="md:order-1">
-                <h2 set:html="Notes" class="mb-4" />
-                <div class="row mx-4">
-                  {notes.map((it: string, index: number) => (
-                    <div class="row my-1">
-                      <div class="col">
-                        {it}
+        { notes && notes.length > 0 && (
+          <section class="section-sm bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4">
+            <div class="container -my-10">
+              <div class="row items-center justify-between">
+                <div class="md:order-1">
+                  <h2 set:html="Notes" class="mb-4" />
+                  <div class="row mx-4">
+                    {notes.map((it: string, index: number) => (
+                      <div class="row my-1">
+                        <div class="col">
+                          {it}
+                        </div>
+                        <hr class="my-1">
                       </div>
-                      <hr class="my-1">
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
+        )}
 
         <!-- Share -->
         <div class="flex items-center justify-center lg:justify-end">