update

app/pages/posts/[post].vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { BlogPost } from "@/types/blog";
+import Comment from "~/components/blog/Comment.vue";
+import siteConfig from "~/config";
+
+const { path } = useRoute();
+
+const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
+  queryCollection("content").path(path).first(),
+);
+
+if (error.value) navigateTo("/404");
+
+const data = computed<BlogPost>(() => {
+  return {
+    title: articles.value?.title || "no-title available",
+    description: articles.value?.description || "no-description available",
+    image: articles.value?.image || "",
+    alt: articles.value?.alt || "no alter data available",
+    date: articles.value?.date || "not-date-available",
+    tags: articles.value?.tags || [],
+    published: articles.value?.published || false,
+    categories: articles.value?.categories || [],
+    path: path || "",
+  };
+});
+
+useHead({
+  title: siteConfig.siteMeta.title || "",
+  meta: [
+    { name: "description", content: siteConfig.siteMeta.description },
+    { name: "author", content: siteConfig.siteMeta.author },
+  ],
+  link: [
+    {
+      rel: "canonical",
+      href: `${siteConfig.siteMeta.url}/${path}`,
+    },
+  ],
+});
+
+// console.log(articles.value)
+</script>
+
+<template>
+  <div class="px-6 container max-w-6xl mx-auto sm:grid grid-cols-12 gap-x-12">
+    <div class="col-span-12 lg:col-span-8">
+      <BlogHeader
+        :title="data.title"
+        :image="data.image"
+        :alt="data.alt"
+        :date="formatDate(data.date)"
+        :description="data.description"
+        :tags="data.tags" />
+      <div
+        class="prose prose-zinc dark:prose-invert max-w-none prose-headings:scroll-mt-28 prose-headings:tracking-tight prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-400 prose-a:text-violet-600 dark:prose-a:text-violet-400 prose-a:no-underline hover:prose-a:underline prose-blockquote:border-l-4 prose-blockquote:border-violet-500 prose-blockquote:bg-violet-500/5 prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-img:rounded-3xl prose-img:shadow-xl prose-code:text-violet-600 dark:prose-code:text-violet-400 prose-code:bg-violet-500/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:rounded-2xl prose-pre:shadow-2xl prose-pre:border prose-pre:border-white/5">
+        <ContentRenderer v-if="articles" :value="articles">
+          <template #empty>
+            <p>No content found.</p>
+          </template>
+        </ContentRenderer>
+        <ClientOnly>
+          <Comment />
+        </ClientOnly>
+      </div>
+    </div>
+
+    <!-- 侧边目录 -->
+    <BlogToc />
+  </div>
+</template>

app/pages/posts/index.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import Fuse from "fuse.js";
+import { getRandomFallbackImage } from "~/utils/helper";
+// import type { BlogPost } from "~/types/blog";
+
+const { data } = await useAsyncData("all-blog-post", () => queryCollection("content").all());
+
+const elementPerPage = ref(5);
+const pageNumber = ref(1);
+const searchTest = ref("");
+
+const formattedData = computed(() => {
+  return (
+    data.value?.map((articles) => {
+      return {
+        path: articles.path,
+        title: articles.title || "no-title available",
+        description: articles.description || "no-description available",
+        image: articles.image || getRandomFallbackImage(),
+        alt: articles.alt || "no alter data available",
+        date: articles.date || "not-date-available",
+        tags: articles.tags || [],
+        published: articles.published || false,
+      };
+    }) || []
+  );
+});
+
+const fuse = computed(() => {
+  return new Fuse(formattedData.value, {
+    keys: ["title", "description"],
+    threshold: 0.4,
+    includeScore: false,
+  });
+});
+
+const searchData = computed(() => {
+  if (!searchTest.value.trim()) {
+    return formattedData.value;
+  }
+
+  const results = fuse.value.search(searchTest.value);
+  return results.map((result) => result.item);
+});
+
+const paginatedData = computed(() => {
+  const startInd = (pageNumber.value - 1) * elementPerPage.value;
+  const endInd = pageNumber.value * elementPerPage.value;
+
+  return searchData.value.slice(startInd, endInd);
+});
+
+function onPreviousPageClick() {
+  if (pageNumber.value > 1) pageNumber.value -= 1;
+}
+
+const totalPage = computed(() => {
+  const ttlContent = searchData.value.length || 0;
+  return Math.ceil(ttlContent / elementPerPage.value);
+});
+
+function onNextPageClick() {
+  if (pageNumber.value < totalPage.value) pageNumber.value += 1;
+}
+
+useHead({
+  title: "Archive",
+  meta: [
+    {
+      name: "description",
+      content: "Here you will find all the blog posts I have written & published on this site.",
+    },
+  ],
+});
+</script>
+
+<template>
+  <main class="container max-w-5xl mx-auto text-zinc-600">
+    <ArchiveHero />
+
+    <div class="px-6">
+      <input
+        v-model="searchTest"
+        placeholder="Search"
+        type="text"
+        class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
+    </div>
+
+    <div v-auto-animate class="space-y-5 my-5 px-4">
+      <template v-for="post in paginatedData" :key="post.title">
+        <ArchiveCard
+          :path="post.path"
+          :title="post.title"
+          :date="post.date"
+          :description="post.description"
+          :image="post.image"
+          :alt="post.alt"
+          :tags="post.tags"
+          :published="post.published" />
+      </template>
+
+      <ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
+    </div>
+
+    <div class="flex justify-center items-center space-x-6">
+      <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
+        <Icon
+          name="mdi:code-less-than"
+          size="30"
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }" />
+      </button>
+      <p>{{ pageNumber }} / {{ totalPage }}</p>
+      <button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
+        <Icon
+          name="mdi:code-greater-than"
+          size="30"
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }" />
+      </button>
+    </div>
+  </main>
+</template>