docs: disable documentDriven mode

docs/app.vue

@@ -2,25 +2,11 @@
   <div>
     <Header />
 
-    <UContainer>
+    <UContainer class="grid lg:grid-cols-10 lg:gap-8">
-      <div class="relative grid lg:grid-cols-10 lg:gap-8">
+      <DocsAside class="lg:col-span-2" />
-        <DocsAside class="lg:col-span-2" />
 
-        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
+      <div class="lg:col-span-8">
-          <DocsPageHeader />
+        <NuxtPage />
-
-          <NuxtPage />
-
-          <DocsPageFooter class="mt-12" />
-
-          <hr class="border-gray-200 dark:border-gray-800 my-6">
-
-          <DocsPrevNext />
-
-          <DocsFooter class="mt-16" />
-        </div>
-
-        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
       </div>
     </UContainer>
 
@@ -33,9 +19,12 @@
 </template>
 
 <script setup lang="ts">
-const { toc } = useContent()
 const colorMode = useColorMode()
 
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+provide('navigation', navigation)
+
 // Computed
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -1,7 +1,7 @@
 <script setup>
 const commandPaletteRef = ref()
 
-const { navigation } = useContent()
+const navigation = inject('navigation')
 
 const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
 

docs/components/docs/DocsAsideLinks.vue

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const { navigation } = useContent() as { navigation: NavItem[] }
+const navigation: Ref<NavItem[]> = inject('navigation')
 
 function mapContentLinks (links: NavItem[]) {
   return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []

docs/components/docs/DocsPageFooter.vue

@@ -13,5 +13,10 @@
 </template>
 
 <script setup lang="ts">
-const { page } = useContent()
+defineProps({
+  page: {
+    type: Object,
+    default: null
+  }
+})
 </script>

docs/components/docs/DocsPageHeader.vue

@@ -33,5 +33,10 @@
 </template>
 
 <script setup lang="ts">
-const { page } = useContent()
+defineProps({
+  page: {
+    type: Object,
+    default: null
+  }
+})
 </script>

docs/components/docs/DocsPrevNext.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="grid gap-6 sm:grid-cols-2">
-    <DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" icon="i-heroicons-arrow-left-20-solid" />
+    <DocsPrevNextCard
+      v-if="prev"
+      :title="prev.title"
+      :description="prev.description"
+      :to="prev._path"
+      icon="i-heroicons-arrow-left-20-solid"
+    />
     <span v-else class="hidden sm:block">&nbsp;</span>
     <DocsPrevNextCard
       v-if="next"
-      :title="next.navigation?.title || next.title"
+      :title="next.title"
-      :description="next.navigation?.description || next.description"
+      :description="next.description"
       :to="next._path"
       icon="i-heroicons-arrow-right-20-solid"
       class="text-right"
@@ -14,5 +20,14 @@
 </template>
 
 <script setup lang="ts">
-const { prev, next } = useContent()
+defineProps({
+  prev: {
+    type: Object,
+    default: null
+  },
+  next: {
+    type: Object,
+    default: null
+  }
+})
 </script>

docs/components/docs/DocsSearch.vue

@@ -23,9 +23,11 @@
 </template>
 
 <script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
 import type { Command } from '../../../src/runtime/types'
 
-const { navigation } = useContent()
+const navigation: Ref<NavItem[]> = inject('navigation')
+
 const router = useRouter()
 const { usingInput } = useShortcuts()
 const { isSearchModalOpen } = useDocs()

docs/components/docs/DocsToc.vue

@@ -13,7 +13,12 @@
 </template>
 
 <script setup lang="ts">
-const { toc } = useContent()
+defineProps({
+  toc: {
+    type: Object,
+    default: null
+  }
+})
 
 const isTocOpen = ref(false)
 </script>

docs/layouts/default.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="prose prose-primary dark:prose-invert max-w-none">
-    <slot />
-  </div>
-</template>

docs/nuxt.config.ts

@@ -15,7 +15,6 @@ export default defineNuxtConfig({
     'nuxt-component-meta'
   ],
   content: {
-    documentDriven: true,
     highlight: {
       theme: {
         light: 'material-lighter',

docs/pages/[...slug].vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="grid lg:grid-cols-10 lg:gap-8">
+    <div class="pt-8 pb-16" :class="page.body?.toc ? 'lg:col-span-8' : 'lg:col-span-10'">
+      <DocsPageHeader :page="page" />
+
+      <ContentRenderer v-if="page.body" :value="page" class="prose prose-primary dark:prose-invert max-w-none" />
+
+      <DocsPageFooter :page="page" class="mt-12" />
+
+      <hr class="border-gray-200 dark:border-gray-800 my-6">
+
+      <DocsPrevNext :prev="prev" :next="next" />
+
+      <DocsFooter class="mt-16" />
+    </div>
+
+    <DocsToc v-if="page.body?.toc" :toc="page.body.toc" class="lg:col-span-2" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: page } = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
+const { data: surround } = await useAsyncData(`docs-${route.path}-surround`, () => queryContent()
+  .only(['_path', 'title', 'navigation', 'description'])
+  .where({ _extension: 'md', navigation: { $ne: false } })
+  .findSurround(route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
+)
+
+const [prev, next] = surround.value
+
+useContentHead(page)
+</script>