-
Notifications
You must be signed in to change notification settings - Fork 1
/
_post.vue
84 lines (78 loc) · 2.32 KB
/
_post.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
<div class="page-content">
<article class="post">
<header class="post__header">
<div class="post__categories">
<strong v-for="category in post.categories" :key="category.uid">
<n-link
:to="
localePath({
name: 'category',
params: {
name: category.uid
}
})
"
>
{{ category.name }}
</n-link>
</strong>
</div>
<prismic-rich-text id="js-title-post" :field="post.data.title" />
<time v-if="post.first_publication_date" class="post__date" :datetime="post.first_publication_date">
{{ new Date(post.first_publication_date).toLocaleDateString(currentLocale, { year: 'numeric', month: 'long', day: 'numeric' }) }}
</time>
<span class="post__reading-time">{{ $t('post.reading_time') }} {{ post.readingTime }}</span>
</header>
<prismic-image v-if="post.data && post.data.image" :field="post.data.image" sizes="(max-width: 990px) 100vw (min-width: 991px) 57vw" />
<div class="post__content">
<prismic-rich-text :field="post.data.content" />
</div>
<footer class="post__footer">
<div class="tags">
<n-link
v-for="(tag, i) in post.tag"
:key="i"
:to="
localePath({
name: 'category-tag',
params: {
tag: tag.slug
}
})
"
>
{{ tag.name }}
</n-link>
</div>
</footer>
<!-- <v-author /> -->
</article>
<!-- <v-post-comments /> -->
<!-- <v-post-related /> -->
</div>
</template>
<script>
export default {
async asyncData({ $prismic, params, error, app }) {
const currentLocale = app.i18n.locales.filter((lang) => lang.code === app.i18n.locale)[0]
const doc = await $prismic.api.getByUID('post', params.post, {
lang: currentLocale.iso.toLowerCase()
})
if (doc) {
return {
post: doc.results || doc,
currentLocale
}
} else {
error({ statusCode: 404, message: 'Page not found' })
}
},
head: () => ({
bodyAttrs: {
class: 'type-post'
}
})
}
</script>
<style></style>