update

app/pages/categories/[category].vue

@@ -2,14 +2,14 @@
 import type { BlogPost } from "@/types/blog";
 const route = useRoute();
 
-// take category from route params & make first char upper
+// Take category from route params & ensure it's a valid string
 const category = computed(() => {
   const name = route.params.category || "";
   let strName = "";
 
   if (Array.isArray(name)) strName = name.at(0) || "";
   else strName = name;
-  return strName;
+  return strName.trim().toLowerCase(); // Convert to lowercase for case-insensitive matching
 });
 
 const { data } = await useAsyncData(`category-data-${category.value}`, () =>
@@ -18,26 +18,33 @@ const { data } = await useAsyncData(`category-data-${category.value}`, () =>
     .then((articles) =>
       articles.filter((article) => {
         const meta = article.meta as unknown as BlogPost;
-        return meta.tags.includes(category.value);
+        return (
+          meta.published &&
+          meta.categories?.map((cat) => cat.toLowerCase()).includes(category.value)
+        ); // Case-insensitive matching
       }),
     ),
 );
 
 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",
-      ogImage: meta.ogImage || "/blogs-img/blog.jpg",
-      date: meta.date || "not-date-available",
-      tags: meta.tags || [],
-      published: meta.published || false,
-    };
-  });
+  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",
+          ogImage: meta.ogImage || "/blogs-img/blog.jpg",
+          date: meta.date || "not-date-available",
+          tags: meta.tags || [],
+          published: meta.published || false,
+        };
+      })
+      .filter((post) => post.published) || [] // Ensure only published posts are shown
+  );
 });
 
 useHead({
@@ -49,16 +56,6 @@ useHead({
     },
   ],
 });
-
-// Generate OG Image
-const siteData = useSiteConfig();
-defineOgImage({
-  props: {
-    title: category.value?.toUpperCase(),
-    description: `You will find all the ${category.value} related post here`,
-    siteName: siteData.url,
-  },
-});
 </script>
 
 <template>
@@ -77,7 +74,7 @@ defineOgImage({
         :og-image="post.ogImage"
         :tags="post.tags"
         :published="post.published" />
-      <BlogEmpty v-if="data?.length === 0" />
+      <BlogEmpty v-if="formattedData.length === 0" />
     </div>
   </main>
 </template>

app/pages/categories/index.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { makeFirstCharUpper } from "@/utils/helper";
-
 const { data } = await useAsyncData("all-blog-post-by-category", () =>
   queryCollection("content").all(),
 );
@@ -8,13 +6,13 @@ const { data } = await useAsyncData("all-blog-post-by-category", () =>
 const allTags = new Map();
 
 data.value?.forEach((blog) => {
-  const tags: Array<string> = (blog.meta.tags as string[]) || [];
-  tags.forEach((tag) => {
-    if (allTags.has(tag)) {
-      const cnt = allTags.get(tag);
-      allTags.set(tag, cnt + 1);
+  const categories: Array<string> = (blog.meta.categories as string[]) || [];
+  categories.forEach((category) => {
+    if (allTags.has(category)) {
+      const cnt = allTags.get(category);
+      allTags.set(category, cnt + 1);
     } else {
-      allTags.set(tag, 1);
+      allTags.set(category, 1);
     }
   });
 });
@@ -46,11 +44,7 @@ defineOgImage({
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryHero />
     <div class="flex flex-wrap px-6 mt-12 gap-3">
-      <CategoryCard
-        v-for="topic in allTags"
-        :key="topic[0]"
-        :title="makeFirstCharUpper(topic[0])"
-        :count="topic[1]" />
+      <CategoryCard v-for="topic in allTags" :key="topic[0]" :title="topic[0]" :count="topic[1]" />
     </div>
   </main>
 </template>