123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
Vue
<template>
|
|
<p v-if="$fetchState.pending"></p>
|
|
<p v-else-if="$fetchState.error">
|
|
An error occurred {{ $fetchState.error.message }}
|
|
</p>
|
|
<section v-else>
|
|
<section>
|
|
<h2>
|
|
{{ post.title }}
|
|
</h2>
|
|
<small>
|
|
<span>
|
|
by
|
|
<a
|
|
v-if="theme.author.url"
|
|
:href="theme.author.url"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
{{ theme.author.name }}
|
|
</a>
|
|
<span v-else>
|
|
{{ theme.author.name }}
|
|
</span>
|
|
</span>
|
|
<span v-if="post.date" style="float: right">
|
|
{{ post.date | formatDate }}
|
|
</span>
|
|
</small>
|
|
</section>
|
|
|
|
<section v-html="post.content"></section>
|
|
|
|
<section class="tags-container">
|
|
<span>Tags:</span>
|
|
<span v-for="t in post.tag || []" :key="t">
|
|
<nuxt-link :to="`/tag/${t}`">
|
|
{{ t }}
|
|
</nuxt-link>
|
|
</span>
|
|
</section>
|
|
|
|
<footer v-if="remark42settings">
|
|
<div ref="remark42" />
|
|
</footer>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from 'nuxt-property-decorator'
|
|
import { api, THEME } from '~/assets/global'
|
|
import '~/assets/remark42'
|
|
|
|
@Component<PostPage>({
|
|
async fetch() {
|
|
const r = await api('/api', {
|
|
params: {
|
|
path: this.$route.params.pathMatch,
|
|
},
|
|
})
|
|
|
|
if (r.error) {
|
|
this.$nuxt.error(r.error)
|
|
return
|
|
}
|
|
|
|
this.post = r
|
|
|
|
setTimeout(() => {
|
|
if (process.browser) {
|
|
if (window.REMARK42) {
|
|
this.initRemark42()
|
|
} else {
|
|
window.addEventListener('REMARK42::ready', () => {
|
|
this.initRemark42()
|
|
})
|
|
}
|
|
}
|
|
}, 1000)
|
|
},
|
|
beforeDestroy() {
|
|
if (this.remark42Instance) {
|
|
this.remark42Instance.destroy()
|
|
}
|
|
},
|
|
})
|
|
export default class PostPage extends Vue {
|
|
post: {
|
|
date?: string
|
|
title: string
|
|
image?: string
|
|
tag?: string[]
|
|
category?: string
|
|
content: string
|
|
} | null = null
|
|
|
|
theme = THEME
|
|
|
|
remark42settings = THEME.comment?.remark42 || null
|
|
remark42Instance: any = null
|
|
|
|
initRemark42() {
|
|
if (process.browser && this.remark42settings && window.REMARK42) {
|
|
if (this.remark42Instance) {
|
|
this.remark42Instance.destroy()
|
|
}
|
|
|
|
this.remark42Instance = window.REMARK42.createInstance({
|
|
node: this.$refs.remark42 as HTMLElement,
|
|
host: this.remark42settings.host,
|
|
site_id: this.remark42settings.siteId,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags-container > span + span {
|
|
margin-left: 0.6em;
|
|
}
|
|
</style>
|