mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
142 lines
4.2 KiB
Vue
142 lines
4.2 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)).map(({ icon, ...link }) => link))
|
|
|
|
const { framework } = useSharedData()
|
|
|
|
// Redirect to the correct framework version if the page is not the current framework
|
|
if (!import.meta.prerender) {
|
|
watch(framework, () => {
|
|
if (page.value?.navigation?.framework && page.value?.navigation?.framework !== framework.value) {
|
|
if (route.path.endsWith(`/${page.value?.navigation?.framework}`)) {
|
|
navigateTo(`${route.path.split('/').slice(0, -1).join('/')}/${framework.value}`)
|
|
} else {
|
|
navigateTo(`/getting-started`)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// Update the framework if the page has a different framework
|
|
watch(page, () => {
|
|
if (page.value?.navigation?.framework && page.value?.navigation?.framework !== framework.value) {
|
|
framework.value = page.value?.navigation?.framework as string
|
|
}
|
|
}, { immediate: true })
|
|
|
|
useSeoMeta({
|
|
titleTemplate: '%s - Nuxt UI v3',
|
|
title: typeof page.value.navigation === 'object' && page.value.navigation.title ? page.value.navigation.title : page.value.title,
|
|
ogTitle: `${typeof page.value.navigation === 'object' && page.value.navigation.title ? 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-file-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'
|
|
}])
|
|
|
|
// 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>
|
|
<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>
|