docs: various improvements

docs/app/app.vue

@@ -1,36 +1,15 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import colors from 'tailwindcss/colors'
 
 const route = useRoute()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false,
 })
 
-const searchTerm = ref('')
-
-// watch(searchTerm, debounce((query: string) => {
-//   if (!query) {
-//     return
-//   }
-
-//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
-// }, 500))
-
-const links = computed(() => {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-book',
-    to: '/docs/getting-started',
-    active: route.path.startsWith('/docs'),
-  }].filter(Boolean)
-})
-
-const color = computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
+const links = useNavLinks()
+const color = useThemeColor()
 
 useHead({
   meta: [
@@ -39,7 +18,7 @@ useHead({
   ],
   link: [
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
-    { rel: 'canonical', href: `https://content.nuxt.com${withoutTrailingSlash(route.path)}` },
+    { rel: 'canonical', href: `https://content3.nuxt.dev${withoutTrailingSlash(route.path)}` },
   ],
   htmlAttrs: {
     lang: 'en',
@@ -69,7 +48,6 @@ provide('navigation', navigation)
 
     <ClientOnly>
       <LazyUContentSearch
-        v-model:search-term="searchTerm"
         :files="files"
         :navigation="navigation"
         :fuse="{ resultLimit: 42 }"

docs/app/components/AppHeader.vue

@@ -8,9 +8,10 @@ const props = defineProps<{
 
 const config = useRuntimeConfig().public
 
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+const nav = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const items = computed(() => props.links.map(({ icon, ...link }) => link))
+const navigation = computed(() => nav?.value.find(item => item.path === '/docs')?.children || [])
 
 defineShortcuts({
   meta_g: () => {
@@ -33,18 +34,26 @@ defineShortcuts({
           :label="`v${config.version}`"
           variant="subtle"
           size="sm"
-          class="-mb-[2px] font-semibold inline-block truncate"
+          class="hidden -mb-[2px] font-semibold sm:inline-block truncate"
         />
       </NuxtLink>
     </template>
 
-    <UNavigationMenu
+    <!-- <UNavigationMenu
       :items="items"
       variant="link"
-    />
+    /> -->
 
     <template #right>
-      <UColorModeButton />
+      <UButton
+        v-if="$route.path === '/'"
+        label="Get started"
+        to="/docs/getting-started"
+        size="sm"
+        class="hidden sm:inline-flex"
+      />
+
+      <UColorModeButton class="hidden sm:inline-flex" />
 
       <UTooltip
         text="Search"

docs/app/components/example/ExampleLandingHero.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  image: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col sm:flex-row sm:items-center flex-col-reverse gap-4 py-8 sm:gap-12 sm:py-12">
+    <div>
+      <h1 class="text-4xl font-semibold">
+        <slot name="title" />
+      </h1>
+      <div class="text-base text-gray-600 dark:text-gray-300">
+        <slot name="description" />
+      </div>
+    </div>
+    <img
+      :src="image"
+      class="w-1/2 rounded-lg"
+    >
+  </section>
+</template>

docs/app/composables/nav.ts

@@ -0,0 +1,19 @@
+import colors from 'tailwindcss/colors'
+
+export const useNavLinks = () => {
+  const route = useRoute()
+
+  return computed(() => [{
+    label: 'Documentation',
+    icon: 'i-lucide-book',
+    to: '/docs/getting-started',
+    active: route.path.startsWith('/docs'),
+  }])
+}
+
+export const useThemeColor = () => {
+  const colorMode = useColorMode()
+  const appConfig = useAppConfig()
+
+  return computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
+}

docs/app/error.vue

@@ -1,28 +1,15 @@
 <script setup lang="ts">
-import colors from 'tailwindcss/colors'
 import type { NuxtError } from '#app'
 
 const props = defineProps<{
   error: NuxtError
 }>()
 
-const route = useRoute()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
 const { data: files } = await useAsyncData('files', () => queryCollectionSearchSections('docs', { ignoredTags: ['style'] }))
 
-const color = computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
-
-const links = computed(() => {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-book',
-    to: '/docs/getting-started',
-    active: route.path.startsWith('/docs'),
-  }].filter(Boolean)
-})
+const links = useNavLinks()
+const color = useThemeColor()
 
 useHead({
   meta: [

docs/app/pages/index.vue

@@ -42,6 +42,8 @@ if (!page.value) {
       :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 || {}),
       }"
     >

docs/app/plugins/home.ts

@@ -0,0 +1,8 @@
+import { ExampleLandingHero, PreviewCard } from '#components'
+
+// Fix error on components not found in landing page
+// maybe because it's within a .yml file?
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('ExampleLandingHero', ExampleLandingHero)
+  nuxtApp.vueApp.component('PreviewCard', PreviewCard)
+})

docs/content/docs/.navigation.yml

@@ -0,0 +1,2 @@
+
+title: Documentation

docs/content/docs/1.getting-started/3.configuration.md

@@ -73,9 +73,9 @@ export default defineNuxtConfig({
 })
 ```
 
-### `LibSQL` / `Turso`
+### `LibSQL`
 
-If you plan to deploy your application using LibSQL/Turso database you need to use `libsql` database adapter. 
+If you plan to deploy your application using LibSQL database you need to use `libsql` database adapter. 
 
 First, make sure to install the `@libsql/client` package:
 
@@ -97,6 +97,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::note
+The most popular LibSQL hosting services is [Turso](https://turso.tech/).
+::
+
 ## `build`
 
 Nuxt Content read and parse all the available contents at built time. This option let you control over parsing contents.

docs/content/docs/2.collections/1.collections.md

@@ -54,7 +54,7 @@ import { defineCollection, z } from '@nuxt/content'
 
 export const collections = {
   blog: defineCollection({
-    source: 'blog/**.md',
+    source: 'blog/*.md',
     type: 'page',
     // Define custom schema for docs collection
     schema: z.object({

docs/content/docs/2.collections/2.types.md

@@ -16,7 +16,7 @@ For both types, built-in fields are generated. Every collection includes these d
 
 ```ts
 defineCollection({
-  source: '**.md',
+  source: '**/*.md',
   type: 'page'
 })
 ```

docs/content/docs/3.files/1.markdown.md

@@ -11,7 +11,7 @@ description: "Create and query Markdown files in your Nuxt applications and use
 export const collections = {
   blog: defineCollection({
     type: 'page',
-    source: 'blog/**.md',
+    source: 'blog/*.md',
     schema: z.object({
       date: z.string()
     })
@@ -171,7 +171,7 @@ In a markdown file, use the component with the **`::`** identifier.
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-card
     The content of the card
     ::
@@ -206,7 +206,7 @@ A component's slots can accept content or another components.
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-hero
     My Page Title
 
@@ -237,7 +237,7 @@ You can use Markdown inside your components slots:
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-title
     A [rich text](/) will be **rendered** by the component.
     ::
@@ -273,7 +273,7 @@ The `{}` identifier passes props to components in a terse way by using a `key=va
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-alert{type="warning"}
     The **alert** component.
     ::
@@ -364,7 +364,7 @@ The YAML method uses the `---` identifier to declare one prop per line, that can
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-icon-card
     ---
     icon: IconNuxt
@@ -386,7 +386,7 @@ Possible values ​​are all named attributes, classes with the notation `.clas
   Hello [World]{style="color: green;" .custom-class #custom-id}!
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   Hello [World]{style="color: green;" .custom-class #custom-id}!
   ::
 ::