From 5fd7175364701c9c8d3781eb26e862d4b490d99b Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Wed, 30 Jun 2021 23:46:29 +0700
Subject: [PATCH] feat: wip add blog page

---
 components/atoms/.gitkeep             |   0
 components/molecules/.gitkeep         |   0
 components/organisms/.gitkeep         |   0
 components/organisms/FeaturedBlog.vue |  24 +++++
 components/organisms/ListBlog.vue     |   0
 pages/blog/_slug.vue                  |  22 ++++
 pages/blog/index.vue                  |   7 ++
 pages/blog/page/_page.vue             | 140 ++++++++++++++++++++++++++
 8 files changed, 193 insertions(+)
 create mode 100644 components/atoms/.gitkeep
 create mode 100644 components/molecules/.gitkeep
 create mode 100644 components/organisms/.gitkeep
 create mode 100644 components/organisms/FeaturedBlog.vue
 create mode 100755 components/organisms/ListBlog.vue
 create mode 100644 pages/blog/_slug.vue
 create mode 100644 pages/blog/index.vue
 create mode 100644 pages/blog/page/_page.vue

diff --git a/components/atoms/.gitkeep b/components/atoms/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/components/molecules/.gitkeep b/components/molecules/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisms/.gitkeep b/components/organisms/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisms/FeaturedBlog.vue b/components/organisms/FeaturedBlog.vue
new file mode 100644
index 0000000..366dace
--- /dev/null
+++ b/components/organisms/FeaturedBlog.vue
@@ -0,0 +1,24 @@
+<template>
+  <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>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class FeaturedBlog extends Vue {
+}
+</script>
diff --git a/components/organisms/ListBlog.vue b/components/organisms/ListBlog.vue
new file mode 100755
index 0000000..e69de29
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
new file mode 100644
index 0000000..efff516
--- /dev/null
+++ b/pages/blog/_slug.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <banner />
+    <banner />
+    <banner />
+    <banner />
+    <banner />
+  </div>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+import Banner from '@/components/templates/home/Banner'
+
+@Component({
+  components: {
+    Banner
+  }
+})
+export default class Index extends Vue {
+}
+</script>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
new file mode 100644
index 0000000..df493ff
--- /dev/null
+++ b/pages/blog/index.vue
@@ -0,0 +1,7 @@
+<script>
+export default {
+  middleware ({ redirect }) {
+    return redirect('301', '/blog/page/1')
+  }
+}
+</script>
diff --git a/pages/blog/page/_page.vue b/pages/blog/page/_page.vue
new file mode 100644
index 0000000..62bd27a
--- /dev/null
+++ b/pages/blog/page/_page.vue
@@ -0,0 +1,140 @@
+<template>
+  <section class="blog-posts">
+    <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>
+          <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>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+import FeaturedBlog from '@/components/organisms/FeaturedBlog'
+
+@Component({
+  components: {
+    FeaturedBlog
+  }
+})
+export default class PageBlog extends Vue {
+}
+</script>
+<style>
+.va {
+  display: flex;
+  align-items: center;
+}
+
+.blog-posts {
+  min-height: 100vh;
+  padding-top: 4rem;
+  padding-bottom: 10rem;
+}
+
+.blog-posts article {
+  padding: 1.5rem;
+}
+
+.blog-posts .post img {
+  border-radius: 6px;
+}
+
+.blog-posts .post .post-category {
+  color: #3b7adf;
+}
+
+.blog-posts .post .post-title {
+  font-size: 2.2rem;
+}
+
+.blog-posts .post .post-excerpt {
+  line-height: 1.5rem;
+  letter-spacing: 0.03rem;
+  font-size: 1.2rem;
+  font-family: 'IBM Plex Serif', serif;
+}
+
+.blog-posts .post .featured .featured-image img {
+  height: 380px;
+}
+</style>