feat: update docs

docs/app.vue

@@ -1,36 +1,41 @@
-<script setup>
+<script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
 
 const { mapContentNavigation } = useElementsHelpers()
 
 const route = useRoute()
+
 useServerSeoMeta({
-  ogSiteName: 'Nuxt DevTools',
+  ogSiteName: 'Nuxt Content',
   twitterCard: 'summary_large_image',
 })
+
 useHead({
   htmlAttrs: {
     lang: 'en',
   },
   link: () => [
-    { rel: 'canonical', href: `https://devtools.nuxtjs.org${withoutTrailingSlash(route.path)}` },
+    { rel: 'canonical', href: `https://content.nuxtjs.org${withoutTrailingSlash(route.path)}` },
   ],
 })
+
 const links = [{
   label: 'Documentation',
-  to: '/guide/getting-started',
+  to: '/get-started',
 }, {
   label: 'Playground',
   to: '/playground',
 }, {
   label: 'Releases',
-  to: 'https://github.com/nuxt/devtools/releases',
+  to: 'https://github.com/nuxt/content/releases',
   target: '_blank',
 }]
+
 const { data: files } = useLazyFetch('/api/search.json', {
   default: () => [],
   server: false,
 })
+
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 
 // Provide
@@ -47,8 +52,8 @@ provide('navigation', navigation)
       <UColorModeButton v-if="!$colorMode.forced" />
       <USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
       <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" />
-      <USocialButton aria-label="Nuxt DevTools on GitHub" icon="i-simple-icons-github"
-        to="https://github.com/nuxt/devtools" />
+      <USocialButton aria-label="Nuxt Content on GitHub" icon="i-simple-icons-github"
+        to="https://github.com/nuxt/content" />
     </template>
     <!-- Mobile panel -->
     <template v-if="$route.path !== '/'" #panel>
@@ -64,17 +69,17 @@ provide('navigation', navigation)
   <UFooter :links="links">
     <template #left>
       <span class="text-sm">
-                  Published under <NuxtLink to="https://github.com/nuxt/devtools" target="_blank" class="underline">
-                    MIT License
-                  </NuxtLink>
-                </span>
+                                                                                      Published under <NuxtLink to="https://github.com/nuxt/content" target="_blank" class="underline">
+                                                                                        MIT License
+                                                                                      </NuxtLink>
+                                                                                    </span>
     </template>
     <template #right>
       <UColorModeButton v-if="!$colorMode.forced" />
       <USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
       <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" />
       <USocialButton aria-label="Nuxt Devtools on GitHub" icon="i-simple-icons-github"
-        to="https://github.com/nuxt/devtools" />
+        to="https://github.com/nuxt/content" />
     </template>
   </UFooter>
   <ClientOnly>

docs/components/VideoPlayer.vue

@@ -11,21 +11,14 @@ defineProps({
     default: '',
   },
 })
-
-const videoWrapper = ref()
-const videoPlayer = ref()
 </script>
 
 <template>
-  <div
-    ref="videoWrapper"
-    class="relative flex items-center justify-center border border-slate-200/10 rounded-xl bg-slate-700/20"
-  >
+  <div ref="videoWrapper"
+    class="relative flex items-center justify-center border border-slate-200/10 rounded-xl bg-slate-700/20">
     <div class="p-4">
-      <video
-        ref="videoPlayer" :poster="poster" :src="source.src" :type="source.type" controls
-        class="rounded-lg bg-slate-800" autoplay muted
-      />
+      <video ref="videoPlayer" :poster="poster" :src="source.src" :type="source.type" controls
+        class="rounded-lg bg-slate-800" muted />
     </div>
   </div>
 </template>

docs/components/content/ButtonLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps({
+  to: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'md'
+  }
+})
+</script>
+
+<template>
+  <UButton color="primary" :to="to" :label="label" :icon="icon" :size="size" />
+</template>

docs/components/content/CodeBlock.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="bg-gray-600">
+    <slot />
+  </div>
+</template>

docs/components/content/Example/ExampleCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 border bg-white dark:bg-black dark:border-gray-700 rounded">
+  <div class="p-6 border bg-white dark:bg-gray-800 dark:border-gray-700 rounded">
     <slot />
   </div>
 </template>

docs/components/content/ProseCode.vue

@@ -0,0 +1,35 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: null
+  },
+  filename: {
+    type: String,
+    default: null
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => []
+  },
+  meta: {
+    type: String,
+    default: null
+  }
+})
+</script>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

docs/content/1.get-started.md

@@ -1,18 +1,13 @@
 ---
-icon: heroicons-outline:lightning-bolt
-layout: docs-page
+title: Get Started
+description: Get started with Nuxt Content by creating a new project or adding it to an existing Nuxt application.
 ---
-
-# Get Started
-
-Get started with Nuxt Content by creating a new project or adding it to an existing Nuxt application.
-
 ## Play online
 
 You can start playing with Nuxt Content in your browser using our online sandboxes:
 
-:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt/starter/tree/content" blank style="margin-right: var(--space-4);"}
-:button-link[Play on CodeSandbox]{icon="IconCodeSandBox" href="https://codesandbox.io/s/github/nuxt/starter/tree/content" blank}
+:button-link{icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt/starter/tree/content" blank label="Play on StackBlitz" .mr-4}
+:button-link{icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt/starter/tree/content" label="Play on CodeSandbox" blank}
 
 ## New Project
 
@@ -70,11 +65,11 @@ npm run dev
 ```
 ::
 
-::alert{type="success"}
+::callout{type="success"}
 ✨ Well done! A browser window should automatically open for <http://localhost:3000>
 ::
 
-::alert{type="info"}
+::callout{type="info"}
 👉 Next step is to head over the [Writing section](/guide/writing/content-directory) to learn how to use Nuxt Content.
 ::
 
@@ -131,14 +126,14 @@ To render content pages, add a [catch-all route](https://nuxt.com/docs/guide/dir
 </template>
 ```
 
-::alert{type="warning"}
+::callout{type="warning"}
 ⚠️ If you have an `app.vue` file at the project's root, ensure that you include [`<NuxtPage />`](https://nuxt.com/docs/api/components/nuxt-page#nuxtpage) in its template to render pages.
 ::
 
-::alert{type="warning"}
+::callout{type="warning"}
 ⚠️ Content v2 requires [Nuxt 3](https://nuxt.com). If you are using Nuxt 2, checkout [Content v1 documentation](/v1/getting-started/installation).
 ::
 
-::alert{type="info"}
+::callout{type="info"}
 👉 Next step is to head over the [Writing section](/guide/writing/content-directory) to learn how to use Nuxt Content.
 ::

docs/content/3.guide/1.writing/1.content-directory.md → docs/content/1.guide/1.writing/1.content-directory.md

@@ -1,6 +1,7 @@
-# Content directory
-
-The Content module parses `.md` and `.yaml` files inside the content/ directory and provides paths according to the directory structure.
+---
+title: Content directory
+description: The Content module parses .md and .yaml files inside the content/ directory and provides paths according to the directory structure.
+---
 
 ## Paths
 
@@ -36,7 +37,7 @@ content/
     index.md
 ```
 
-::alert{type="info"}
+::callout{type="info"}
 Separate number from file name using `.` character. Using any other separator will not work.
 ::
 
@@ -74,7 +75,7 @@ content/
       1.messages.md        // Partial content because of its grand parent
 ```
 
-::alert{type="info"}
+::callout{type="info"}
 Starting a directory name with `_` will mark its entire nested content as partial.
 ::