Merge branch 'v3' into v3-studio

nuxt · Nov 12, 2024 · 6debe94 · 6debe94
2 parents 06ad7e3 + 606d5ca
commit 6debe94
Show file tree

Hide file tree

Showing 110 changed files with 4,220 additions and 6,094 deletions.
diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
@@ -1,15 +1,8 @@
 export default defineAppConfig({
-  toaster: {
-    position: 'bottom-right' as const,
-    expand: true,
-    duration: 5000,
-  },
-  theme: {
-    radius: 0.25,
-  },
   ui: {
     colors: {
       primary: 'green',
+      secondary: 'sky',
       neutral: 'slate',
     },
   },

diff --git a/docs/app/app.vue b/docs/app/app.vue
@@ -6,22 +6,10 @@ const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
-function mapPath(data) {
-  return data.map((item) => {
-    if (item.children) {
-      item.children = mapPath(item.children)
-    }
-    return {
-      ...item,
-      _path: item.path,
-    }
-  })
-}
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
-  default: () => [],
-  transform: mapPath,
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
 })
-const { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))
 
 const searchTerm = ref('')
 
@@ -36,18 +24,13 @@ const searchTerm = ref('')
 const links = computed(() => {
   return [{
     label: 'Docs',
-    icon: 'i-heroicons-book-open',
-    to: '/getting-started',
-    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components'),
-  }, {
-    label: 'Releases',
-    icon: 'i-heroicons-rocket-launch',
-    to: '/releases',
+    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 radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 
 useHead({
   meta: [
@@ -58,9 +41,6 @@ useHead({
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
     { rel: 'canonical', href: `https://content.nuxt.com${withoutTrailingSlash(route.path)}` },
   ],
-  style: [
-    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
-  ],
   htmlAttrs: {
     lang: 'en',
   },
@@ -75,39 +55,34 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <UApp :toaster="appConfig.toaster">
+  <UApp>
     <NuxtLoadingIndicator color="#FFF" />
 
-    <template v-if="!route.path.startsWith('/examples')">
-      <Banner />
-
-      <Header :links="links" />
-    </template>
+    <AppBanner />
+    <AppHeader :links="links" />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <template v-if="!route.path.startsWith('/examples')">
-      <Footer />
-
-      <ClientOnly>
-        <LazyUContentSearch
-          v-model:search-term="searchTerm"
-          :files="files"
-          :navigation="navigation"
-          :fuse="{ resultLimit: 42 }"
-        />
-      </ClientOnly>
-    </template>
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        v-model:search-term="searchTerm"
+        :files="files"
+        :navigation="navigation"
+        :fuse="{ resultLimit: 42 }"
+      />
+    </ClientOnly>
   </UApp>
 </template>
 
 <style>
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
-@source "../content/**/*.md";
+@source "../content/**/*";
 
 @theme {
   --font-family-sans: 'Public Sans', sans-serif;
@@ -128,4 +103,11 @@ provide('navigation', navigation)
 :root {
   --ui-container-width: 90rem;
 }
+
+.dark {
+  --ui-bg: var(--ui-color-neutral-950);
+  --ui-bg-muted: var(--ui-color-neutral-900);
+  --ui-bg-elevated: var(--ui-color-neutral-900);
+  --ui-bg-accented: var(--ui-color-neutral-800);
+}
 </style>
diff --git a/docs/app/components/Banner.vue → docs/app/components/AppBanner.vue b/docs/app/components/Banner.vue → docs/app/components/AppBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <UBanner
-    icon="i-heroicons-wrench-screwdriver"
-    :actions="[{ label: 'Go to Nuxt Content v2', to: 'https://content.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
+    icon="i-lucide-construction"
+    :actions="[{ label: 'Go to Nuxt Content v2', to: 'https://content.nuxt.com', trailingIcon: 'i-lucide-arrow-right' }]"
     :close="false"
   >
     <template #title>

diff --git a/docs/app/components/Footer.vue → docs/app/components/AppFooter.vue b/docs/app/components/Footer.vue → docs/app/components/AppFooter.vue
@@ -48,25 +48,25 @@ const route = useRoute()
 
     <template #right>
       <UButton
-        aria-label="Nuxt Website"
-        icon="i-simple-icons-nuxtdotjs"
-        to="https://nuxt.com"
+        aria-label="Nuxt Content on Discord"
+        icon="i-simple-icons-discord"
+        to="https://go.nuxt.com/discord"
         target="_blank"
         color="neutral"
         variant="ghost"
       />
       <UButton
-        aria-label="Nuxt Content on Discord"
-        icon="i-simple-icons-discord"
-        to="https://chat.nuxt.dev"
+        aria-label="Nuxt on BlueSKy"
+        icon="i-simple-icons-bluesky"
+        to="https://go.nuxt.com/bluesky"
         target="_blank"
         color="neutral"
         variant="ghost"
       />
       <UButton
         aria-label="Nuxt on X"
         icon="i-simple-icons-x"
-        to="https://x.com/nuxt_js"
+        to="https://go.nuxt.com/x"
         target="_blank"
         color="neutral"
         variant="ghost"

diff --git a/docs/app/components/Header.vue → docs/app/components/AppHeader.vue b/docs/app/components/Header.vue → docs/app/components/AppHeader.vue
@@ -2,15 +2,15 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { NavigationMenuItem } from '@nuxt/ui'
 
-defineProps<{
+const props = defineProps<{
   links: NavigationMenuItem[]
 }>()
 
 const config = useRuntimeConfig().public
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-// const items = computed(() => props.links.map(({ icon, ...link }) => link))
+const items = computed(() => props.links.map(({ icon, ...link }) => link))
 
 defineShortcuts({
   meta_g: () => {
@@ -27,21 +27,24 @@ defineShortcuts({
         class="flex items-end gap-2 font-bold text-xl text-[--ui-text-highlighted] min-w-0"
         aria-label="Nuxt Content"
       >
-        <Logo class="w-auto h-6 shrink-0" />
+        <AppLogo class="w-auto h-6 shrink-0" />
 
         <UBadge
           :label="`v${config.version}`"
           variant="subtle"
           size="sm"
-          class="-mb-[2px] rounded-[--ui-radius] font-semibold inline-block truncate"
+          class="-mb-[2px] font-semibold inline-block truncate"
         />
       </NuxtLink>
     </template>
 
-    <!-- <UNavigationMenu :items="items" variant="link" /> -->
+    <UNavigationMenu
+      :items="items"
+      variant="link"
+    />
 
     <template #right>
-      <ThemePicker />
+      <UColorModeButton />
 
       <UTooltip
         text="Search"

diff --git a/docs/app/components/Logo.vue → docs/app/components/AppLogo.vue b/docs/app/components/Logo.vue → docs/app/components/AppLogo.vue
diff --git a/docs/app/components/PreviewCard.vue b/docs/app/components/PreviewCard.vue
@@ -9,8 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="p-4 border rounded-b-md border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] bg-[--ui-color-neutral-50] dark:bg-[--ui-color-neutral-800] dark:text-white"
-    :class="prose ? 'prose' : 'not-prose'"
+    class="px-4 py-1 border rounded-b-md border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] bg-[var(--ui-color-neutral-50)] dark:bg-[var(--ui-color-neutral-800)] dark:text-white"
   >
     <slot />
   </div>

diff --git a/docs/app/components/example/ExampleFulltextContentSearch.vue b/docs/app/components/example/ExampleFulltextContentSearch.vue
@@ -2,7 +2,7 @@
   <UCard>
     <UButton
       variant="ghost"
-      icon="i-heroicons-magnifying-glass-20-solid"
+      icon="i-lucide-search"
       @click="useContentSearch().open.value = true"
     >
       Open Search Modal

diff --git a/docs/app/components/example/ExampleHero.vue b/docs/app/components/example/ExampleHero.vue
@@ -1,7 +1,7 @@
 <template>
-  <section>
+  <section class="pt-4">
     <h1 class="text-4xl">
-      <slot />
+      <MDCSlot unwrap="p" />
     </h1>
     <slot name="description" />
   </section>