add empty card when data not available

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

pages/categories/[category].vue

@@ -10,7 +10,23 @@ useHead({
   titleTemplate: "Elon's Blog - %s",
 })
 
-const { data } = await useAsyncData('home', () => queryContent('/blogs').where({}).find())
+const route = useRoute()
+
+// take category from route params & make first char upper
+const category = computed(() => {
+  let name = route.params.category || ''
+  let strName = ''
+
+  if (name instanceof Array) strName = name.at(0) || ''
+  else strName = name
+  return strName
+})
+
+const { data } = await useAsyncData('home', () =>
+  queryContent('/blogs')
+    .where({ tags: { $contains: category.value } })
+    .find()
+)
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
@@ -19,6 +35,9 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').where({
       <template v-for="n in data" :key="n">
         <BlogCard :title="n.title || ''" :excerpt="n.description" image="sdlfkj" :slug="n._path" />
       </template>
+      <template v-if="data?.length === 0">
+        <BlogEmpty />
+      </template>
     </div>
   </main>
 </template>

pages/categories/index.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { makeFirstCharUpper } from '@/utils/helper'
+
 useHead({
   title: 'Home',
   meta: [
@@ -10,18 +12,18 @@ useHead({
   titleTemplate: "Riyad's Blog - %s",
 })
 const topics = [
-  'Javascript',
-  'Typescript',
-  'Git',
-  'Docker',
-  'Kubernetes',
-  'Vue',
-  'Nuxt',
-  'Pinia',
-  'Vuex',
-  'Firebase',
-  'Supabse',
-  'Cypress',
+  'javascript',
+  'typescript',
+  'git',
+  'docker',
+  'kubernetes',
+  'vue',
+  'nuxt',
+  'pinia',
+  'vuex',
+  'firebase',
+  'supabse',
+  'cypress',
 ]
 </script>
 <template>
@@ -29,7 +31,7 @@ const topics = [
     <CategoryHero />
     <div class="flex flex-wrap px-6 mt-12 gap-3">
       <template v-for="topic in topics" :key="n">
-        <CategoryCard :title="topic" />
+        <CategoryCard :title="makeFirstCharUpper(topic)" />
       </template>
     </div>
   </main>

pages/index.vue

@@ -28,6 +28,9 @@ const { data } = await useAsyncData('home', () =>
           :tags="post.tags"
         />
       </template>
+      <template v-if="data?.length === 0">
+        <BlogEmpty />
+      </template>
     </div>
   </main>
 </template>