add blog

packages/web/components/PostFull.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+section
+  .blog-post(v-if="header.path")
+    .card.my-lg
+      .card-content.content
+        post-header(:header="header")
+        h1.title {{header.title}}
+        .image-full(v-if="header.image")
+          img(:src="header.image")
+        div(v-html="html")
+        div(style="word-break: break-word")
+          span.mr-sm Tags:
+          span.mr-sm(v-for="t in header.tag || []" :key="t")
+            a(:href="$router.resolve('/tag/' + t).href") {{t}}
+    .card.my-lg
+      .card-content
+        vue-disqus(v-if="disqus" :shortname="disqus" :identifier="$route.path")
+  empty(v-else)
+</template>
+
+<script lang="ts">
+import PostHeader from './PostHeader.vue'
+import Empty from './Empty.vue'
+import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
+import { makeHtml } from '../assets/make-html'
+import { globalStore } from '../store'
+
+@Component({
+  components: {
+    PostHeader,
+    Empty,
+  },
+})
+export default class PostFull extends Vue {
+  @Prop({ required: true }) header!: any
+
+  markdown = this.header.teaser || ''
+  disqus = 'zhdiary'
+
+  mounted () {
+    this.updatePost()
+  }
+
+  @Watch('header.path')
+  async updatePost () {
+    if (!this.markdown) {
+      this.markdown = await fetch(`/build/teaser/${this.header.path}?h=${globalStore.hash.posts[this.header.path]}`).then((r) => r.text())
+    }
+    this.markdown = await fetch(`/build/full/${this.header.path}?h=${globalStore.hash.posts[this.header.path]}`).then((r) => r.text())
+  }
+
+  get html () {
+    return makeHtml.parse(this.markdown || '')
+  }
+}
+</script>
+
+<style lang="scss">
+.image-full {
+  text-align: center;
+  margin: 1rem;
+
+  img {
+    min-width: 500px;
+    width: auto;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .image-full {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+
+    img {
+      min-width: unset;
+      width: auto;
+    }
+  }
+}
+</style>