docs: improve

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

@@ -35,49 +35,46 @@ useSeoMeta({
   ogDescription: page.value.description
 })
 
-defineOgImage({
-  component: 'Docs',
-  title: page.value.title,
-  description: page.value.description,
+defineOgImageComponent('Docs', {
   headline: headline.value
 })
 
-const communityLinks = computed(() => [{
-  icon: 'i-heroicons-pencil-square',
-  label: 'Edit this page',
-  to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
-  target: '_blank'
-}, {
-  icon: 'i-heroicons-star',
-  label: 'Star on GitHub',
-  to: 'https://github.com/nuxt/ui',
-  target: '_blank'
-}, {
-  icon: 'i-heroicons-lifebuoy',
-  label: 'Contributing',
-  to: '/getting-started/contributing'
-}, {
-  label: 'Roadmap',
-  icon: 'i-heroicons-map',
-  to: '/roadmap'
-}])
+// const communityLinks = computed(() => [{
+//   icon: 'i-heroicons-pencil-square',
+//   label: 'Edit this page',
+//   to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
+//   target: '_blank'
+// }, {
+//   icon: 'i-heroicons-star',
+//   label: 'Star on GitHub',
+//   to: 'https://github.com/nuxt/ui',
+//   target: '_blank'
+// }, {
+//   icon: 'i-heroicons-lifebuoy',
+//   label: 'Contributing',
+//   to: '/getting-started/contributing'
+// }, {
+//   label: 'Roadmap',
+//   icon: 'i-heroicons-map',
+//   to: '/roadmap'
+// }])
 
-const resourcesLinks = [{
-  icon: 'i-simple-icons-figma',
-  label: 'Figma Kit',
-  to: 'https://www.figma.com/community/file/1288455405058138934',
-  target: '_blank'
-}, {
-  label: 'Playground',
-  icon: 'i-simple-icons-stackblitz',
-  to: 'https://stackblitz.com/edit/nuxt-ui',
-  target: '_blank'
-}, {
-  icon: 'i-simple-icons-nuxtdotjs',
-  label: 'Nuxt docs',
-  to: 'https://nuxt.com',
-  target: '_blank'
-}]
+// const resourcesLinks = [{
+//   icon: 'i-simple-icons-figma',
+//   label: 'Figma Kit',
+//   to: 'https://www.figma.com/community/file/1288455405058138934',
+//   target: '_blank'
+// }, {
+//   label: 'Playground',
+//   icon: 'i-simple-icons-stackblitz',
+//   to: 'https://stackblitz.com/edit/nuxt-ui',
+//   target: '_blank'
+// }, {
+//   icon: 'i-simple-icons-nuxtdotjs',
+//   label: 'Nuxt docs',
+//   to: 'https://nuxt.com',
+//   target: '_blank'
+// }]
 </script>
 
 <template>
@@ -94,7 +91,7 @@ const resourcesLinks = [{
 
     <template v-if="page?.body?.toc?.links?.length" #right>
       <UContentToc :links="page.body.toc.links">
-        <template #bottom>
+        <!-- <template #bottom>
           <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
           <UPageLinks title="Community" :links="communityLinks" />
@@ -103,11 +100,11 @@ const resourcesLinks = [{
 
           <UPageLinks title="Resources" :links="resourcesLinks" />
 
-          <!-- <USeparator type="dashed" />
+          <USeparator type="dashed" />
 
           <AdsPro />
-          <AdsCarbon /> -->
-        </template>
+          <AdsCarbon />
+        </template> -->
       </UContentToc>
     </template>
   </UPage>

docs/app/pages/playground.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const title = 'Playground'
-const description = 'Play online with our interactive Nuxt Image playground.'
-
-useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
-  title,
-  ogTitle: 'Nuxt UI Playground',
-  description
-})
-
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
-
-const colorMode = useColorMode()
-</script>
-
-<template>
-  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
-    <ClientOnly>
-      <iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${colorMode.preference}`" width="100%" height="100%" />
-    </ClientOnly>
-  </div>
-</template>

docs/app/pages/roadmap.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-const title = 'Roadmap'
-const description = 'Discover our Volta board for @nuxt/ui development status.'
-
-useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
-  title,
-  ogTitle: 'Nuxt UI Roadmap',
-  description
-})
-
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
-
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
-
-const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
-</script>
-
-<template>
-  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
-    <ClientOnly>
-      <iframe :src="src" width="100%" height="100%" />
-    </ClientOnly>
-  </div>
-</template>