From d642a707733b6c3874a6f2dfe03426efae66cc46 Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Thu, 1 Jul 2021 00:33:45 +0700
Subject: [PATCH] feat: add dynamic FeaturedBlog

---
 components/organisms/FeaturedBlog.vue | 30 +++++++++++++++++++++------
 pages/blog/page/_page.vue             |  2 +-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/components/organisms/FeaturedBlog.vue b/components/organisms/FeaturedBlog.vue
index 6866703..dc467a6 100644
--- a/components/organisms/FeaturedBlog.vue
+++ b/components/organisms/FeaturedBlog.vue
@@ -3,21 +3,29 @@
     <div class="column is-12 post">
       <article class="columns featured">
         <div class="column is-7 post-img ">
-          <img src="https://cdn.emk.dev/templates/featured-image.png" alt="">
+          <img :src="firstBlog.image" :alt="firstBlog.title">
         </div>
         <div class="column is-5 featured-content va">
           <div>
             <h3 class="heading post-category">
-              Category Name
+              <NuxtLink
+                v-for="(tag, index) in firstBlog.tags"
+                :key="index"
+                to="/"
+              >
+                {{ tag }}
+              </NuxtLink>
             </h3>
             <h1 class="title post-title">
-              Blog Posts Template
+              {{ firstBlog.title }}
             </h1>
             <p class="post-excerpt">
-              This template is based off of the official default blog template created by the fine folks over at <a href="https://ghost.io">Ghost</a>. If you are looking for a fully featured blog platform, I highly recommend checking them out!
+              {{ firstBlog.description }}
             </p>
             <br>
-            <a href="#" class="button is-primary">Read More</a>
+            <NuxtLink :to="firstBlog.path" class="button is-primary">
+              Read More
+            </NuxtLink>
           </div>
         </div>
       </article>
@@ -28,7 +36,17 @@
 <script>
 import { Vue, Component } from 'nuxt-property-decorator'
 
-@Component
+@Component({
+  props: {
+    firstBlog: {
+      type: Object,
+      required: true
+    }
+  }
+})
 export default class FeaturedBlog extends Vue {
+  mounted () {
+    console.log(this.firstBlog)
+  }
 }
 </script>
diff --git a/pages/blog/page/_page.vue b/pages/blog/page/_page.vue
index 19e8a50..c616d5b 100644
--- a/pages/blog/page/_page.vue
+++ b/pages/blog/page/_page.vue
@@ -3,7 +3,7 @@
     <div class="container">
       <div class="columns">
         <div class="column is-10 is-offset-1">
-          <FeaturedBlog />
+          <FeaturedBlog :first-blog="allArticles[0]" />
           <hr>
           <ListBlog />
         </div>