mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
139 lines
4.0 KiB
Vue
139 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import type { ContentNavigationItem } from '@nuxt/content'
|
|
import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'
|
|
|
|
const route = useRoute()
|
|
|
|
definePageMeta({
|
|
layout: 'docs'
|
|
})
|
|
|
|
const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
|
|
if (!page.value) {
|
|
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
|
|
}
|
|
|
|
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryCollectionItemSurroundings('content', route.path, {
|
|
fields: ['description']
|
|
}))
|
|
|
|
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
|
|
|
const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)))
|
|
|
|
useSeoMeta({
|
|
titleTemplate: '%s - Nuxt UI v3',
|
|
title: typeof page.value.navigation === 'object' ? page.value.navigation.title : page.value.title,
|
|
ogTitle: `${typeof page.value.navigation === 'object' ? page.value.navigation.title : page.value.title} - Nuxt UI v3`,
|
|
description: page.value.description,
|
|
ogDescription: page.value.description
|
|
})
|
|
|
|
defineOgImageComponent('Docs', {
|
|
headline: breadcrumb.value.map(item => item.label).join(' > ')
|
|
})
|
|
|
|
const communityLinks = computed(() => [{
|
|
icon: 'i-lucide-square-pen',
|
|
label: 'Edit this page',
|
|
to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?.stem}.md`,
|
|
target: '_blank'
|
|
}, {
|
|
icon: 'i-lucide-star',
|
|
label: 'Star on GitHub',
|
|
to: 'https://github.com/nuxt/ui',
|
|
target: '_blank'
|
|
}, {
|
|
label: 'Roadmap',
|
|
icon: 'i-lucide-map',
|
|
to: '/roadmap'
|
|
}])
|
|
|
|
// const resourcesLinks = [{
|
|
// icon: 'i-simple-icons-figma',
|
|
// label: 'Figma Kit',
|
|
// to: 'https://www.figma.com/community/file/1288455405058138934',
|
|
// target: '_blank'
|
|
// }, {
|
|
// label: 'Playground',
|
|
// icon: 'i-simple-icons-stackblitz',
|
|
// to: 'https://stackblitz.com/edit/nuxt-ui',
|
|
// target: '_blank'
|
|
// }, {
|
|
// icon: 'i-simple-icons-nuxtdotjs',
|
|
// label: 'Nuxt docs',
|
|
// to: 'https://nuxt.com',
|
|
// target: '_blank'
|
|
// }]
|
|
</script>
|
|
|
|
<template>
|
|
<UPage v-if="page">
|
|
<UPageHeader :title="page.title">
|
|
<template #headline>
|
|
<UBreadcrumb :items="breadcrumb" />
|
|
</template>
|
|
|
|
<template #description>
|
|
<MDC v-if="page.description" :value="page.description" unwrap="p" />
|
|
</template>
|
|
|
|
<template #links>
|
|
<UDropdownMenu v-if="page.select" v-slot="{ open }" :items="page.select.items" :content="{ align: 'end' }">
|
|
<UButton
|
|
color="neutral"
|
|
variant="subtle"
|
|
v-bind="page.select.items.find((item: any) => item.to === route.path)"
|
|
block
|
|
trailing-icon="i-lucide-chevron-down"
|
|
:class="[open && 'bg-[var(--ui-bg-accented)]/75']"
|
|
:ui="{
|
|
trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
|
|
}"
|
|
class="w-[128px]"
|
|
/>
|
|
</UDropdownMenu>
|
|
|
|
<UButton
|
|
v-for="link in page.links"
|
|
:key="link.label"
|
|
color="neutral"
|
|
variant="outline"
|
|
v-bind="link"
|
|
>
|
|
<template v-if="link.avatar" #leading>
|
|
<UAvatar v-bind="link.avatar" size="2xs" />
|
|
</template>
|
|
</UButton>
|
|
</template>
|
|
</UPageHeader>
|
|
|
|
<UPageBody>
|
|
<ContentRenderer v-if="page.body" :value="page" />
|
|
|
|
<USeparator />
|
|
|
|
<UContentSurround :surround="(surround as any)" />
|
|
</UPageBody>
|
|
|
|
<template v-if="page?.body?.toc?.links?.length" #right>
|
|
<UContentToc :links="page.body.toc.links" class="z-[2]">
|
|
<template #bottom>
|
|
<USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
|
|
|
|
<UPageLinks title="Community" :links="communityLinks" />
|
|
|
|
<!-- <USeparator type="dashed" />
|
|
|
|
<UPageLinks title="Resources" :links="resourcesLinks" />
|
|
|
|
<USeparator type="dashed" />
|
|
|
|
<AdsPro />
|
|
<AdsCarbon /> -->
|
|
</template>
|
|
</UContentToc>
|
|
</template>
|
|
</UPage>
|
|
</template>
|