improve food structure

reednel · Nov 15, 2023 · 2f732db · 2f732db
1 parent 60ff0e5
commit 2f732db
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 46 deletions.
diff --git a/src/content/food/_food.md b/src/content/food/_food.md
@@ -1,11 +1,11 @@
 ---
 title: Food
 meta_title: Food
-author: Reed Nelson
-draft: true
 description:  recipe.
-cover: "@assets/food/.jpg"
+draft: true
 
+cover: "@assets/food/.jpg"
+author: Reed Nelson
 prep_time: 0
 servings: 0
 

diff --git a/src/content/food/bruchetta.md b/src/content/food/bruchetta.md
@@ -0,0 +1,23 @@
+---
+title: Bruchetta
+meta_title: Bruchetta
+description: Bruchetta recipe.
+draft: true
+
+cover: "@assets/food/placeholder.jpg"
+author: Reed Nelson
+prep_time: 30
+servings: 3
+
+ingredients:
+  list:
+    - Ingredient
+  qty:
+    - qty
+
+instructions:
+  - Step
+
+notes:
+  - Note
+---
diff --git a/src/content/food/fish-tacos.md b/src/content/food/fish-tacos.md
@@ -0,0 +1,23 @@
+---
+title: Fish Tacos
+meta_title: Fish Tacos
+description: Fish Taco recipe.
+draft: true
+
+cover: "@assets/food/placeholder.jpg"
+author: Ben Cartford
+prep_time: 60
+servings: 4
+
+ingredients:
+  list:
+    - Ingredient
+  qty:
+    - qty
+
+instructions:
+  - Step
+
+notes:
+  - Note
+---
diff --git a/src/content/food/pad-thai.md b/src/content/food/pad-thai.md
@@ -1,11 +1,11 @@
 ---
 title: Pad Thai
 meta_title: Pad Thai
-author: Reed Nelson
 draft: false
 description: Pad Thai recipe.
-cover: "@assets/food/pad-thai.jpg"
 
+cover: "@assets/food/pad-thai.jpg"
+author: Reed Nelson
 prep_time: 45
 servings: 4
 

diff --git a/src/layouts/FoodSingle.astro b/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: {
@@ -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">

diff --git a/src/pages/food/index.astro b/src/pages/food/index.astro
@@ -23,25 +23,21 @@ const currentPosts = posts.slice(0, config.settings.food_pagination);
   <PageHeader title={postIndex.data.title} />
   <section class="section">
     <div class="container">
-      <div class="row gx-5">
-        <!-- food posts -->
-        <div class="lg:col-8">
-          <div class="row">
-            {
-              currentPosts.map((post) => (
-                <div class="mb-8 md:col-6">
-                  <FoodCard data={post} />
-                </div>
-              ))
-            }
-          </div>
-          <Pagination
-            section={food_folder}
-            currentPage={1}
-            totalPages={totalPages}
-          />
-        </div>
+      <!-- food posts -->
+      <div class="row">
+        {
+          currentPosts.map((post) => (
+            <div class="mb-8 md:col-6 lg:col-4">
+              <FoodCard data={post} />
+            </div>
+          ))
+        }
       </div>
+      <Pagination
+        section={food_folder}
+        currentPage={1}
+        totalPages={totalPages}
+      />
     </div>
   </section>
 </Base>
diff --git a/src/pages/puzzles/index.astro b/src/pages/puzzles/index.astro
@@ -24,7 +24,7 @@ const posts = await getSinglePage(puzzle_folder);
           {
             posts.map((post) => (
               // Puzzle Card
-              <div class="mb-8 md:col-6 lg:col-4 ">
+              <div class="mb-8 md:col-6 lg:col-4">
                 <div class="min-h-full block border border-light bg-transparent text-light rounded-sm dark:text-darkmode-light dark:border-darkmode-light">
                   <PuzzleCard data={post} />
                 </div>