add drinks structure

package.json

@@ -36,8 +36,7 @@
     "remark-collapse": "^0.1.2",
     "remark-math": "^5.1.1",
     "remark-toc": "^8.0.1",
-    "sharp": "^0.32.4",
-    "swiper": "^10.1.0"
+    "sharp": "^0.32.4"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",

src/config/config.json

@@ -19,7 +19,8 @@
     "default_theme": "system",
     "pagination": 2,
     "summary_length": 200,
-    "blog_folder": "blog"
+    "blog_folder": "blog",
+    "drink_folder": "drinks"
   },
 
   "navigation_button": {

src/content/config.ts

@@ -15,6 +15,21 @@ const blogCollection = defineCollection({
   }),
 });
 
+// Drinks collection schema
+const drinkCollection = defineCollection({
+  schema: z.object({
+    title: z.string(),
+    meta_title: z.string().optional(),
+    description: z.string().optional(),
+    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"]),
+    draft: z.boolean().optional(),
+  }),
+});
+
 // Author collection schema
 const authorsCollection = defineCollection({
   schema: z.object({
@@ -52,6 +67,7 @@ const pagesCollection = defineCollection({
 // Export collections
 export const collections = {
   blog: blogCollection,
+  drinks: drinkCollection,
   authors: authorsCollection,
   pages: pagesCollection,
 };

src/content/drinks/-index.md

@@ -0,0 +1,5 @@
+---
+title: "Drinks"
+meta_title: ""
+description: "this is meta description"
+---

src/content/drinks/drink1.md

@@ -0,0 +1,13 @@
+---
+title: "Drink 1"
+meta_title: ""
+description: "none"
+date: 2022-08-30T05:00:00Z
+image: ""
+categories: ["Drink"]
+author: "Reed Nelson"
+tags: ["drink"]
+draft: false
+---
+
+This is a recipe.

src/content/drinks/drink2.md

@@ -0,0 +1,13 @@
+---
+title: "Drink 2"
+meta_title: ""
+description: "none"
+date: 2022-09-30T05:00:00Z
+image: ""
+categories: ["Drink2"]
+author: "Reed Nelson"
+tags: ["drink2"]
+draft: false
+---
+
+This is a recipe.

src/content/drinks/drink3.md

@@ -0,0 +1,13 @@
+---
+title: "Drink 3"
+meta_title: ""
+description: "none"
+date: 2022-10-30T05:00:00Z
+image: ""
+categories: ["Drink"]
+author: "Reed Nelson"
+tags: ["drink"]
+draft: false
+---
+
+This is a recipe.

src/layouts/components/DrinkCard.astro

@@ -0,0 +1,59 @@
+---
+import config from "@/config/config.json";
+import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
+import { Image } from "@astrojs/image/components";
+import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
+
+const {
+  summary_length,
+  drink_folder,
+}: { summary_length: number; drink_folder: string } = config.settings;
+const { data } = Astro.props;
+const { title, image, date, author, categories } = data.data;
+---
+
+<div class="bg-body dark:bg-darkmode-body">
+  {
+    image && (
+      <Image
+        class="mb-6 w-full rounded"
+        src={image}
+        alt={title}
+        width={445}
+        height={230}
+        format="webp"
+      />
+    )
+  }
+  <h4 class="mb-3">
+    <a href={`/${drink_folder}/${data.slug}`}>
+      {title}
+    </a>
+  </h4>
+  <ul class="mb-4">
+    <li class="mr-4 inline-block">
+      <a href={`/authors/${slugify(author)}`}>
+        <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
+        {humanize(author)}
+      </a>
+    </li>
+    <li class="mr-4 inline-block">
+      <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
+      {
+        categories.map((category: string, index: number) => (
+          <a href={`/categories/${slugify(category)}`}>
+            {humanize(category)}
+            {index !== categories.length - 1 && ","}
+          </a>
+        ))
+      }
+    </li>
+  </ul>
+  <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
+  <a
+    class="btn btn-outline-primary btn-sm"
+    href={`/${drink_folder}/${data.slug}`}
+  >
+    read more
+  </a>
+</div>

src/pages/drink-categories/[category].astro

@@ -0,0 +1,43 @@
+---
+import DrinkCard from "@/components/DrinkCard.astro";
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import { getSinglePage } from "@/lib/contentParser.astro";
+import { getTaxonomy } from "@/lib/taxonomyParser.astro";
+import taxonomyFilter from "@/lib/utils/taxonomyFilter";
+import PageHeader from "@/partials/PageHeader.astro";
+
+export async function getStaticPaths() {
+  const categories = await getTaxonomy(
+    config.settings.drink_folder,
+    "categories"
+  );
+
+  return categories.map((category) => {
+    return {
+      params: { category },
+    };
+  });
+}
+
+const { category } = Astro.params;
+const posts = await getSinglePage(config.settings.drink_folder);
+const filterByCategories = taxonomyFilter(posts, "categories", category!);
+---
+
+<Base title={category}>
+  <PageHeader title={category} />
+  <div class="section-sm pb-0">
+    <div class="container">
+      <div class="row">
+        {
+          filterByCategories.map((post) => (
+            <div class="mb-14 md:col-6 lg:col-4">
+              <DrinkCard data={post} />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</Base>

src/pages/drink-categories/index.astro

@@ -0,0 +1,39 @@
+---
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
+import { humanize } from "@/lib/utils/textConverter";
+import PageHeader from "@/partials/PageHeader.astro";
+
+const { drink_folder }: { drink_folder: string } = config.settings;
+const categories = await getTaxonomy(drink_folder, "categories");
+const allCategories = await getAllTaxonomy(drink_folder, "categories");
+---
+
+<Base title={"Categories"}>
+  <PageHeader title={"Categories"} />
+  <section class="section">
+    <div class="container text-center">
+      <ul>
+        {
+          categories.map((category: string) => {
+            const count = allCategories.filter((c) => c === category).length;
+            return (
+              <li class="m-3 inline-block">
+                <a
+                  href={`/categories/${category}`}
+                  class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
+                >
+                  {humanize(category)}{" "}
+                  <span class="ml-2 rounded bg-body px-2 dark:bg-darkmode-body">
+                    {count}
+                  </span>
+                </a>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </div>
+  </section>
+</Base>

src/pages/drink-tags/[tag].astro

@@ -0,0 +1,40 @@
+---
+import DrinkCard from "@/components/DrinkCard.astro";
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import { getSinglePage } from "@/lib/contentParser.astro";
+import { getTaxonomy } from "@/lib/taxonomyParser.astro";
+import taxonomyFilter from "@/lib/utils/taxonomyFilter";
+import PageHeader from "@/partials/PageHeader.astro";
+
+export async function getStaticPaths() {
+  const tags = await getTaxonomy(config.settings.drink_folder, "tags");
+
+  return tags.map((tag) => {
+    return {
+      params: { tag },
+    };
+  });
+}
+
+const { tag } = Astro.params;
+const posts = await getSinglePage(config.settings.drink_folder);
+const filterByCategories = taxonomyFilter(posts, "tags", tag!);
+---
+
+<Base title={tag}>
+  <PageHeader title={tag} />
+  <div class="section-sm pb-0">
+    <div class="container">
+      <div class="row">
+        {
+          filterByCategories.map((post) => (
+            <div class="mb-14 md:col-6 lg:col-4">
+              <DrinkCard data={post} />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</Base>

src/pages/drink-tags/index.astro

@@ -0,0 +1,39 @@
+---
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
+import { humanize } from "@/lib/utils/textConverter";
+import PageHeader from "@/partials/PageHeader.astro";
+
+const { drink_folder }: { drink_folder: string } = config.settings;
+const tags = await getTaxonomy(drink_folder, "tags");
+const allTags = await getAllTaxonomy(drink_folder, "tags");
+---
+
+<Base title={"Tags"}>
+  <PageHeader title={"Tags"} />
+  <section class="section">
+    <div class="container text-center">
+      <ul>
+        {
+          tags.map((tag: any) => {
+            const count = allTags.filter((c) => c === tag).length;
+            return (
+              <li class="m-3 inline-block">
+                <a
+                  href={`/tags/${tag}`}
+                  class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
+                >
+                  {humanize(tag)}{" "}
+                  <span class="ml-2 rounded bg-body px-2 dark:bg-darkmode-body">
+                    {count}
+                  </span>
+                </a>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </div>
+  </section>
+</Base>

src/pages/drinks/[single].astro

@@ -0,0 +1,30 @@
+---
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import PostSingle from "@/layouts/PostSingle.astro";
+import { getSinglePage } from "@/lib/contentParser.astro";
+
+export async function getStaticPaths() {
+  const posts = await getSinglePage(config.settings.drink_folder);
+
+  const paths = posts.map((post) => ({
+    params: {
+      single: post.slug,
+    },
+    props: { post },
+  }));
+  return paths;
+}
+
+const { post } = Astro.props;
+const { title, meta_title, description, image } = post.data;
+---
+
+<Base
+  title={title}
+  meta_title={meta_title}
+  description={description}
+  image={image}
+>
+  <PostSingle post={post} />
+</Base>