feat: add dynamic FeaturedBlog

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>

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>