@@ -7,6 +7,7 @@ import { SpeedInsights } from '@vercel/speed-insights/nuxt'
77const route = useRoute()
88const appConfig = useAppConfig()
99const colorMode = useColorMode()
10+const { style, link } = useTheme()
10111112const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['framework', 'category', 'description']))
1213const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
@@ -16,24 +17,18 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
1617})
17181819const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
19-const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
20-const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
21-const font = computed(() => `:root { --font-sans: '${appConfig.theme.font}', sans-serif; }`)
22202321useHead({
2422 meta: [
2523 { name: 'viewport', content: 'width=device-width, initial-scale=1' },
2624 { key: 'theme-color', name: 'theme-color', content: color }
2725 ],
28- link: [
26+ link: computed(() => [
2927 // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
30- { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
31- ],
32- style: [
33- { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
34- { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
35- { innerHTML: font, id: 'nuxt-ui-font', tagPriority: -2 }
36- ],
28+ { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` },
29+ ...link.value
30+ ]),
31+ style,
3732 htmlAttrs: {
3833 lang: 'en'
3934 }
@@ -58,22 +53,30 @@ provide('navigation', rootNavigation)
5853<Analytics />
5954<SpeedInsights />
605561-<div :class="[route.path.startsWith('/docs/') && 'root']">
62-<template v-if="!route.path.startsWith('/examples')">
63-<!-- <Banner /> -->
56+<div class="flex">
57+<div class="flex-1 min-w-0" :class="[route.path.startsWith('/docs/') && 'root']">
58+<template v-if="!route.path.startsWith('/examples')">
59+<!-- <Banner /> -->
646065-<Header />
66-</template>
61+ <Header />
62+ </template>
676368-<NuxtLayout>
69-<NuxtPage />
70-</NuxtLayout>
64+ <NuxtLayout>
65+ <NuxtPage />
66+ </NuxtLayout>
716772-<template v-if="!route.path.startsWith('/examples')">
73-<Footer />
68+<template v-if="!route.path.startsWith('/examples')">
69+<Footer />
70+71+<ClientOnly>
72+<Search :files="files" :navigation="navigationByFramework" />
73+</ClientOnly>
74+</template>
75+</div>
747677+<template v-if="!route.path.startsWith('/examples')">
7578<ClientOnly>
76-<Search :files="files" :navigation="navigationByFramework" />
79+<Chat />
7780</ClientOnly>
7881</template>
7982</div>