From 214458e9cb54ad1df51907d410deed8530965c47 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sat, 18 Nov 2023 15:54:17 +0600
Subject: [PATCH] Fix tag issue

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/category/card.vue    |  7 ++++---
 components/category/topic.vue   |  4 ++--
 pages/categories/[category].vue | 36 ++++++++++++++++-----------------
 pages/categories/index.vue      |  6 ++----
 4 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/components/category/card.vue b/components/category/card.vue
index 613e5bf..b1fde1d 100644
--- a/components/category/card.vue
+++ b/components/category/card.vue
@@ -33,16 +33,17 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <template>
   <div
-    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
+    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline
+    rand-bg-color hover:scale-[1.05] transition-all duration-500"
   >
-    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
+    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
       <h1>#{{ title }}</h1>
     </NuxtLink>
   </div>
 </template>
 
 <style scoped>
-.randbgcolor {
+.rand-bg-color {
   background-color: v-bind(picAColor);
 }
 </style>
diff --git a/components/category/topic.vue b/components/category/topic.vue
index b548601..ee0028a 100644
--- a/components/category/topic.vue
+++ b/components/category/topic.vue
@@ -17,8 +17,8 @@ const category = computed(() => {
 
 <template>
   <div class="container mx-auto">
-    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200">
-      <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
+    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-gray-800">
+      <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
         #{{ category }}
       </h1>
     </div>
diff --git a/pages/categories/[category].vue b/pages/categories/[category].vue
index 6b9d229..4e79417 100644
--- a/pages/categories/[category].vue
+++ b/pages/categories/[category].vue
@@ -12,18 +12,18 @@ const category = computed(() => {
   return strName
 })
 
-const { data } = await useAsyncData('home', () =>
+const { data } = await useAsyncData(`category-data-${category.value}`, () =>
   queryContent('/blogs')
     .where({ tags: { $contains: category.value } })
     .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',
+      description: articles.description || 'no-description available',
       image: articles.image || '/nuxt-blog/no-image_cyyits.png',
       alt: articles.alt || 'no alter data available',
       ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
@@ -52,22 +52,20 @@ defineOgImage()
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryTopic />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in formatedData" :key="post.title">
-        <BlogCard
-          :path="post.path"
-          :title="post.title"
-          :date="post.date"
-          :description="post.description"
-          :image="post.image"
-          :alt="post.alt"
-          :og-image="post.ogImage"
-          :tags="post.tags"
-          :published="post.published"
-        />
-      </template>
-      <template v-if="data?.length === 0">
-        <BlogEmpty />
-      </template>
+      <BlogCard
+        v-for="post in formattedData"
+        :key="post.title"
+        :path="post.path"
+        :title="post.title"
+        :date="post.date"
+        :description="post.description"
+        :image="post.image"
+        :alt="post.alt"
+        :og-image="post.ogImage"
+        :tags="post.tags"
+        :published="post.published"
+      />
+      <BlogEmpty v-if="data?.length === 0" />
     </div>
   </main>
 </template>
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index 8cf4edf..18ebbc2 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -24,7 +24,7 @@ useHead({
     {
       name: 'description',
       content:
-        'Blow 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.',
     },
   ],
   titleTemplate: 'Riyad\'s Blog - %s',
@@ -37,9 +37,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">
-      <template v-for="topic in topics" :key="topic">
-        <CategoryCard :title="makeFirstCharUpper(topic)" />
-      </template>
+      <CategoryCard v-for="topic in topics" :key="topic" :title="makeFirstCharUpper(topic)" />
     </div>
   </main>
 </template>