From 5822dcc59a3e391396524a6e1ba725ab2e1b419f Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Thu, 8 Jul 2021 23:07:44 +0700
Subject: [PATCH] feat: wip blog detail

---
 content/blog/2020/a-blue-bird.md              |  1 +
 content/blog/2020/optimize-your-website.md    |  1 +
 content/blog/2020/vue/deep-folder.md          |  1 +
 .../blog/2021/first-blog-post-ehandy copy.md  |  1 +
 content/blog/2021/first-blog-post-ehandy.md   |  1 +
 content/blog/2021/how-to-code.md              |  1 +
 content/blog/2021/learn-nuxt-from-scratch.md  |  1 +
 .../blog/2021/placeholder-image-shopify.md    |  1 +
 content/blog/2021/shopify-partner.md          |  1 +
 pages/blog/_slug.vue                          | 40 +++++++++++++++----
 types/content/page.ts                         |  2 +
 11 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/content/blog/2020/a-blue-bird.md b/content/blog/2020/a-blue-bird.md
index 26fc0fa..df3817c 100644
--- a/content/blog/2020/a-blue-bird.md
+++ b/content/blog/2020/a-blue-bird.md
@@ -1,6 +1,7 @@
 ---
 title: How to code
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['VueJS', 'Nuxt', 'Frontend']
 published: '2020-02-12'
diff --git a/content/blog/2020/optimize-your-website.md b/content/blog/2020/optimize-your-website.md
index 78c30b8..b376b46 100644
--- a/content/blog/2020/optimize-your-website.md
+++ b/content/blog/2020/optimize-your-website.md
@@ -1,6 +1,7 @@
 ---
 title: Optimize your website
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['NodeJs', 'Nuxt', 'Optimize']
 published: '2020-03-30'
diff --git a/content/blog/2020/vue/deep-folder.md b/content/blog/2020/vue/deep-folder.md
index 98a1c19..3607dea 100644
--- a/content/blog/2020/vue/deep-folder.md
+++ b/content/blog/2020/vue/deep-folder.md
@@ -1,6 +1,7 @@
 ---
 title: Deep folder Vue 
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['vuejs']
 published: '2020-01-12'
diff --git a/content/blog/2021/first-blog-post-ehandy copy.md b/content/blog/2021/first-blog-post-ehandy copy.md
index 599e862..3c59948 100644
--- a/content/blog/2021/first-blog-post-ehandy copy.md	
+++ b/content/blog/2021/first-blog-post-ehandy copy.md	
@@ -1,6 +1,7 @@
 ---
 title: Fisrt Blog Post eHandy
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['Share', 'Nuxt']
 published: '2021-01-30'
diff --git a/content/blog/2021/first-blog-post-ehandy.md b/content/blog/2021/first-blog-post-ehandy.md
index e807a07..0a89a57 100644
--- a/content/blog/2021/first-blog-post-ehandy.md
+++ b/content/blog/2021/first-blog-post-ehandy.md
@@ -1,6 +1,7 @@
 ---
 title: Fisrt Blog Post eHandy
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'https://cdn.emk.dev/templates/featured-image.png'
 tags: ['VueJS', 'Nuxt']
 published: '2021-02-30'
diff --git a/content/blog/2021/how-to-code.md b/content/blog/2021/how-to-code.md
index ce4647e..741b2d5 100644
--- a/content/blog/2021/how-to-code.md
+++ b/content/blog/2021/how-to-code.md
@@ -1,6 +1,7 @@
 ---
 title: Fisrt Blog Post eHandy
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['Node', 'Nuxt']
 published: '2021-03-30'
diff --git a/content/blog/2021/learn-nuxt-from-scratch.md b/content/blog/2021/learn-nuxt-from-scratch.md
index 6f430c4..92abbf7 100644
--- a/content/blog/2021/learn-nuxt-from-scratch.md
+++ b/content/blog/2021/learn-nuxt-from-scratch.md
@@ -1,6 +1,7 @@
 ---
 title: Learn Nuxt from scratch
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['VueJS', 'Nuxt']
 published: '2021-04-30'
diff --git a/content/blog/2021/placeholder-image-shopify.md b/content/blog/2021/placeholder-image-shopify.md
index 6681f3d..8cede7e 100644
--- a/content/blog/2021/placeholder-image-shopify.md
+++ b/content/blog/2021/placeholder-image-shopify.md
@@ -1,6 +1,7 @@
 ---
 title: Placeholder image shopify
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['Fun', 'Nuxt']
 published: '2021-05-30'
diff --git a/content/blog/2021/shopify-partner.md b/content/blog/2021/shopify-partner.md
index 5aba110..62ed187 100644
--- a/content/blog/2021/shopify-partner.md
+++ b/content/blog/2021/shopify-partner.md
@@ -1,6 +1,7 @@
 ---
 title: Shopify partner
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+author: 'Huwng'
 image: 'http://placekitten.com/g/1920/1080'
 tags: ['VueJS', 'Shopify']
 published: '2022-06-30'
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
index 0b0752a..d3a4900 100644
--- a/pages/blog/_slug.vue
+++ b/pages/blog/_slug.vue
@@ -1,13 +1,27 @@
 <template>
-  <article class="container content">
-    <div class="columns">
-      <div class="column">
-        <nuxt-content :document="blogDetail" />
+  <div class="blog-detail container is-max-desktop content">
+    <section class="section blog-detail__featured-img">
+      <img :src="blogDetail.image">
+    </section>
+    <section class="section blog-detail__info">
+      <h1 class="title is-2">
+        {{ blogDetail.title }}
+      </h1>
+      <div>
+        <span>{{ blogDetail.author }}</span>
+        </span>{{ blogDetail.published }}</span>
       </div>
-    </div>
-  </article>
+      <hr>
+    </section>
+    <section class="section">
+      <div class="columns">
+        <div class="column">
+          <nuxt-content :document="blogDetail" />
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
-
 <script>
 import { Vue, Component } from 'nuxt-property-decorator'
 import global from '@/utils/global'
@@ -20,6 +34,7 @@ import getSiteMeta from '@/utils/getSiteMeta'
       .where({ slug: params.slug })
       .fetch()
     const [blogDetail] = findedBlog
+    console.log(blogDetail)
 
     const [prev, next] = await $content('blog', { deep: true })
       .only(['title', 'slug', 'published'])
@@ -93,3 +108,14 @@ import getSiteMeta from '@/utils/getSiteMeta'
 })
 export default class BlogDetail extends Vue {}
 </script>
+<style lang="scss">
+.blog-detail {
+  section:not(:last-child) {
+    padding-bottom: 0;
+  }
+
+  section:not(:first-child) {
+    padding-top: 1rem;
+  }
+}
+</style>
diff --git a/types/content/page.ts b/types/content/page.ts
index 54fa992..5a1fc95 100644
--- a/types/content/page.ts
+++ b/types/content/page.ts
@@ -15,4 +15,6 @@ export interface IContent extends IContentDocument {
   toc: IToc[];
   image: string;
   tags: string[];
+  published: string;
+  author: string;
 }