From a8a04733710de70d26d3341d9d57ec8b3a3865a2 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Wed, 20 Dec 2023 22:50:21 +0600
Subject: [PATCH] Generate category from blog post tag

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/category/card.vue    |  4 +++-
 components/category/hero.vue    |  3 +--
 components/category/topic.vue   |  2 +-
 components/main/recent.vue      | 25 ++++++++++-----------
 components/main/trending.vue    | 24 ++++++++++----------
 pages/blogs/[blog].vue          |  6 ++---
 pages/blogs/index.vue           | 22 +++++++++----------
 pages/categories/[category].vue |  2 +-
 pages/categories/index.vue      | 39 +++++++++++++++++++--------------
 9 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/components/category/card.vue b/components/category/card.vue
index b1fde1d..262cdef 100644
--- a/components/category/card.vue
+++ b/components/category/card.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 interface Props {
   title: string
+  count: number
 }
 
 withDefaults(defineProps<Props>(), {
   title: 'No title available',
+  count: 0,
 })
 
 // some random color for tags
@@ -37,7 +39,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
     rand-bg-color hover:scale-[1.05] transition-all duration-500"
   >
     <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
-      <h1>#{{ title }}</h1>
+      <h1>#{{ title }}({{ count }})</h1>
     </NuxtLink>
   </div>
 </template>
diff --git a/components/category/hero.vue b/components/category/hero.vue
index 7f5a40f..021aca3 100644
--- a/components/category/hero.vue
+++ b/components/category/hero.vue
@@ -6,8 +6,7 @@
           Categories
         </h1>
         <p class="dark:text-zinc-300">
-          Blow All the topics are listed on which either I have written a blog or will write a blog
-          in near future.
+          Blow this category is generated from all the tags are mentioned in the different blog post
         </p>
       </div>
       <div class="px-6 justify-self-center">
diff --git a/components/category/topic.vue b/components/category/topic.vue
index ff228d1..8208945 100644
--- a/components/category/topic.vue
+++ b/components/category/topic.vue
@@ -17,7 +17,7 @@ const category = computed(() => {
 
 <template>
   <div class="container mx-auto">
-    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-slate-900">
+    <div class="p-6 my-4 mx-2 rounded-md bg-gray-200 dark:bg-slate-900">
       <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
         #{{ category }}
       </h1>
diff --git a/components/main/recent.vue b/components/main/recent.vue
index a8bd317..b7f3497 100644
--- a/components/main/recent.vue
+++ b/components/main/recent.vue
@@ -4,15 +4,15 @@ const { data } = await useAsyncData('recent-post', () =>
   queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
 )
 
-const formatedData = computed(() => {
+const formattedData = computed(() => {
   return data.value?.map((articles) => {
     return {
       path: articles._path,
       title: articles.title || 'no-title available',
-      description: articles.description || 'no-descriptoin available',
-      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      description: articles.description || 'no-description available',
+      image: articles.image || '/not-found.jpg',
       alt: articles.alt || 'no alter data available',
-      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      ogImage: articles.ogImage || '/not-found.jpg',
       date: articles.date || 'not-date-available',
       tags: articles.tags || [],
       published: articles.published || false,
@@ -34,17 +34,16 @@ useHead({
 </script>
 
 <template>
-  <div class="pb-10">
-    <div class="px-6">
-      <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
-        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300  " />
-        <h2 class="text-4xl font-semibold text-black dark:text-zinc-300   ">
-          Recent Post
-        </h2>
-      </div>
+  <div class="pb-10 px-4">
+    <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
+      <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300  " />
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300   ">
+        Recent Post
+      </h2>
     </div>
+
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in formatedData" :key="post.title">
+      <template v-for="post in formattedData" :key="post.title">
         <BlogCard
           :path="post.path"
           :title="post.title"
diff --git a/components/main/trending.vue b/components/main/trending.vue
index d2b01c5..aa6dcf6 100644
--- a/components/main/trending.vue
+++ b/components/main/trending.vue
@@ -4,15 +4,15 @@ const { data } = await useAsyncData('trending-post', () =>
   queryContent('/blogs').limit(3).sort({ _id: 1 }).find(),
 )
 
-const formatedData = computed(() => {
+const formattedData = computed(() => {
   return data.value?.map((articles) => {
     return {
       path: articles._path,
       title: articles.title || 'no-title available',
-      description: articles.description || 'no-descriptoin available',
-      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      description: articles.description || 'no-description available',
+      image: articles.image || '/not-found.jpg',
       alt: articles.alt || 'no alter data available',
-      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      ogImage: articles.ogImage || '/not-found.jpg',
       date: articles.date || 'not-date-available',
       tags: articles.tags || [],
       published: articles.published || false,
@@ -34,17 +34,15 @@ useHead({
 </script>
 
 <template>
-  <div>
-    <div class="px-6">
-      <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
-        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300  " />
-        <h2 class="text-4xl font-semibold text-black dark:text-zinc-300  ">
-          Trending Post
-        </h2>
-      </div>
+  <div class="px-4">
+    <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
+      <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300  " />
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300  ">
+        Trending Post
+      </h2>
     </div>
     <div class="grid grid-cols-1 ">
-      <template v-for="post in formatedData" :key="post.title">
+      <template v-for="post in formattedData" :key="post.title">
         <ArchiveCard
           :path="post.path"
           :title="post.title"
diff --git a/pages/blogs/[blog].vue b/pages/blogs/[blog].vue
index 5965ef5..1aead36 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -11,10 +11,10 @@ if (error.value)
 const data = computed<BlogPost>(() => {
   return {
     title: articles.value?.title || 'no-title available',
-    description: articles.value?.description || 'no-descriptoin available',
-    image: articles.value?.image || '/nuxt-blog/no-image_cyyits.png',
+    description: articles.value?.description || 'no-description available',
+    image: articles.value?.image || '/not-found.jpg',
     alt: articles.value?.alt || 'no alter data available',
-    ogImage: articles.value?.ogImage || '/nuxt-blog/no-image_cyyits.png',
+    ogImage: articles.value?.ogImage || '/not-found.jpg',
     date: articles.value?.date || 'not-date-available',
     tags: articles.value?.tags || [],
     published: articles.value?.published || false,
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index 812ba99..a4d569e 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
 
-const elementPerPgae = ref(4)
+const elementPerPage = ref(5)
 const pageNumber = ref(1)
 const searchTest = ref('')
 
-const formatedData = computed(() => {
+const formattedData = computed(() => {
   return data.value?.map((articles) => {
     return {
       path: articles._path,
       title: articles.title || 'no-title available',
-      description: articles.description || 'no-descriptoin available',
-      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      description: articles.description || 'no-description available',
+      image: articles.image || '/not-found.jpg',
       alt: articles.alt || 'no alter data available',
-      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      ogImage: articles.ogImage || '/not-found.jpg',
       date: articles.date || 'not-date-available',
       tags: articles.tags || [],
       published: articles.published || false,
@@ -22,7 +22,7 @@ const formatedData = computed(() => {
 })
 
 const searchData = computed(() => {
-  return formatedData.value.filter((data) => {
+  return formattedData.value.filter((data) => {
     const lowerTitle = data.title.toLocaleLowerCase()
     if (lowerTitle.search(searchTest.value) !== -1)
       return true
@@ -32,8 +32,8 @@ const searchData = computed(() => {
 
 const paginatedData = computed(() => {
   return searchData.value.filter((data, idx) => {
-    const startInd = ((pageNumber.value - 1) * elementPerPgae.value)
-    const endInd = (pageNumber.value * elementPerPgae.value) - 1
+    const startInd = ((pageNumber.value - 1) * elementPerPage.value)
+    const endInd = (pageNumber.value * elementPerPage.value) - 1
 
     if (idx >= startInd && idx <= endInd)
       return true
@@ -48,7 +48,7 @@ function onPreviousPageClick() {
 
 const totalPage = computed(() => {
   const ttlContent = searchData.value.length || 0
-  const totalPage = Math.ceil(ttlContent / elementPerPgae.value)
+  const totalPage = Math.ceil(ttlContent / elementPerPage.value)
   return totalPage
 })
 
@@ -75,7 +75,7 @@ defineOgImage()
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
 
-    <div class="px-3">
+    <div class="px-6">
       <input
         v-model="searchTest"
         placeholder="Search"
@@ -85,7 +85,7 @@ defineOgImage()
     </div>
 
     <ClientOnly>
-      <div v-auto-animate class="space-y-5 my-5">
+      <div v-auto-animate class="space-y-5 my-5 px-4">
         <template v-for="post in paginatedData" :key="post.title">
           <ArchiveCard
             :path="post.path"
diff --git a/pages/categories/[category].vue b/pages/categories/[category].vue
index 4e79417..f754ed0 100644
--- a/pages/categories/[category].vue
+++ b/pages/categories/[category].vue
@@ -49,7 +49,7 @@ defineOgImage()
 </script>
 
 <template>
-  <main class="container max-w-5xl mx-auto text-zinc-600">
+  <main class="container max-w-5xl mx-auto text-zinc-600 px-4">
     <CategoryTopic />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       <BlogCard
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index 18ebbc2..9f6c087 100644
--- a/pages/categories/index.vue
+++ b/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>