update

app/pages/archive/index.vue

@@ -1,24 +1,23 @@
 <script lang="ts" setup>
-import type { BlogPost } from "~/types/blog";
+// import type { BlogPost } from "~/types/blog";
 import { formatDate } from "~/utils/helper";
 
 const { data } = await useAsyncData("all-archive-post", () =>
-  queryCollection("content").order("date", "DESC").all(),
+  queryCollection("content").where("published", "=", true).order("date", "DESC").all(),
 );
 
 // const sortedData = computed(() => {
 const posts = computed(() => {
   return data.value?.map((articles) => {
-    const meta = articles.meta as unknown as BlogPost;
     return {
       path: articles.path,
       title: articles.title || "no-title available",
       description: articles.description || "no-description available",
-      image: meta.image || "/not-found.jpg",
-      alt: meta.alt || "no alter data available",
+      image: articles.image || "/not-found.jpg",
+      alt: articles.alt || "no alter data available",
       date: formatDate(articles.date) || "not-date-available",
-      tags: meta.tags || [],
-      published: meta.published || false,
+      tags: articles.tags || [],
+      published: articles.published || false,
     };
   });
 });

app/pages/blogs/[blog].vue

@@ -1,5 +1,6 @@
 <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";
 
@@ -12,17 +13,15 @@ const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
 if (error.value) navigateTo("/404");
 
 const data = computed<BlogPost>(() => {
-  const meta = articles?.value?.meta as unknown as BlogPost;
   return {
     title: articles.value?.title || "no-title available",
     description: articles.value?.description || "no-description available",
-    image: meta?.image || "/not-found.jpg",
-    alt: meta?.alt || "no alter data available",
-    date: meta?.date || "not-date-available",
-    tags: meta?.tags || [],
-    published: meta?.published || false,
-    categories: meta?.categories || [],
-    meta: meta || {},
+    image: articles.value?.image || "/not-found.jpg",
+    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 || "",
   };
 });
@@ -54,7 +53,7 @@ useHead({
         :title="data.title"
         :image="data.image"
         :alt="data.alt"
-        :date="formatDate(articles.date)"
+        :date="formatDate(data.date)"
         :description="data.description"
         :tags="data.tags" />
       <div
@@ -64,6 +63,9 @@ useHead({
             <p>No content found.</p>
           </template>
         </ContentRenderer>
+        <ClientOnly>
+          <Comment />
+        </ClientOnly>
       </div>
     </div>
 

app/pages/blogs/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Fuse from "fuse.js";
-import type { BlogPost } from "~/types/blog";
+// import type { BlogPost } from "~/types/blog";
 
 const { data } = await useAsyncData("all-blog-post", () => queryCollection("content").all());
 
@@ -11,16 +11,15 @@ const searchTest = ref("");
 const formattedData = computed(() => {
   return (
     data.value?.map((articles) => {
-      const meta = articles.meta as unknown as BlogPost;
       return {
         path: articles.path,
         title: articles.title || "no-title available",
         description: articles.description || "no-description available",
-        image: meta.image || "/not-found.jpg",
-        alt: meta.alt || "no alter data available",
-        date: meta.date || "not-date-available",
-        tags: meta.tags || [],
-        published: meta.published || false,
+        image: articles.image || "/not-found.jpg",
+        alt: articles.alt || "no alter data available",
+        date: articles.date || "not-date-available",
+        tags: articles.tags || [],
+        published: articles.published || false,
       };
     }) || []
   );

app/pages/categories/[category].vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { BlogPost } from "@/types/blog";
+// import type { BlogPost } from "@/types/blog";
 const route = useRoute();
 
 // Take category from route params & ensure it's a valid string
@@ -13,37 +13,27 @@ const category = computed(() => {
 });
 
 const { data } = await useAsyncData(`category-data-${category.value}`, () =>
-  queryCollection("content")
-    .all()
-    .then((articles) =>
-      articles.filter((article) => {
-        const meta = article.meta as unknown as BlogPost;
-        return (
-          meta.published &&
-          meta.categories?.map((cat) => cat.toLowerCase()).includes(category.value)
-        ); // Case-insensitive matching
-      }),
-    ),
+  queryCollection("content").where("published", "=", true).all(),
 );
 
 const formattedData = computed(() => {
   return (
     data.value
-      ?.map((articles) => {
-        const meta = articles.meta as unknown as BlogPost;
+      ?.filter((article) =>
+        article.categories?.map((cat) => cat.toLowerCase()).includes(category.value),
+      )
+      .map((articles) => {
         return {
           path: articles.path,
           title: articles.title || "no-title available",
           description: articles.description || "no-description available",
-          image: meta.image || "/blogs-img/blog.jpg",
-          alt: meta.alt || "no alter data available",
-          ogImage: meta.ogImage || "/blogs-img/blog.jpg",
-          date: meta.date || "not-date-available",
-          tags: meta.tags || [],
-          published: meta.published || false,
+          image: articles.image || "/blogs-img/blog.jpg",
+          alt: articles.alt || "no alter data available",
+          date: articles.date || "not-date-available",
+          tags: articles.tags || [],
+          published: articles.published || false,
         };
-      })
-      .filter((post) => post.published) || [] // Ensure only published posts are shown
+      }) || []
   );
 });
 
@@ -67,11 +57,10 @@ useHead({
         :key="post.title"
         :path="post.path"
         :title="post.title"
-        :date="post.date"
+        :date="formatDate(post.date)"
         :description="post.description"
         :image="post.image"
         :alt="post.alt"
-        :og-image="post.ogImage"
         :tags="post.tags"
         :published="post.published" />
       <BlogEmpty v-if="formattedData.length === 0" />

app/pages/categories/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 const { data } = await useAsyncData("all-blog-post-by-category", () =>
-  queryCollection("content").all(),
+  queryCollection("content").select("path", "categories").where("published", "=", true).all(),
 );
 
 const allTags = new Map();
 
 data.value?.forEach((blog) => {
-  const categories: Array<string> = (blog.meta.categories as string[]) || [];
+  const categories: Array<string> = (blog.categories as string[]) || [];
   categories.forEach((category) => {
     if (allTags.has(category)) {
       const cnt = allTags.get(category);

app/pages/tags/[tag].vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { BlogPost } from "@/types/blog";
 const route = useRoute();
 
 const tag = computed(() => {
@@ -16,26 +15,28 @@ const { data } = await useAsyncData(`tag-data-${tag.value}`, () =>
     .all()
     .then((articles) =>
       articles.filter((article) => {
-        const meta = article.meta as unknown as BlogPost;
-        return meta.published && meta.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase());
+        return (
+          article.published && article.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase())
+        );
       }),
     ),
 );
 
 const formattedData = computed(() => {
-  return data.value?.map((articles) => {
-    const meta = articles.meta as unknown as BlogPost;
-    return {
-      path: articles.path,
-      title: articles.title || "no-title available",
-      description: articles.description || "no-description available",
-      image: meta.image || "/blogs-img/blog.jpg",
-      alt: meta.alt || "no alter data available",
-      date: formatDate(articles.date) || "not-date-available",
-      tags: meta.tags || [],
-      published: meta.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 || "/blogs-img/blog.jpg",
+        alt: articles.alt || "no alter data available",
+        date: formatDate(articles.date) || "not-date-available",
+        tags: articles.tags || [],
+        published: articles.published || false,
+      };
+    }) || []
+  );
 });
 
 useHead({

app/pages/tags/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 const { data } = await useAsyncData("all-blog-post-by-tags", () =>
-  queryCollection("content").all(),
+  queryCollection("content").select("path", "tags").where("published", "=", true).all(),
 );
 
 const allTags = new Map();
 
 data.value?.forEach((blog) => {
-  const tags: Array<string> = (blog.meta.tags as string[]) || [];
+  const tags: Array<string> = (blog.tags as string[]) || [];
   tags.forEach((tag) => {
     if (allTags.has(tag)) {
       const cnt = allTags.get(tag);