-
Notifications
You must be signed in to change notification settings - Fork 180
/
[...slug].vue
100 lines (85 loc) · 2.38 KB
/
[...slug].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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script setup lang="ts">
import { withoutTrailingSlash } from 'ufo'
definePageMeta({
layout: 'docs',
})
const route = useRoute()
const { toc } = useAppConfig()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent()
.where({ _extension: 'md', navigation: { $ne: false } })
.only(['title', 'description', '_path'])
.findSurround(withoutTrailingSlash(route.path)),
)
useSeoMeta({
titleTemplate: '%s - Tailwind CSS module for Nuxt',
title: page.value.title,
ogTitle: `${page.value.title} - Tailwind CSS module for Nuxt`,
description: page.value.description,
ogDescription: page.value.description,
})
defineOgImage({
component: 'Docs',
title: page.value.title,
description: page.value.description,
headline: 'Nuxt Tailwind',
})
const headline = computed(() => findPageHeadline(page.value))
const links = computed(() => [toc?.bottom?.edit && {
icon: 'i-heroicons-pencil-square',
label: 'Edit this page',
to: `${toc.bottom.edit}/${page?.value?._file}`,
target: '_blank',
}, ...(toc?.bottom?.links || [])].filter(Boolean))
</script>
<template>
<UPage>
<UPageHeader
:title="page.title"
:description="page.description"
:links="page.links"
:headline="headline"
/>
<UPageBody prose>
<ContentRenderer
v-if="page.body"
:value="page"
/>
<hr v-if="surround?.length">
<UContentSurround :surround="surround" />
</UPageBody>
<template
v-if="page.toc !== false"
#right
>
<UContentToc
:title="toc?.title"
:links="page.body?.toc?.links"
>
<template
v-if="toc?.bottom"
#bottom
>
<div
class="hidden lg:block space-y-6"
:class="{ '!mt-6': page.body?.toc?.links?.length }"
>
<UDivider
v-if="page.body?.toc?.links?.length"
type="dashed"
/>
<UPageLinks
:title="toc.bottom.title"
:links="links"
/>
<UDivider type="dashed" />
<AdsUIPro />
</div>
</template>
</UContentToc>
</template>
</UPage>
</template>