add blog

packages/web/components/PostTeaser.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+.card.my-lg.blog-post
+  .card-content
+    post-header(:header="header")
+    .post-content
+      .image-teaser(v-if="header.image")
+        img(:src="header.image")
+      h2.title {{header.title}}
+      .content(v-html="html")
+    div(style="display: flex; justify-content: flex-end")
+      b-button(type="is-danger" outlined @click="openPostUrl") Read more
+</template>
+
+<script lang="ts">
+import PostHeader from './PostHeader.vue'
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+import { makeHtml } from '../assets/make-html'
+import { globalStore } from '../store'
+
+@Component({
+  components: {
+    PostHeader,
+  },
+})
+export default class PostTeaser extends Vue {
+  @Prop({ required: true }) header!: any
+
+  teaser: string = this.header.teaser || ''
+
+  async mounted () {
+    if (!this.teaser) {
+      this.teaser = await fetch(`/build/teaser/${this.header.path}.html?h=${globalStore.hash.posts[this.header.path]}`)
+        .then((r) => r.text())
+    }
+  }
+
+  get html () {
+    return makeHtml.parse(this.teaser)
+  }
+
+  openPostUrl () {
+    if (this.header.name) {
+      if (this.header.y && this.header.mo) {
+        this.$router.push(`/post/${this.header.y}/${this.header.mo}/${this.header.name}`)
+      } else {
+        this.$router.push(`/post/${this.header.name}`)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.content {
+  width: 100%;
+  margin: 0;
+  max-width: 80vw;
+}
+
+.post-content {
+  width: 100%;
+  overflow: visible;
+}
+
+.image-teaser {
+  width: calc(100% + 3rem);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+@media only screen and (min-width: 800px) {
+  .image-teaser {
+    width: 100%;
+    max-width: 300px;
+    max-height: 300px;
+    float: right;
+    margin: 1rem;
+  }
+
+  .post-content {
+    overflow: auto;
+  }
+}
+</style>