feat: wip add blog detail page

pages/blog/_slug.vue

@@ -1,22 +1,88 @@
 <template>
-  <div>
-    <banner />
-    <banner />
-    <banner />
-    <banner />
-    <banner />
-  </div>
+  <article class="container content">
+    <nuxt-content :document="article" />
+  </article>
 </template>
 
 <script>
 import { Vue, Component } from 'nuxt-property-decorator'
-import Banner from '@/components/templates/home/Banner'
+import global from '@/utils/global'
+import getSiteMeta from '@/utils/getSiteMeta'
 
 @Component({
-  components: {
-    Banner
+  name: 'ArticlePage',
+  async asyncData ({ $content, params }) {
+    const article = await $content('blog', params.slug).fetch()
+
+    const [prev, next] = await $content('blog')
+      .only(['title', 'slug', 'published'])
+      .sortBy('published', 'desc')
+      .surround(params.slug)
+      .fetch()
+
+    const allBlogs = await $content('blog')
+      .only(['title', 'description', 'image', 'slug', 'published', 'tags'])
+      .sortBy('published', 'desc')
+      .fetch()
+
+    const articlesByTag = allBlogs.filter((article) => {
+      const articleTags = article.tags.map(x => x.toLowerCase())
+      return articleTags.includes(article.tags[0].toLowerCase())
+    })
+
+    return {
+      article,
+      articlesByTag,
+      prev,
+      next
+    }
+  },
+  head () {
+    return {
+      title: this.article.title,
+      meta: [
+        ...this.meta,
+        {
+          property: 'article:published_time',
+          content: this.article.createdAt
+        },
+        {
+          property: 'article:modified_time',
+          content: this.article.updatedAt
+        },
+        {
+          property: 'article:tag',
+          content: this.article.tags ? this.article.tags.toString() : ''
+        },
+        { name: 'twitter:label1', content: 'Written by' },
+        { name: 'twitter:data1', content: global.author || '' },
+        { name: 'twitter:label2', content: 'Filed under' },
+        {
+          name: 'twitter:data2',
+          content: this.article.tags ? this.article.tags.toString() : ''
+        }
+      ],
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `${this.$config.baseUrl}/blog/${this.$route.params.slug}`
+        }
+      ]
+    }
+  },
+  computed: {
+    meta () {
+      const metaData = {
+        type: 'article',
+        title: this.article.title,
+        description: this.article.description,
+        url: `${this.$config.baseUrl}/blog/${this.$route.params.slug}`,
+        mainImage: this.article.image
+      }
+      return getSiteMeta(metaData)
+    }
   }
 })
-export default class Index extends Vue {
-}
+export default class BlogDetail extends Vue {}
 </script>

utils/getSiteMeta.js

@@ -1,56 +1,56 @@
-import global from './global';
+import global from './global'
 
 export default (meta) => {
   return [
     {
       hid: 'description',
       name: 'description',
-      content: (meta && meta.description) || global.siteDesc,
+      content: (meta && meta.description) || global.siteDesc
     },
     {
       hid: 'og:type',
       property: 'og:type',
-      content: (meta && meta.type) || global.siteType,
+      content: (meta && meta.type) || global.siteType
     },
     {
       hid: 'og:url',
       property: 'og:url',
-      content: (meta && meta.url) || global.siteUrl,
+      content: (meta && meta.url) || global.siteUrl
     },
     {
       hid: 'og:title',
       property: 'og:title',
-      content: (meta && meta.title) || global.siteTitle,
+      content: (meta && meta.title) || global.siteTitle
     },
     {
       hid: 'og:description',
       property: 'og:description',
-      content: (meta && meta.description) || global.siteDesc,
+      content: (meta && meta.description) || global.siteDesc
     },
     {
       hid: 'og:image',
       property: 'og:image',
-      content: (meta && meta.mainImage) || global.mainImage,
+      content: (meta && meta.mainImage) || global.mainImage
     },
     {
       hid: 'twitter:url',
       name: 'twitter:url',
-      content: (meta && meta.url) || global.siteUrl,
+      content: (meta && meta.url) || global.siteUrl
     },
     {
       hid: 'twitter:title',
       name: 'twitter:title',
-      content: (meta && meta.title) || global.siteTitle,
+      content: (meta && meta.title) || global.siteTitle
     },
     {
       hid: 'twitter:description',
       name: 'twitter:description',
-      content: (meta && meta.description) || global.siteDesc,
+      content: (meta && meta.description) || global.siteDesc
     },
     {
       hid: 'twitter:image',
       name: 'twitter:image',
-      content: (meta && meta.mainImage) || global.mainImage,
-    },
-  ];
-};
+      content: (meta && meta.mainImage) || global.mainImage
+    }
+  ]
+}

utils/global.js

@@ -4,15 +4,15 @@
   access any variable via object syntax global.yourVarName
 */
 export default {
-  siteUrl: 'https://example.com',
-  siteName: 'Starter Blog',
-  author: 'Joe Blogs',
-  twitterHandle: '@joeblogs',
+  siteUrl: 'https://ehandytech.com',
+  siteName: 'ehandytech',
+  author: 'Huwng',
+  twitterHandle: '@kmacoders',
   twitterURL: 'https://twitter.com/garethredfern',
   githubURL: 'https://github.com/garethredfern',
   siteTitle: 'Add Your Main Site Title Here',
   siteDesc:
     'A description for your site here, this will show on the home page.',
   mainImage: '',
-  siteType: 'website',
-};
+  siteType: 'website'
+}