update

app/pages/archive/index.vue

@@ -1,34 +1,62 @@
 <script lang="ts" setup>
-// import type { BlogPost } from "~/types/blog";
-import { formatDate } from "~/utils/helper";
+import Fuse from "fuse.js";
+import { formatDate, getRandomFallbackImage } from "~/utils/helper";
 
 const { data } = await useAsyncData("all-archive-post", () =>
   queryCollection("content").where("published", "=", true).order("date", "DESC").all(),
 );
 
-// const sortedData = computed(() => {
+const searchTest = ref("");
+
 const posts = 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 || "/not-found.jpg",
-      alt: articles.alt || "no alter data available",
-      date: formatDate(articles.date) || "not-date-available",
-      tags: articles.tags || [],
-      published: articles.published || false,
-    };
+  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: formatDate(articles.date) || "not-date-available",
+        tags: articles.tags || [],
+        published: articles.published || false,
+      };
+    }) || []
+  );
+});
+
+const fuse = computed(() => {
+  return new Fuse(posts.value, {
+    keys: ["title", "description"],
+    threshold: 0.4,
+    includeScore: false,
   });
 });
+
+const searchResults = computed(() => {
+  if (!searchTest.value.trim()) {
+    return posts.value;
+  }
+
+  const results = fuse.value.search(searchTest.value);
+  return results.map((result) => result.item);
+});
 </script>
 
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <h1 class="text-3xl font-bold my-6">Archive</h1>
 
+    <div class="px-6 mb-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 posts" :key="post.title">
+      <template v-for="post in searchResults" :key="post.title">
         <ArchiveCard
           :path="post.path"
           :title="post.title"
@@ -38,6 +66,8 @@ const posts = computed(() => {
           :tags="post.tags"
           :published="post.published" />
       </template>
+
+      <ArchiveCard v-if="searchResults.length <= 0" title="No Post Found" image="/not-found.jpg" />
     </div>
   </main>
 </template>

app/pages/posts/[post].vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { BlogPost } from "@/types/blog";
 import Comment from "~/components/blog/Comment.vue";
-import { seoData } from "~/data";
-import { formatDate } from "~/utils/helper";
+import siteConfig from "~/config";
 
 const { path } = useRoute();
 
@@ -16,7 +15,7 @@ const data = computed<BlogPost>(() => {
   return {
     title: articles.value?.title || "no-title available",
     description: articles.value?.description || "no-description available",
-    image: articles.value?.image || "/not-found.jpg",
+    image: articles.value?.image || "",
     alt: articles.value?.alt || "no alter data available",
     date: articles.value?.date || "not-date-available",
     tags: articles.value?.tags || [],
@@ -27,18 +26,15 @@ const data = computed<BlogPost>(() => {
 });
 
 useHead({
-  title: data.value.title || "",
+  title: siteConfig.siteMeta.title || "",
   meta: [
-    { name: "description", content: data.value.description },
-    {
-      name: "description",
-      content: data.value.description,
-    },
+    { name: "description", content: siteConfig.siteMeta.description },
+    { name: "author", content: siteConfig.siteMeta.author },
   ],
   link: [
     {
       rel: "canonical",
-      href: `${seoData.mySite}/${path}`,
+      href: `${siteConfig.siteMeta.url}/${path}`,
     },
   ],
 });

app/pages/posts/index.vue

@@ -1,5 +1,6 @@
 <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());
@@ -15,7 +16,7 @@ const formattedData = computed(() => {
         path: articles.path,
         title: articles.title || "no-title available",
         description: articles.description || "no-description available",
-        image: articles.image || "/not-found.jpg",
+        image: articles.image || getRandomFallbackImage(),
         alt: articles.alt || "no alter data available",
         date: articles.date || "not-date-available",
         tags: articles.tags || [],

app/pages/tags/index.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import siteConfig from "~/config";
+
 const { data } = await useAsyncData("all-blog-post-by-tags", () =>
   queryCollection("content").select("path", "tags").where("published", "=", true).all(),
 );
@@ -18,11 +20,11 @@ data.value?.forEach((blog) => {
 });
 
 useHead({
-  title: "Tags",
+  title: `${siteConfig.siteMeta.title} - Tags`,
   meta: [
     {
       name: "description",
-      content: "Explore all the tags used in the blog posts.",
+      content: "浏览所有标签，浏览我写过的文章的标签。",
     },
   ],
 });