From c21eb32c7086b4e023ae5e313d8795ef91b805ac Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 2 Apr 2025 12:20:26 +0200
Subject: [PATCH] docs: add team page

---
 docs/app/components/Footer.vue     |   4 +-
 docs/app/pages/.index.yml          |   6 +-
 docs/app/pages/index.vue           |  13 +--
 docs/app/pages/team.vue            | 151 +++++++++++++++++++++++++++++
 docs/server/api/module.json.get.ts |  34 +++++++
 5 files changed, 193 insertions(+), 15 deletions(-)
 create mode 100644 docs/app/pages/team.vue
 create mode 100644 docs/server/api/module.json.get.ts

diff --git a/docs/app/components/Footer.vue b/docs/app/components/Footer.vue
index b5bab47a..d079043c 100644
--- a/docs/app/components/Footer.vue
+++ b/docs/app/components/Footer.vue
@@ -2,8 +2,8 @@
 const route = useRoute()
 
 const links = [{
-  label: 'Figma',
-  to: '/figma'
+  label: 'Team',
+  to: '/team'
 }, {
   label: 'Roadmap',
   to: '/roadmap'
diff --git a/docs/app/pages/.index.yml b/docs/app/pages/.index.yml
index e19155d1..d0bb2617 100644
--- a/docs/app/pages/.index.yml
+++ b/docs/app/pages/.index.yml
@@ -176,7 +176,11 @@ community:
   links:
     - label: Star on GitHub
       color: neutral
-      variant: outline
       to: https://github.com/nuxt/ui
       target: _blank
       icon: i-lucide-star
+    - label: Meet the team
+      color: neutral
+      variant: outline
+      to: /team
+      trailingIcon: i-lucide-arrow-right
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
index 60738b00..1833be70 100644
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -23,18 +23,7 @@ const { data: components } = await useAsyncData('ui-components', () => {
     .all()
 })
 
-const { data: module } = await useFetch<{
-  stats: {
-    downloads: number
-    stars: number
-  }
-  contributors: {
-    username: string
-  }[]
-}>('https://api.nuxt.com/modules/ui', {
-  key: 'stats',
-  transform: ({ stats, contributors }) => ({ stats, contributors })
-})
+const { data: module } = await useFetch('/api/module.json')
 
 const { format } = Intl.NumberFormat('en', { notation: 'compact' })
 
diff --git a/docs/app/pages/team.vue b/docs/app/pages/team.vue
new file mode 100644
index 00000000..7eadc860
--- /dev/null
+++ b/docs/app/pages/team.vue
@@ -0,0 +1,151 @@
+<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.'
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title,
+  ogTitle: 'Nuxt UI Team',
+  description
+})
+
+defineOgImageComponent('Docs', {
+  headline: 'Community'
+})
+
+const { data: module } = await useFetch('/api/module.json')
+
+const contributors = computed(() => module.value?.contributors?.filter(contributor => !module.value?.team?.find(user => user.login === contributor.username)))
+
+const icons = {
+  website: 'i-lucide-link',
+  twitter: 'i-simple-icons-x',
+  twitch: 'i-simple-icons-twitch',
+  youtube: 'i-simple-icons-youtube',
+  instagram: 'i-simple-icons-instagram',
+  linkedin: 'i-simple-icons-linkedin',
+  mastodon: 'i-simple-icons-mastodon',
+  bluesky: 'i-simple-icons-bluesky',
+  github: 'i-simple-icons-github'
+}
+</script>
+
+<template>
+  <UMain>
+    <UPageHero
+      :title="title"
+      :description="description"
+      class="relative"
+      orientation="vertical"
+      :ui="{ title: 'text-balance', container: 'relative' }"
+    >
+      <template #top>
+        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+      </template>
+
+      <LazyStarsBg />
+    </UPageHero>
+
+    <UPageSection :ui="{ container: '!pt-0' }">
+      <UPageGrid class="xl:grid-cols-4">
+        <UPageCard
+          v-for="(user, index) in module?.team"
+          :key="index"
+          :title="user.name"
+          :description="[user.pronouns, user.location].filter(Boolean).join(' ・ ')"
+          :ui="{
+            container: 'gap-y-4 lg:p-8',
+            leading: 'flex justify-center',
+            title: 'text-center',
+            description: 'text-center text-(--ui-text-muted)'
+          }"
+          variant="subtle"
+        >
+          <template #leading>
+            <UAvatar provider="ipx" :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${user.login}`" :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${user.login} 2x`" size="3xl" class="mx-auto" />
+          </template>
+
+          <div class="flex items-center justify-center gap-1">
+            <UButton
+              v-for="(link, key) in user.socialAccounts"
+              :key="key"
+              color="neutral"
+              variant="link"
+              :to="link.url"
+              :icon="icons[key as keyof typeof icons] || icons.website"
+              :alt="`Link to ${user.name}'s ${key} profile`"
+              target="_blank"
+              size="sm"
+            />
+            <UButton
+              :to="`https://github.com/${user.login}`"
+              color="neutral"
+              variant="link"
+              :alt="`Link to ${user.name}'s GitHub profile`"
+              :icon="icons.github"
+              target="_blank"
+            />
+            <UButton
+              v-if="user.websiteUrl"
+              :to="user.websiteUrl"
+              color="neutral"
+              variant="link"
+              :alt="`Link to ${user.name}'s personal website`"
+              :icon="icons.website"
+              target="_blank"
+            />
+          </div>
+          <div v-if="user.sponsorsListing" class="flex items-center justify-center">
+            <UButton
+              :to="user.sponsorsListing"
+              target="_blank"
+              color="neutral"
+              variant="subtle"
+              icon="i-lucide-heart"
+              label="Sponsor"
+              :ui="{ leadingIcon: 'text-pink-500 dark:text-pink-400' }"
+            />
+          </div>
+        </UPageCard>
+      </UPageGrid>
+
+      <ProseHr />
+
+      <UPageGrid class="xl:grid-cols-6">
+        <UPageCard
+          v-for="contributor in contributors"
+          :key="contributor.username"
+          :title="contributor.username"
+          :ui="{
+            container: 'gap-y-2',
+            leading: 'flex justify-center',
+            title: 'text-center',
+            description: 'text-center text-(--ui-text-muted)'
+          }"
+        >
+          <template #leading>
+            <UAvatar
+              provider="ipx"
+              :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${contributor.username}`"
+              :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${contributor.username} 2x`"
+              size="3xl"
+              class="mx-auto"
+              loading="lazy"
+            />
+          </template>
+
+          <div class="flex items-center justify-center gap-1">
+            <UButton
+              :to="`https://github.com/${contributor.username}`"
+              color="neutral"
+              variant="link"
+              :alt="`Link to ${contributor.username}'s GitHub profile`"
+              :icon="icons.github"
+              target="_blank"
+            />
+          </div>
+        </UPageCard>
+      </UPageGrid>
+    </UPageSection>
+  </UMain>
+</template>
diff --git a/docs/server/api/module.json.get.ts b/docs/server/api/module.json.get.ts
new file mode 100644
index 00000000..cb5cdf7f
--- /dev/null
+++ b/docs/server/api/module.json.get.ts
@@ -0,0 +1,34 @@
+interface TeamMember {
+  name: string
+  login: string
+  avatarUrl: string
+  pronouns?: string
+  location?: string
+  websiteUrl?: string
+  sponsorsListing?: string
+  socialAccounts: Record<string, { displayName: string, url: string }>
+}
+
+interface Module {
+  stats: {
+    downloads: number
+    stars: number
+  }
+  contributors: {
+    username: string
+  }[]
+}
+export default defineCachedEventHandler(async () => {
+  const team = await $fetch<TeamMember[]>('https://api.nuxt.com/teams/ui')
+  const { stats, contributors } = await $fetch<Module>('https://api.nuxt.com/modules/ui')
+
+  return {
+    team,
+    stats,
+    contributors
+  }
+}, {
+  maxAge: 60 * 60, // 1 hour
+  shouldBypassCache: () => !!import.meta.dev,
+  getKey: () => 'module'
+})