make home page functional

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

components/blog/card.vue

@@ -1,37 +1,46 @@
 <script lang="ts" setup>
-defineProps<{
+interface Props {
   title: string
-  excerpt?: string
-  image?: string
-  slug?: string
-}>()
+  description: string
+  time: string
+  link: string
+  tags: Array<string>
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'No title availabe',
+  description: 'No description available',
+  time: 'No time available',
+  link: '/',
+  tags: () => ['no-tag'],
+})
 </script>
 
 <template>
   <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
-    <NuxtLink :to="slug" class="">
+    <NuxtLink :to="link">
       <img
         class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
         src="/blogs/hello-world/riyad.jpg"
-        alt="card photo"
+        :alt="title"
       />
       <div class="text-black text-sm pt-4 pb-2">
         <div class="flex items-center">
           <LogoDate />
-          3rd July 2022
+          {{ time }}
         </div>
         <div class="flex items-center gap-1 flex-wrap">
           <LogoTag />
-          <span>JavaScript</span>
-          <span>Typescript</span>
-          <span>Clean</span>
+          <template v-for="tag in tags" :key="tag">
+            <span>{{ tag }}</span>
+          </template>
         </div>
       </div>
       <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
-        This is the card title
+        {{ title }}
       </h2>
       <p class="text-ellipsis line-clamp-3">
-        {{ excerpt }}
+        {{ description }}
       </p>
       <div class="flex group-hover:underline text-sky-600 items-center pt-2">
         <p>Read More</p>

content/blogs/1. hello-world.md

@@ -1,6 +1,8 @@
 ---
 title: 'Title of the page'
 description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
+time: 10Jan2022
+tags: ['sdf', 'sdf', 'sdf']
 ---
 
 ::CustomTitle

content/blogs/2. hello-man.md

@@ -1,6 +1,7 @@
 ---
 title: 'Title of the page'
 description: 'meta description of the page'
+time: 2Jan2022
 ---
 
 # BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

content/blogs/3. intro-to-nuxt.md

@@ -1,6 +1,7 @@
 ---
 title: 'Title of the page'
 description: 'meta description of the page'
+time: 4Nov2022
 ---
 
 # CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc

content/blogs/4. intro-to-vue.md

@@ -1,6 +1,7 @@
 ---
 title: 'Title of the page'
 description: 'meta description of the page'
+time: 1Oct2022
 ---
 
 # DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

content/blogs/5. intro-to-ts.md

@@ -1,6 +1,7 @@
 ---
 title: 'Title of the page'
 description: 'meta description of the page'
+time: 1Jan2023
 ---
 
 # Hello man

pages/index.vue

@@ -7,16 +7,26 @@ useHead({
       content: 'Home',
     },
   ],
-  titleTemplate: "Elon's Blog - %s",
+  titleTemplate: "Riyad's Blog - %s",
 })
-const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
+
+// Get Last 6 Publish Post from the content/blog directory
+const { data } = await useAsyncData('home', () =>
+  queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
+)
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="n in data" :key="n">
-        <BlogCard :title="n.title || ''" :excerpt="n.description" image="sdlfkj" :slug="n._path" />
+      <template v-for="post in data" :key="n">
+        <BlogCard
+          :title="post.title"
+          :description="post.description"
+          :link="post._path"
+          :time="post.time"
+          :tags="post.tags"
+        />
       </template>
     </div>
   </main>