build drink infra

src/content/config.ts

@@ -1,4 +1,5 @@
 import { defineCollection, z } from "astro:content";
+import { array } from "prop-types";
 
 // Post collection schema
 const blogCollection = defineCollection({
@@ -25,9 +26,15 @@ const drinkCollection = defineCollection({
     date: z.date().optional(),
     image: z.string().optional(),
     author: z.string().default("Admin"),
-    categories: z.array(z.string()).default(["others"]),
-    tags: z.array(z.string()).default(["others"]),
+    spirits: z.array(z.string()).default(["none"]),
+    bottles: z.array(z.string()).default(["none"]),
+    tags: z.array(z.string()).default(["none"]),
     draft: z.boolean().optional(),
+    ingredients: z.object({
+      list: z.array(z.string()).optional(),
+      qty: z.array(z.string()).optional(),
+    }).optional(),
+    instructions: z.array(z.string()).optional(),
   }),
 });
 

src/content/drink/drink.md

@@ -0,0 +1,24 @@
+---
+title: "Drink"
+meta_title: "Drink"
+author: "Reed Nelson"
+draft: true
+description: "description"
+image: ""
+
+spirits: ["spirit"]
+bottles: ["bottle1", "bottle2"]
+tags: ["tag1", "tag2"]
+
+ingredients:
+  list:
+    - "ingredient1"
+    - "ingredient2"
+  qty:
+    - "qty1"
+    - "qty2" 
+
+instructions:
+  - "Step1"
+  - "Step2"
+---

src/content/drink/manhattan.md

@@ -0,0 +1,27 @@
+---
+title: "Manhattan"
+meta_title: "Manhattan"
+description: "none"
+image: ""
+author: "Reed Nelson"
+draft: false
+
+spirits: ["whiskey"]
+bottles: ["sweet-vermouth", "ango"]
+tags: ["classic", "spirit-forward"]
+
+ingredients:
+  list:
+    - "rye whiskey"
+    - "sweet vermouth"
+    - "angostura bitters"
+  qty:
+    - "2 oz"
+    - "1 oz"
+    - "4 dashes" 
+
+instructions:
+  - "Combine all ingredients in a mixing glass with ice."
+  - "Stir until well chilled."
+  - "Serve neat or on a rock."
+---

src/layouts/DrinkSingle.astro

@@ -13,12 +13,22 @@ import {
   FaRegUserCircle,
 } from "react-icons/fa/index.js";
 
+interface Recipe {
+  ingredients: {
+    list: string[];
+    qty: string[];
+  };
+  instructions: string[];
+}
+
 const { drink_folder } = config.settings;
 const posts = await getSinglePage(drink_folder);
 const { post } = Astro.props;
 const similarPosts = similerItems(post, posts, post.slug);
 const { Content } = await post.render();
-const { title, description, author, categories, image, date, tags } = post.data;
+const { title, description, author, image, spirits, bottles, tags } = post.data;
+
+const { ingredients, instructions }: Recipe = post.data;
 ---
 
 <section class="section pt-7">
@@ -45,17 +55,13 @@ const { title, description, author, categories, image, date, tags } = post.data;
             <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
             {humanize(author)}
           </li>
-          <li class="mr-4 inline-block">
-            <FaRegCalendarAlt className={"mr-2 -mt-1 inline-block"} />
-            {dateFormat(date)}
-          </li>
           <li class="mr-4 inline-block">
             <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
             {
-              categories.map((category: string, index: number) => (
-                <a href={`/drink/categories/${slugify(category)}`}>
-                  {humanize(category)}
-                  {index !== categories.length - 1 && ","}
+              spirits.map((spirit: string, index: number) => (
+                <a href={`/drink/spirits/${slugify(spirit)}`}>
+                  {spirit}
+                  {index !== spirits.length - 1 && ","}
                 </a>
               ))
             }
@@ -64,13 +70,12 @@ const { title, description, author, categories, image, date, tags } = post.data;
         <!-- <div class="content mb-10">
           <Content />
         </div> -->
-        <!-- Features -->
+        <!-- Ingredients -->
         <section class={`section-sm bg-gradient rounded-lg`}>
           <div class="container">
             <div class="row items-center justify-between">
               <div class={`md:col-7 lg:col-6 md:order-1`}>
-                <h2 set:html={markdownify(ingredients.title)} class="mb-4" />
-                <p set:html={markdownify(ingredients.content)} class="mb-8 text-lg" />
+                <h2 set:html="Ingredients" class="mb-4" />
                 <ul>
                   {ingredients.list.map((bullet: string) => (
                     <li class="relative mb-4 pl-6">
@@ -82,6 +87,23 @@ const { title, description, author, categories, image, date, tags } = post.data;
             </div>
           </div>
         </section>
+        <!-- Instructions -->
+        <section class={`section-sm bg-gradient rounded-lg`}>
+          <div class="container">
+            <div class="row items-center justify-between">
+              <div class={`md:col-7 lg:col-6 md:order-1`}>
+                <h2 set:html="Instructions" class="mb-4" />
+                <ul>
+                  {instructions.map((bullet: string) => (
+                    <li class="relative mb-4 pl-6">
+                      <span set:html={markdownify(bullet)} />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
         <div class="row items-start justify-between">
           <div class="mb-10 flex items-center lg:col-5 lg:mb-0">
             <h5 class="mr-3">Tags :</h5>

src/layouts/components/DrinkCard.astro

@@ -9,7 +9,7 @@ const {
   drink_folder,
 }: { summary_length: number; drink_folder: string } = config.settings;
 const { data } = Astro.props;
-const { title, image, categories } = data.data;
+const { title, image, spirits } = data.data;
 ---
 
 <div class="bg-body dark:bg-darkmode-body">
@@ -34,10 +34,10 @@ const { title, image, categories } = data.data;
     <li class="mr-4 inline-block">
       <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
       {
-        categories.map((category: string, index: number) => (
-          <a href={`/drink/categories/${slugify(category)}`}>
+        spirits.map((category: string, index: number) => (
+          <a href={`/drink/spirits/${slugify(category)}`}>
             {humanize(category)}
-            {index !== categories.length - 1 && ","}
+            {index !== spirits.length - 1 && ","}
           </a>
         ))
       }

src/layouts/partials/DrinkSidebar.astro

@@ -1,29 +1,50 @@
 ---
 import { humanize } from "@/lib/utils/textConverter";
 
-const { tags, categories, allCategories } = Astro.props;
+const { tags, spirits, bottles, allSpirits, allBottles } = Astro.props;
 ---
 
 <div class="lg:col-4">
-  <!-- categories -->
+  <!-- spirits -->
   <div class="mb-8">
     <h4 class="mb-2 text-center">
-      <a href="/drink/categories">Categories</a>
+      <a href="/drink/spirits">Spirits</a>
     </h4>
     <div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
-      <ul class="space-y-4">
+      <ul>
+        {
+          spirits.map((spirit: any) => {
+            return (
+              <li class="inline-block">
+                <a
+                  class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
+                  href={`/drink/spirits/${spirit}`}
+                >
+                  {spirit}
+                </a>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </div>
+  </div>
+  <!-- bottles -->
+  <div class="mb-8">
+    <h4 class="mb-2 text-center">
+      <a href="/drink/bottles">Bottles</a>
+    </h4>
+    <div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
+      <ul>
         {
-          categories.map((category: any) => {
-            const count = allCategories.filter(
-              (c: any) => c === category
-            ).length;
+          bottles.map((bottle: any) => {
             return (
-              <li>
+              <li class="inline-block">
                 <a
-                  class="flex justify-between hover:text-primary dark:hover:text-darkmode-primary"
-                  href={`/drink/categories/${category}`}
+                  class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
+                  href={`/drink/bottles/${bottle}`}
                 >
-                  {humanize(category)} <span>({count})</span>
+                  {bottle}
                 </a>
               </li>
             );

src/lib/utils/similarItems.ts

@@ -2,29 +2,51 @@
 const similerItems = (currentItem: any, allItems: any, slug: string) => {
   let categories: string[] = [];
   let tags: string[] = [];
+  let spirits: string[] = [];
+  let bottles: string[] = [];
 
   // set categories
-  if (currentItem.data.categories.length > 0) {
+  if (currentItem.data?.categories?.length > 0) {
     categories = currentItem.data.categories;
   }
 
   // set tags
-  if (currentItem.data.tags.length > 0) {
+  if (currentItem.data?.tags?.length > 0) {
     tags = currentItem.data.tags;
   }
 
+  // set spirits
+  if (currentItem.data?.spirits?.length > 0) {
+    spirits = currentItem.data.spirits;
+  }
+
+  // set bottles
+  if (currentItem.data?.bottles?.length > 0) {
+    bottles = currentItem.data.bottles;
+  }
+
   // filter by categories
   const filterByCategories = allItems.filter((item: any) =>
     categories.find((category) => item.data.categories.includes(category)),
   );
-
+  
   // filter by tags
   const filterByTags = allItems.filter((item: any) =>
     tags.find((tag) => item.data.tags.includes(tag)),
   );
 
+  // filter by spirits
+  const filterBySpirits = allItems.filter((item: any) =>
+    spirits.find((spirit) => item.data.spirits.includes(spirit)),
+  );
+
+  // filter by bottles
+  const filterByBottles = allItems.filter((item: any) =>
+    bottles.find((bottle) => item.data.bottles.includes(bottle)),
+  );
+
   // merged after filter
-  const mergedItems = [...new Set([...filterByCategories, ...filterByTags])];
+  const mergedItems = [...new Set([...filterByCategories, ...filterByTags, ...filterBySpirits, ...filterByBottles])];
 
   // filter by slug
   const filterBySlug = mergedItems.filter((product) => product.slug !== slug);