docs(home): move to markdown

Author: larbish

docs/app/app.config.ts

@@ -6,4 +6,18 @@ export default defineAppConfig({
       neutral: 'slate',
     },
   },
+  uiPro: {
+    pageHero: {
+      slots: {
+        title: 'font-semibold sm:text-6xl',
+        description: 'sm:text-lg text-[var(--ui-text-toned)] max-w-5xl mx-auto',
+      },
+    },
+    pageSection: {
+      slots: {
+        title: 'font-semibold lg:text-4xl',
+        featureLeadingIcon: 'text-[var(--ui-text-highlighted)]',
+      },
+    },
+  },
 })

docs/app/components/AppHeader.vue

@@ -42,7 +42,7 @@ defineShortcuts({
             variant="subtle"
             trailing-icon="i-lucide-chevron-down"
             size="xs"
-            class="-mb-[3px] font-semibold rounded-full truncate"
+            class="-mb-[3px] font-semibold rounded-full truncate hidden sm:flex"
             :class="[open && 'bg-[var(--ui-primary)]/15 ']"
             :ui="{
               trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' '),

docs/app/pages/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const siteConfig = useSiteConfig()
 
-const { data: page } = await useAsyncData('index', () => queryCollection('home').first())
+const { data: page } = await useAsyncData('landing', () => queryCollection('home').first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
@@ -17,62 +17,8 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="page">
-    <UPageHero
-      v-bind="page.hero"
-      :ui="{
-        title: 'font-semibold sm:text-6xl',
-        description: 'sm:text-lg text-[var(--ui-text-toned)] max-w-5xl mx-auto',
-      }"
-    >
-      <template
-        v-if="page.hero?.title"
-        #title
-      >
-        <MDC
-          :value="page.hero.title"
-          unwrap="p"
-        />
-      </template>
-
-      <UColorModeImage
-        v-if="page.hero?.image"
-        v-bind="page.hero.image"
-        class="z-[-1]"
-      />
-    </UPageHero>
-
-    <UPageSection
-      v-for="(section, index) in page.sections"
-      :key="index"
-      v-bind="section"
-      :ui="{
-        title: 'font-semibold lg:text-4xl',
-        featureLeadingIcon: 'text-[var(--ui-text-highlighted)]',
-        container: section.code ? 'lg:items-start' : '',
-        wrapper: section.code ? 'pt-10' : '',
-        ...(section.ui || {}),
-      }"
-    >
-      <template
-        v-if="section.title"
-        #title
-      >
-        <MDC
-          :value="section.title"
-          unwrap="p"
-        />
-      </template>
-
-      <MDC
-        v-if="section.code"
-        :value="section.code"
-      />
-      <UColorModeImage
-        v-else-if="section.image"
-        v-bind="section.image"
-        class="z-[-1]"
-      />
-    </UPageSection>
-  </div>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+  />
 </template>

docs/content.config.ts

@@ -19,42 +19,6 @@ export const collections = {
   }),
   home: defineCollection({
     type: 'page',
-    source: 'index.yml',
-    schema: z.object({
-      hero: z.object({
-        title: z.string(),
-        description: z.string(),
-        links: z.array(z.object({
-          label: z.string(),
-          icon: z.string(),
-          to: z.string(),
-        })).optional(),
-        image: z.object({
-          dark: z.string(),
-          light: z.string(),
-        }).optional(),
-      }).optional(),
-      sections: z.array(z.object({
-        title: z.string(),
-        description: z.string().optional(),
-        class: z.string().optional(),
-        code: z.string().optional(),
-        ui: z.object({}).optional(),
-        features: z.array(z.object({
-          icon: z.string().optional(),
-          title: z.string().optional(),
-          description: z.string().optional(),
-        })).optional(),
-        links: z.array(z.object({
-          label: z.string(),
-          icon: z.string(),
-          to: z.string(),
-        })).optional(),
-        image: z.object({
-          dark: z.string(),
-          light: z.string(),
-        }).optional(),
-      })).optional(),
-    }),
+    source: 'index.md',
   }),
 }