From e8ff379673e9df89f5828332f00065805a34d039 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Mon, 9 Jan 2023 23:01:40 +0600
Subject: [PATCH] make home page functional

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/blog/card.vue          | 35 +++++++++++++++++++------------
 content/blogs/1. hello-world.md   |  2 ++
 content/blogs/2. hello-man.md     |  1 +
 content/blogs/3. intro-to-nuxt.md |  1 +
 content/blogs/4. intro-to-vue.md  |  1 +
 content/blogs/5. intro-to-ts.md   |  1 +
 pages/index.vue                   | 18 ++++++++++++----
 7 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/components/blog/card.vue b/components/blog/card.vue
index 43c6f9d..1397082 100644
--- a/components/blog/card.vue
+++ b/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>
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index 6981279..9d0f02d 100644
--- a/content/blogs/1. hello-world.md	
+++ b/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
diff --git a/content/blogs/2. hello-man.md b/content/blogs/2. hello-man.md
index 2bde72c..f469ffe 100644
--- a/content/blogs/2. hello-man.md	
+++ b/content/blogs/2. hello-man.md	
@@ -1,6 +1,7 @@
 ---
 title: 'Title of the page'
 description: 'meta description of the page'
+time: 2Jan2022
 ---
 
 # BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
diff --git a/content/blogs/3. intro-to-nuxt.md b/content/blogs/3. intro-to-nuxt.md
index d18e420..4fc5107 100644
--- a/content/blogs/3. intro-to-nuxt.md	
+++ b/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
diff --git a/content/blogs/4. intro-to-vue.md b/content/blogs/4. intro-to-vue.md
index 30d7f34..5e506e6 100644
--- a/content/blogs/4. intro-to-vue.md	
+++ b/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
diff --git a/content/blogs/5. intro-to-ts.md b/content/blogs/5. intro-to-ts.md
index 215aeb4..29dc957 100644
--- a/content/blogs/5. intro-to-ts.md	
+++ b/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
diff --git a/pages/index.vue b/pages/index.vue
index 15067ab..552d4b4 100644
--- a/pages/index.vue
+++ b/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>