Generate category from blog post tag

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

pages/categories/index.vue

@@ -1,22 +1,22 @@
 <script lang="ts" setup>
 import { makeFirstCharUpper } from '@/utils/helper'
 
-const topics = [
-  'javascript',
-  'typescript',
-  'git',
-  'docker',
-  'kubernetes',
-  'vue',
-  'nuxt',
-  'pinia',
-  'vuex',
-  'firebase',
-  'supabse',
-  'cypress',
-  'vercel',
-  'namecheap',
-]
+const { data } = await useAsyncData('all-blog-post-for-category', () => queryContent('/blogs').sort({ _id: -1 }).find())
+
+const allTags = new Map()
+
+data.value?.forEach((blog) => {
+  const tags: Array<string> = blog.tags || []
+  tags.forEach((tag) => {
+    if (allTags.has(tag)) {
+      const cnt = allTags.get(tag)
+      allTags.set(tag, cnt + 1)
+    }
+    else {
+      allTags.set(tag, 1)
+    }
+  })
+})
 
 useHead({
   title: 'Categories',
@@ -37,7 +37,12 @@ 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 topics" :key="topic" :title="makeFirstCharUpper(topic)" />
+      <CategoryCard
+        v-for="topic in allTags"
+        :key="topic[0]"
+        :title="makeFirstCharUpper(topic[0])"
+        :count="topic[1]"
+      />
     </div>
   </main>
 </template>