feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/components/docs/DocsPageHeader.vue

@@ -0,0 +1,37 @@
+<template>
+  <header v-if="page" class="relative border-b border-gray-200 dark:border-gray-800 pb-8 mb-12">
+    <p class="mb-4 text-sm leading-6 font-semibold text-primary-500 dark:text-primary-400 capitalize">
+      {{ useLowerCase(page._dir) }}
+    </p>
+    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
+      <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight dark:text-white">
+        {{ page.title }}
+      </h1>
+
+      <div class="flex items-center gap-2 mt-4 lg:mt-0">
+        <UButton
+          v-if="page.headlessui"
+          :label="page.headlessui.label"
+          :to="page.headlessui.to"
+          icon="i-simple-icons-headlessui"
+          color="white"
+        />
+
+        <UButton
+          v-if="page.github"
+          label="GitHub"
+          icon="i-simple-icons-github"
+          color="white"
+          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/U${page.title}.vue`"
+        />
+      </div>
+    </div>
+    <p v-if="page.description" class="mt-4 text-lg">
+      {{ page.description }}
+    </p>
+  </header>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+</script>