docs(community): add page

docs/app/composables/useFooter.ts

@@ -8,6 +8,9 @@ export function useFooter() {
   }, {
     label: 'Showcase',
     to: '/showcase'
+  }, {
+    label: 'Community',
+    to: '/community'
   }, {
     label: 'Team',
     to: '/team'

docs/app/composables/useHeader.ts

@@ -16,30 +16,7 @@ export function useHeader() {
     to: '/showcase'
   }, {
     label: 'Community',
-    children: [{
-      label: 'Team',
-      description: 'Meet the team building and maintaining Nuxt UI.',
-      icon: 'i-lucide-users',
-      to: '/team'
-    }, {
-      label: 'Devtools Integration',
-      description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
-      icon: 'i-lucide-code',
-      to: 'https://github.com/romhml/compodium',
-      target: '_blank'
-    }, {
-      label: 'Raycast Extension',
-      description: 'Access Nuxt UI components without leaving your editor.',
-      icon: 'i-simple-icons-raycast',
-      to: 'https://www.raycast.com/HugoRCD/nuxt',
-      target: '_blank'
-    }, {
-      label: 'Figma to Code',
-      description: 'Convert Figma designs to Nuxt UI code.',
-      icon: 'i-simple-icons-figma',
-      to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
-      target: '_blank'
-    }]
+    to: '/community'
   }, {
     label: 'Releases',
     to: '/releases'
@@ -77,6 +54,10 @@ export function useHeader() {
     label: 'Showcase',
     icon: 'i-lucide-presentation',
     to: '/showcase'
+  }, {
+    label: 'Community',
+    icon: 'i-lucide-globe',
+    to: '/community'
   }, {
     label: 'Team',
     icon: 'i-lucide-users',

docs/app/composables/useSearch.ts

@@ -31,29 +31,34 @@ export function useSearch() {
     icon: 'i-simple-icons-figma',
     to: '/figma'
   }, {
-    icon: 'i-lucide-panels-top-left',
     label: 'Templates',
     description: 'Explore official templates built with Nuxt UI.',
+    icon: 'i-lucide-panels-top-left',
     to: '/templates'
   }, {
-    icon: 'i-lucide-presentation',
     label: 'Showcase',
     description: 'Explore some of the amazing projects built with Nuxt UI.',
+    icon: 'i-lucide-presentation',
     to: '/showcase'
   }, {
-    icon: 'i-lucide-newspaper',
-    label: 'Releases',
-    description: 'Stay up to date with the newest features, enhancements, and fixes for Nuxt UI.',
-    to: '/releases'
+    label: 'Community',
+    description: 'Explore the amazing projects built around Nuxt UI.',
+    icon: 'i-lucide-globe',
+    to: '/community'
   }, {
     label: 'Team',
     description: 'Meet the team building and maintaining Nuxt UI.',
     icon: 'i-lucide-users',
     to: '/team'
+  }, {
+    label: 'Releases',
+    description: 'Stay up to date with the newest features, enhancements, and fixes for Nuxt UI.',
+    icon: 'i-lucide-newspaper',
+    to: '/releases'
   }, {
     label: 'GitHub',
-    icon: 'i-simple-icons-github',
     description: 'Check out the Nuxt UI repository and follow development on GitHub.',
+    icon: 'i-simple-icons-github',
     to: 'https://github.com/nuxt/ui/releases',
     target: '_blank'
   }])

docs/app/pages/community.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('community', () => queryCollection('community').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title: page.value.title,
+  description: page.value.description,
+  ogTitle: `${page.value.title} - Nuxt UI`,
+  ogDescription: page.value.description
+})
+
+defineOgImageComponent('Docs')
+</script>
+
+<template>
+  <div v-if="page">
+    <UPageHero
+      :title="page.hero.title"
+      :description="page.hero.description"
+      class="md:border-b border-default"
+      :ui="{
+        container: 'relative lg:py-32'
+      }"
+    >
+      <template #top>
+        <div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+      </template>
+
+      <LazyStarsBg />
+
+      <div aria-hidden="true" class="hidden md:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
+    </UPageHero>
+
+    <UPageSection :ui="{ container: '!py-0' }">
+      <div class="pb-16 sm:pb-24 lg:pb-32 md:border-x border-default">
+        <UPageGrid class="gap-px">
+          <UPageCard
+            v-for="item in page.items"
+            :key="item.label"
+            :title="item.label"
+            :description="item.description"
+            :to="item.to"
+            target="_blank"
+            class="rounded-none group"
+            :ui="{ footer: 'pointer-events-auto z-[1]' }"
+          >
+            <template #leading>
+              <UAvatar v-bind="item.avatar" size="3xl" class="mx-auto" loading="lazy" />
+            </template>
+
+            <template v-if="item.user" #footer>
+              <UButton
+                :label="item.user.name"
+                :avatar="item.user.avatar"
+                :to="item.user.to"
+                target="_blank"
+                size="sm"
+                color="neutral"
+                variant="outline"
+                class="ring-default group-hover:ring-accented transition bg-transparent"
+              />
+            </template>
+          </UPageCard>
+        </UPageGrid>
+      </div>
+    </UPageSection>
+  </div>
+</template>

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

@@ -101,7 +101,7 @@ const communityLinks = computed(() => [{
           :key="link.label"
           color="neutral"
           variant="outline"
-          :target="link.to.startsWith('http') ? '_blank' : undefined"
+          :target="link.to?.startsWith('http') ? '_blank' : undefined"
           v-bind="link"
         >
           <template v-if="link.avatar" #leading>

docs/app/pages/figma.vue

@@ -117,11 +117,12 @@ onMounted(async () => {
         Sarah
       </UBadge>
     </div>
+
     <UPageHero
       :links="page.hero.links"
       class="relative"
       :ui="{
-        container: 'relative !pb-0'
+        container: 'relative !pb-0 lg:py-32'
       }"
     >
       <template #title>
@@ -156,9 +157,8 @@ onMounted(async () => {
           </UButton>
         </div>
       </div>
-      <Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
-        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
-      </Motion>
+
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
     </UPageHero>
     <UPageSection v-bind="page.features1" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-default" />
     <UPageCTA

docs/app/pages/index.vue

@@ -9,7 +9,7 @@ if (!page.value) {
 const { url } = useSiteConfig()
 
 useSeoMeta({
-  titleTemplate: `%s - Nuxt UI`,
+  titleTemplate: '%s - Nuxt UI',
   title: page.value.title,
   description: page.value.description,
   ogTitle: `${page.value.title} - Nuxt UI`,
@@ -26,7 +26,7 @@ const { data: components } = await useAsyncData('index-components', () => {
 })
 
 const { data: templates } = await useAsyncData('index-templates', () => queryCollection('templates').first(), {
-  transform: data => data?.templates?.filter(template => template.framework === 'nuxt') || []
+  transform: data => data?.items?.filter(template => template.framework === 'nuxt') || []
 })
 
 const { data: module } = await useFetch('/api/module.json')
@@ -43,7 +43,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
 </script>
 
 <template>
-  <UMain v-if="page">
+  <div v-if="page">
     <UPageHero
       orientation="horizontal"
       :ui="{
@@ -319,5 +319,5 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
         <LazyHomeContributors :contributors="module?.contributors" :paused="!isContributorsInView || isContributorsHovered" />
       </div>
     </UPageSection>
-  </UMain>
+  </div>
 </template>

docs/app/pages/releases.vue

@@ -1,4 +1,19 @@
 <script setup lang="ts">
+const { data: page } = await useAsyncData('releases', () => queryCollection('releases').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title: page.value.title,
+  description: page.value.description,
+  ogTitle: `${page.value.title} - Nuxt UI`,
+  ogDescription: page.value.description
+})
+
+defineOgImageComponent('Docs')
+
 const { data: versions } = await useFetch('https://ungh.cc/repos/nuxt/ui/releases', {
   transform: (data: {
     releases: {
@@ -19,25 +34,26 @@ const { data: versions } = await useFetch('https://ungh.cc/repos/nuxt/ui/release
 </script>
 
 <template>
-  <div class="relative">
+  <div v-if="page">
     <UPageHero
-      title="Releases"
-      description="Stay up to date with the newest features, enhancements, and fixes for Nuxt UI."
+      :title="page.hero.title"
+      :description="page.hero.description"
+      :links="page.hero.links"
       class="md:border-b border-default"
       :ui="{
-        container: 'relative'
+        container: 'relative lg:py-32'
       }"
     >
+      <template #top>
+        <div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+      </template>
+
       <LazyStarsBg />
 
       <div aria-hidden="true" class="hidden md:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
     </UPageHero>
 
-    <UPageSection
-      :ui="{
-        container: '!py-0'
-      }"
-    >
+    <UPageSection :ui="{ container: '!py-0' }">
       <div class="py-4 md:py-8 lg:py-16 md:border-x border-default">
         <UContainer class="max-w-5xl">
           <UChangelogVersions>

docs/app/pages/showcase.vue

@@ -5,27 +5,24 @@ if (!page.value) {
 }
 
 useSeoMeta({
-  titleTemplate: `%s - Nuxt UI`,
+  titleTemplate: '%s - Nuxt UI',
   title: page.value.title,
   description: page.value.description,
   ogTitle: `${page.value.title} - Nuxt UI`,
   ogDescription: page.value.description
 })
 
-defineOgImageComponent('Docs', {
-  headline: 'Community'
-})
+defineOgImageComponent('Docs')
 </script>
 
 <template>
-  <UMain v-if="page">
+  <div v-if="page">
     <UPageHero
       :title="page.hero.title"
       :description="page.hero.description"
       :links="page.hero.links"
       :ui="{
-        wrapper: 'lg:px-12',
-        container: 'relative'
+        container: 'relative lg:py-32'
       }"
     >
       <template #top>
@@ -35,6 +32,10 @@ defineOgImageComponent('Docs', {
       <LazyStarsBg />
 
       <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
+    </UPageHero>
+
+    <UPageSection :ui="{ container: '!pt-0 relative' }">
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
 
       <div class="border-l border-t border-default">
         <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center divide-y divide-x divide-default">
@@ -67,6 +68,6 @@ defineOgImageComponent('Docs', {
           </li>
         </ul>
       </div>
-    </UPageHero>
-  </UMain>
+    </UPageSection>
+  </div>
 </template>

docs/app/pages/team.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-const title = 'Meet the Team'
-const description = 'The development of Nuxt UI is led by a community of developers from all over the world.'
+const { data: page } = await useAsyncData('team', () => queryCollection('team').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI',
-  title,
-  description,
-  ogTitle: `${title} - Nuxt UI`,
-  ogDescription: description
+  title: page.value.title,
+  description: page.value.description,
+  ogTitle: `${page.value.title} - Nuxt UI`,
+  ogDescription: page.value.description
 })
 
-defineOgImageComponent('Docs', {
-  headline: 'Community'
-})
+defineOgImageComponent('Docs')
 
 const { data: module } = await useFetch('/api/module.json')
 
@@ -32,13 +32,15 @@ const icons = {
 </script>
 
 <template>
-  <UMain>
+  <div v-if="page">
     <UPageHero
-      :title="title"
-      :description="description"
+      :title="page.hero.title"
+      :description="page.hero.description"
       class="relative"
-      orientation="vertical"
-      :ui="{ title: 'text-balance', container: 'relative' }"
+      :ui="{
+        title: 'text-balance',
+        container: 'relative lg:py-32'
+      }"
     >
       <template #top>
         <div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
@@ -154,5 +156,5 @@ const icons = {
         </UPageCard>
       </UPageGrid>
     </UPageSection>
-  </UMain>
+  </div>
 </template>