recover drink pages, broken

src/content/drink/drink1.md

@@ -1,13 +1,28 @@
 ---
-title: "Drink 1"
-meta_title: ""
+title: "Drink"
+meta_title: "Drink"
 description: "none"
-date: 2022-08-30T05:00:00Z
 image: ""
-categories: ["Drink"]
 author: "Reed Nelson"
+categories: ["Drink"]
 tags: ["drink"]
 draft: false
+
+# Ingredients
+ingredients:
+    title: "Title"
+    content: "content"
+    list:
+        - "a"
+        - "b"
+
+# Recipe
+recipe:
+    title: "Title"
+    content: "content"
+    list:
+        - "a"
+        - "b"
 ---
 
 This is a recipe.

src/content/homepage/-index.md

@@ -11,5 +11,4 @@ features:
     bulletpoints:
       - "a"
       - "b"
-
 ---

src/layouts/DrinkSingle.astro

@@ -0,0 +1,133 @@
+---
+import DrinkCard from "@/components/DrinkCard.astro";
+import Share from "@/components/Share.astro";
+import config from "@/config/config.json";
+import { getSinglePage } from "@/lib/contentParser.astro";
+import dateFormat from "@/lib/utils/dateFormat";
+import similerItems from "@/lib/utils/similarItems";
+import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
+import { Image } from "@astrojs/image/components";
+import {
+  FaRegCalendarAlt,
+  FaRegFolder,
+  FaRegUserCircle,
+} from "react-icons/fa/index.js";
+
+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;
+---
+
+<section class="section pt-7">
+  <div class="container">
+    <div class="row justify-center">
+      <article class="lg:col-10">
+        {
+          image && (
+            <div class="mb-10">
+              <Image
+                src={image}
+                height={500}
+                width={1200}
+                alt={title}
+                class="w-full rounded"
+                format="webp"
+              />
+            </div>
+          )
+        }
+        <h1 set:html={markdownify(title)} class="mb-4" />
+        <ul class="mb-4">
+          <li class="mr-4 inline-block">
+            <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 && ","}
+                </a>
+              ))
+            }
+          </li>
+        </ul>
+        <!-- <div class="content mb-10">
+          <Content />
+        </div> -->
+        <!-- Features -->
+        <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" />
+                <ul>
+                  {ingredients.list.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>
+            <ul>
+              {
+                tags.map((tag: string) => (
+                  <li class="inline-block">
+                    <a
+                      class="m-1 block rounded bg-theme-light px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-theme-light dark:hover:bg-darkmode-primary dark:hover:text-dark"
+                      href={`drink/tags/${slugify(tag)}`}
+                    >
+                      {tag}
+                    </a>
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+          <div class="flex items-center lg:col-4">
+            <h5 class="mr-3">Share :</h5>
+            <Share
+              className="social-icons"
+              title={title}
+              description={description}
+              slug={post.slug}
+            />
+          </div>
+        </div>
+      </article>
+    </div>
+
+    {
+      similarPosts.length > 0 && (
+        <!-- Related posts -->
+        <div class="section pb-0">
+          <h2 class="h3 mb-12 text-center">Related Posts</h2>
+          <div class="row justify-center">
+            {
+              similarPosts.slice(0, 3).map((post) => (
+                <div class="lg:col-4">
+                  <DrinkCard data={post} />
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      )
+    }
+</section>

src/layouts/components/DrinkCard.astro

@@ -2,14 +2,14 @@
 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";
+import { FaRegFolder } 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;
+const { title, image, categories } = data.data;
 ---
 
 <div class="bg-body dark:bg-darkmode-body">
@@ -26,13 +26,11 @@ const { title, image, date, author, categories } = data.data;
     )
   }
   <h4 class="mb-3">
-    {title}
+    <a href={`/${drink_folder}/${data.slug}`}>
+      {title}
+    </a>
   </h4>
   <ul class="mb-4">
-    <li class="mr-4 inline-block">
-      <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
-      {humanize(author)}
-    </li>
     <li class="mr-4 inline-block">
       <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
       {

src/pages/drink/[single].astro

@@ -0,0 +1,30 @@
+---
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import DrinkSingle from "@/layouts/DrinkSingle.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}
+>
+  <DrinkSingle post={post} />
+</Base>

src/pages/drink/page/[slug].astro

@@ -0,0 +1,80 @@
+---
+import DrinkCard from "@/components/DrinkCard.astro";
+import Pagination from "@/components/Pagination.astro";
+import config from "@/config/config.json";
+import Base from "@/layouts/Base.astro";
+import { getSinglePage } from "@/lib/contentParser.astro";
+import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
+import { sortByDate } from "@/lib/utils/sortFunctions";
+import PageHeader from "@/partials/PageHeader.astro";
+import DrinkSidebar from "@/partials/DrinkSidebar.astro";
+import { getEntryBySlug } from "astro:content";
+
+const { drink_folder } = config.settings;
+const { slug } = Astro.params;
+const postIndex = await getEntryBySlug<any, string>(drink_folder, "-index");
+const posts = await getSinglePage(drink_folder);
+const allCategories = await getAllTaxonomy(drink_folder, "categories");
+const categories = await getTaxonomy(drink_folder, "categories");
+const tags = await getTaxonomy(drink_folder, "tags");
+const sortedPosts = sortByDate(posts);
+const totalPages = Math.ceil(posts.length / config.settings.pagination);
+const currentPage = slug && !isNaN(Number(slug)) ? Number(slug) : 1;
+const indexOfLastPost = currentPage * config.settings.pagination;
+const indexOfFirstPost = indexOfLastPost - config.settings.pagination;
+const currentPosts = sortedPosts.slice(indexOfFirstPost, indexOfLastPost);
+
+export async function getStaticPaths() {
+  const posts = await getSinglePage(config.settings.drink_folder);
+  const totalPages = Math.ceil(posts.length / config.settings.pagination);
+  const paths = [];
+
+  for (let i = 1; i < totalPages; i++) {
+    paths.push({
+      params: {
+        slug: (i + 1).toString(),
+      },
+    });
+  }
+  return paths;
+}
+---
+
+<Base
+  title={postIndex.data.title}
+  meta_title={postIndex.data.meta_title}
+  image={postIndex.data.image}
+  description={postIndex.data.description}
+>
+  <PageHeader title={postIndex.data.title} />
+  <section class="section">
+    <div class="container">
+      <div class="row gx-5">
+        <!-- drink posts -->
+        <div class="lg:col-8">
+          <div class="row">
+            {
+              currentPosts.map((post) => (
+                <div class="mb-14 md:col-6">
+                  <DrinkCard data={post} />
+                </div>
+              ))
+            }
+          </div>
+          <Pagination
+            section={drink_folder}
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        </div>
+
+        <!-- sidebar -->
+        <DrinkSidebar
+          categories={categories}
+          tags={tags}
+          allCategories={allCategories}
+        />
+      </div>
+    </div>
+  </section>
+</Base>