feat: wip blog detail

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'

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'

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'

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'

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'

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'

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'

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'

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'

pages/blog/_slug.vue

@@ -1,13 +1,27 @@
 <template>
-  <article class="container content">
+  <div class="blog-detail container is-max-desktop content">
-    <div class="columns">
+    <section class="section blog-detail__featured-img">
-      <div class="column">
+      <img :src="blogDetail.image">
-        <nuxt-content :document="blogDetail" />
+    </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>
+      <hr>
-  </article>
+    </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>

types/content/page.ts

@@ -15,4 +15,6 @@ export interface IContent extends IContentDocument {
   toc: IToc[];
   image: string;
   tags: string[];
+  published: string;
+  author: string;
 }