87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
<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>
|