84 lines
1.6 KiB
Vue
84 lines
1.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>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from 'nuxt-property-decorator'
|
|
import { api, THEME } from '~/assets/global'
|
|
|
|
@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
|
|
},
|
|
})
|
|
export default class PostPage extends Vue {
|
|
post: {
|
|
date?: string
|
|
title: string
|
|
image?: string
|
|
tag?: string[]
|
|
category?: string
|
|
content: string
|
|
} | null = null
|
|
|
|
theme = THEME
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags-container > span + span {
|
|
margin-left: 0.6em;
|
|
}
|
|
</style>
|