update

app/pages/categories/[category].vue

@@ -1,64 +1,64 @@
 <script lang="ts" setup>
-import type { BlogPost } from '@/types/blog'
-const route = useRoute()
+import type { BlogPost } from "@/types/blog";
+const route = useRoute();
 
 // take category from route params & make first char upper
 const category = computed(() => {
-  const name = route.params.category || ''
-  let strName = ''
+  const name = route.params.category || "";
+  let strName = "";
 
-  if (Array.isArray(name)) strName = name.at(0) || ''
-  else strName = name
-  return strName
-})
+  if (Array.isArray(name)) strName = name.at(0) || "";
+  else strName = name;
+  return strName;
+});
 
 const { data } = await useAsyncData(`category-data-${category.value}`, () =>
-  queryCollection('content')
+  queryCollection("content")
     .all()
     .then((articles) =>
       articles.filter((article) => {
-        const meta = article.meta as unknown as BlogPost
-        return meta.tags.includes(category.value)
+        const meta = article.meta as unknown as BlogPost;
+        return meta.tags.includes(category.value);
       }),
     ),
-)
+);
 
 const formattedData = computed(() => {
   return data.value?.map((articles) => {
-    const meta = articles.meta as unknown as BlogPost
+    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',
+      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,
-    }
-  })
-})
+    };
+  });
+});
 
 useHead({
   title: category.value,
   meta: [
     {
-      name: 'description',
+      name: "description",
       content: `You will find all the ${category.value} related post here`,
     },
   ],
-})
+});
 
 // Generate OG Image
-const siteData = useSiteConfig()
+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>
@@ -76,8 +76,7 @@ defineOgImage({
         :alt="post.alt"
         :og-image="post.ogImage"
         :tags="post.tags"
-        :published="post.published"
-      />
+        :published="post.published" />
       <BlogEmpty v-if="data?.length === 0" />
     </div>
   </main>

app/pages/categories/index.vue

@@ -1,45 +1,45 @@
 <script lang="ts" setup>
-import { makeFirstCharUpper } from '@/utils/helper'
+import { makeFirstCharUpper } from "@/utils/helper";
 
-const { data } = await useAsyncData('all-blog-post-by-category', () =>
-  queryCollection('content').all(),
-)
+const { data } = await useAsyncData("all-blog-post-by-category", () =>
+  queryCollection("content").all(),
+);
 
-const allTags = new Map()
+const allTags = new Map();
 
 data.value?.forEach((blog) => {
-  const tags: Array<string> = (blog.meta.tags as string[]) || []
+  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 cnt = allTags.get(tag);
+      allTags.set(tag, cnt + 1);
     } else {
-      allTags.set(tag, 1)
+      allTags.set(tag, 1);
     }
-  })
-})
+  });
+});
 
 useHead({
-  title: 'Categories',
+  title: "Categories",
   meta: [
     {
-      name: 'description',
+      name: "description",
       content:
-        'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+        "Below All the topics are listed on which either I have written a blog or will write a blog in near future.",
     },
   ],
-})
+});
 
 // Generate OG Image
-const siteData = useSiteConfig()
+const siteData = useSiteConfig();
 defineOgImage({
   props: {
-    title: 'Categories',
+    title: "Categories",
     description:
-      'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+      "Below All the topics are listed on which either I have written a blog or will write a blog in near future.",
     siteName: siteData.url,
   },
-})
+});
 </script>
 
 <template>
@@ -50,8 +50,7 @@ defineOgImage({
         v-for="topic in allTags"
         :key="topic[0]"
         :title="makeFirstCharUpper(topic[0])"
-        :count="topic[1]"
-      />
+        :count="topic[1]" />
     </div>
   </main>
 </template>