add blog

packages/web/pages/post/_y/_mo/_name.vue

@@ -0,0 +1,89 @@
+<template lang="pug">
+post-full(:header="header")
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+import PostFull from '@/components/PostFull.vue'
+import htmlToText from 'html-to-text'
+
+@Component({
+  components: {
+    PostFull,
+  },
+})
+export default class PostPage extends Vue {
+  header: any = {}
+
+  async asyncData ({ $axios, $payloadURL, route, params, error }: any) {
+    if (process.static && process.client && $payloadURL) {
+      return $axios.$get($payloadURL(route))
+    }
+
+    const ps: any[] = require('@/static/build/header/posts.json')
+    const header = ps.filter((p) => p.name === params.name && p.y === params.y && p.mo === params.mo)[0]
+
+    if (!header) {
+      return error({ statusCode: 404, message: 'Post not found' })
+    }
+
+    header.teaser = require(`@/static/build/teaser/${header.path}`).default
+
+    return {
+      header,
+    }
+  }
+
+  head () {
+    let { title } = this.header
+    title = `${title} - ${process.env.title}`
+    const description = htmlToText.fromString(this.header.teaser)
+
+    return {
+      title,
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: description,
+        },
+        {
+          hid: 'keywords',
+          name: 'keywords',
+          content: (this.header.tag || []).join(', '),
+        },
+        {
+          hid: 'og:title',
+          property: 'og:title',
+          content: title,
+        },
+        {
+          hid: 'og:description',
+          property: 'og:description',
+          content: description,
+        },
+        {
+          hid: 'og:image',
+          property: 'og:image',
+          content: this.header.image,
+        },
+        {
+          hid: 'twitter:title',
+          property: 'twitter:title',
+          content: title,
+        },
+        {
+          hid: 'twitter:description',
+          property: 'twitter:description',
+          content: description,
+        },
+        {
+          hid: 'twitter:image',
+          property: 'twitter:image',
+          content: this.header.image,
+        },
+      ],
+    }
+  }
+}
+</script>