feat: added docs page

Author: blaquewithaq

app/error.vue

@@ -14,9 +14,11 @@ useHead({
   }
 })
 
+const { data: app } = await useAsyncData('app-error', () => queryCollection('app').first())
+
 useSeoMeta({
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
+  title: app.value?.error.title || 'Page not found',
+  description: app.value?.error.description || 'We are sorry but this page could not be found.'
 })
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
@@ -25,20 +27,6 @@ const { data: navigation } = await useAsyncData('navigation', () => queryCollect
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false
 })
-
-const links = [{
-  label: 'Docs',
-  icon: 'i-lucide-book',
-  to: '/docs/getting-started'
-}, {
-  label: 'Pricing',
-  icon: 'i-lucide-credit-card',
-  to: '/pricing'
-}, {
-  label: 'Blog',
-  icon: 'i-lucide-pencil',
-  to: '/blog'
-}]
 </script>
 
 <template>
@@ -60,7 +48,7 @@ const links = [{
         :files="files"
         shortcut="meta_k"
         :navigation="navigation"
-        :links="links"
+        :links="app?.links"
         :fuse="{ resultLimit: 42 }"
       />
     </ClientOnly>

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

@@ -1,9 +1,57 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: 'docs'
+})
 
+const route = useRoute()
+
+const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').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`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description']
+  })
+})
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+defineOgImageComponent('Saas')
 </script>
 
 <template>
-  <div>
-    <!--  -->
-  </div>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+    />
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page.body"
+        :value="page"
+      />
+
+      <USeparator v-if="surround?.length" />
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <UContentToc :links="page.body.toc.links" />
+    </template>
+  </UPage>
 </template>

bun.lock

@@ -70,6 +70,7 @@ const collections = {
     source: 'app.yml',
     schema: z.object({
       links: z.array(createLinkSchema()).optional(),
+      error: createBaseSchema(),
       header: z.object({
         logo: z.object({
           to: z.string()

content.config.ts

@@ -0,0 +1 @@
+title: User

content/1.docs/1.getting-started/.navigation.yml

@@ -0,0 +1 @@
+title: Developer

content/1.docs/1.user/.navigation.yml

@@ -0,0 +1,5 @@
+---
+title: Introduction
+description: Welcome to our Developer Guide
+---
+