From e843aa1d7fd7a81c960bf0186f4c3169f1dbf289 Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Wed, 30 Jun 2021 23:51:21 +0700
Subject: [PATCH] feat: separate ListBlog template

---
 components/organisms/FeaturedBlog.vue |  36 ++++++---
 components/organisms/ListBlog.vue     | 112 ++++++++++++++++++++++++++
 pages/blog/page/_page.vue             |  83 ++-----------------
 3 files changed, 140 insertions(+), 91 deletions(-)

diff --git a/components/organisms/FeaturedBlog.vue b/components/organisms/FeaturedBlog.vue
index 366dace..6866703 100644
--- a/components/organisms/FeaturedBlog.vue
+++ b/components/organisms/FeaturedBlog.vue
@@ -1,18 +1,28 @@
 <template>
-  <article class="columns featured">
-    <div class="column is-7 post-img ">
-      <img src="https://cdn.emk.dev/templates/featured-image.png" alt="">
+  <div class="columns featured-post is-multiline">
+    <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="">
+        </div>
+        <div class="column is-5 featured-content va">
+          <div>
+            <h3 class="heading post-category">
+              Category Name
+            </h3>
+            <h1 class="title post-title">
+              Blog Posts Template
+            </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!
+            </p>
+            <br>
+            <a href="#" class="button is-primary">Read More</a>
+          </div>
+        </div>
+      </article>
     </div>
-    <div class="column is-5 featured-content va">
-      <div>
-        <h3 class="heading post-category">Category Name</h3>
-        <h1 class="title post-title">Blog Posts Template</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!</p>
-        <br>
-        <a href="#" class="button is-primary">Read More</a>
-      </div>
-    </div>
-  </article>
+  </div>
 </template>
 
 <script>
diff --git a/components/organisms/ListBlog.vue b/components/organisms/ListBlog.vue
index e69de29..c811514 100755
--- a/components/organisms/ListBlog.vue
+++ b/components/organisms/ListBlog.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="columns is-multiline">
+    <div class="column post is-6">
+      <article class="columns is-multiline">
+        <div class="column is-12 post-img">
+          <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
+        </div>
+        <div class="column is-12 featured-content ">
+          <h3 class="heading post-category">
+            Category Name
+          </h3>
+          <h1 class="title post-title">
+            Slightly Longer Blog Post Title
+          </h1>
+          <p class="post-excerpt">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.
+          </p>
+          <br>
+          <a href="#" class="button is-primary">Read More</a>
+        </div>
+      </article>
+    </div>
+    <div class="column post is-6">
+      <article class="columns is-multiline">
+        <div class="column is-12 post-img">
+          <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
+        </div>
+        <div class="column is-12 featured-content ">
+          <h3 class="heading post-category">
+            Category Name
+          </h3>
+          <h1 class="title post-title">
+            Slightly Longer Blog Post Title
+          </h1>
+          <p class="post-excerpt">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.
+          </p>
+          <br>
+          <a href="#" class="button is-primary">Read More</a>
+        </div>
+      </article>
+    </div>
+    <div class="column post is-4">
+      <article class="columns is-multiline">
+        <div class="column is-12 post-img">
+          <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
+        </div>
+        <div class="column is-12 featured-content ">
+          <h3 class="heading post-category">
+            Category Name
+          </h3>
+          <h1 class="title post-title">
+            Slightly Longer Blog Post Title
+          </h1>
+          <p class="post-excerpt">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.
+          </p>
+          <br>
+          <a href="#" class="button is-primary">Read More</a>
+        </div>
+      </article>
+    </div>
+    <div class="column post is-4">
+      <article class="columns is-multiline">
+        <div class="column is-12 post-img">
+          <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
+        </div>
+        <div class="column is-12 featured-content ">
+          <h3 class="heading post-category">
+            Category Name
+          </h3>
+          <h1 class="title post-title">
+            Slightly Longer Blog Post Title
+          </h1>
+          <p class="post-excerpt">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.
+          </p>
+          <br>
+          <a href="#" class="button is-primary">Read More</a>
+        </div>
+      </article>
+    </div>
+    <div class="column post is-4">
+      <article class="columns is-multiline">
+        <div class="column is-12 post-img">
+          <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
+        </div>
+        <div class="column is-12 featured-content ">
+          <h3 class="heading post-category">
+            Category Name
+          </h3>
+          <h1 class="title post-title">
+            Slightly Longer Blog Post Title
+          </h1>
+          <p class="post-excerpt">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.
+          </p>
+          <br>
+          <a href="#" class="button is-primary">Read More</a>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class ListBlog extends Vue {
+}
+</script>
diff --git a/pages/blog/page/_page.vue b/pages/blog/page/_page.vue
index 62bd27a..c4cfeaa 100644
--- a/pages/blog/page/_page.vue
+++ b/pages/blog/page/_page.vue
@@ -3,84 +3,9 @@
     <div class="container">
       <div class="columns">
         <div class="column is-10 is-offset-1">
-          <div class="columns featured-post is-multiline">
-            <div class="column is-12 post">
-              <FeaturedBlog />
-            </div>
-          </div>
+          <FeaturedBlog />
           <hr>
-          <div class="columns is-multiline">
-            <div class="column post is-6">
-              <article class="columns is-multiline">
-                <div class="column is-12 post-img">
-                  <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
-                </div>
-                <div class="column is-12 featured-content ">
-                  <h3 class="heading post-category">Category Name</h3>
-                  <h1 class="title post-title">Slightly Longer Blog Post Title</h1>
-                  <p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
-                  <br>
-                  <a href="#" class="button is-primary">Read More</a>
-                </div>
-              </article>
-            </div>
-            <div class="column post is-6">
-              <article class="columns is-multiline">
-                <div class="column is-12 post-img">
-                  <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
-                </div>
-                <div class="column is-12 featured-content ">
-                  <h3 class="heading post-category">Category Name</h3>
-                  <h1 class="title post-title">Slightly Longer Blog Post Title</h1>
-                  <p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
-                  <br>
-                  <a href="#" class="button is-primary">Read More</a>
-                </div>
-              </article>
-            </div>
-            <div class="column post is-4">
-              <article class="columns is-multiline">
-                <div class="column is-12 post-img">
-                  <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
-                </div>
-                <div class="column is-12 featured-content ">
-                  <h3 class="heading post-category">Category Name</h3>
-                  <h1 class="title post-title">Slightly Longer Blog Post Title</h1>
-                  <p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
-                  <br>
-                  <a href="#" class="button is-primary">Read More</a>
-                </div>
-              </article>
-            </div>
-            <div class="column post is-4">
-              <article class="columns is-multiline">
-                <div class="column is-12 post-img">
-                  <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
-                </div>
-                <div class="column is-12 featured-content ">
-                  <h3 class="heading post-category">Category Name</h3>
-                  <h1 class="title post-title">Slightly Longer Blog Post Title</h1>
-                  <p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
-                  <br>
-                  <a href="#" class="button is-primary">Read More</a>
-                </div>
-              </article>
-            </div>
-            <div class="column post is-4">
-              <article class="columns is-multiline">
-                <div class="column is-12 post-img">
-                  <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
-                </div>
-                <div class="column is-12 featured-content ">
-                  <h3 class="heading post-category">Category Name</h3>
-                  <h1 class="title post-title">Slightly Longer Blog Post Title</h1>
-                  <p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
-                  <br>
-                  <a href="#" class="button is-primary">Read More</a>
-                </div>
-              </article>
-            </div>
-          </div>
+          <ListBlog />
         </div>
       </div>
     </div>
@@ -90,10 +15,12 @@
 <script>
 import { Vue, Component } from 'nuxt-property-decorator'
 import FeaturedBlog from '@/components/organisms/FeaturedBlog'
+import ListBlog from '@/components/organisms/ListBlog.vue'
 
 @Component({
   components: {
-    FeaturedBlog
+    FeaturedBlog,
+    ListBlog
   }
 })
 export default class PageBlog extends Vue {