From bf0f030e53f4cc831ef4d9584a6b435df7564b57 Mon Sep 17 00:00:00 2001
From: OM MISHRA <152969928+howwohmm@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:00:18 +0530
Subject: [PATCH 1/3] feat(ui): add description and identity claims to
 governance cards

Expand governance member cards on the about page to show:
- Bio/description line from GitHub profile
- Social identity links (X/Twitter, Bluesky, Mastodon, LinkedIn, etc.)

The existing `fetchSponsorable` GraphQL query is replaced with a broader
`fetchGovernanceProfiles` that fetches bio, twitterUsername, and
socialAccounts in the same request. Social icons use the existing
UnoCSS icon sets (simple-icons + lucide). Data gracefully degrades
when the GitHub token is unavailable.

Closes #1564

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/pages/about.vue            | 85 +++++++++++++++++++++++++++++-----
 server/api/contributors.get.ts | 85 +++++++++++++++++++++++++---------
 2 files changed, 137 insertions(+), 33 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 1ade7d02c1..782d2af930 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Role } from '#server/api/contributors.get'
+import type { Role, SocialAccount } from '#server/api/contributors.get'
 import { SPONSORS } from '~/assets/logos/sponsors'
 import { OSS_PARTNERS } from '~/assets/logos/oss-partners'
 
@@ -37,6 +37,44 @@ const communityContributors = computed(
   () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
 )
 
+const socialIcons: Record<string, string> = {
+  TWITTER: 'i-simple-icons:x',
+  MASTODON: 'i-simple-icons:mastodon',
+  BLUESKY: 'i-simple-icons:bluesky',
+  LINKEDIN: 'i-simple-icons:linkedin',
+  YOUTUBE: 'i-simple-icons:youtube',
+  HOMETOWN: 'i-lucide:globe',
+  DISCORD: 'i-simple-icons:discord',
+}
+
+function getSocialIcon(provider: string): string {
+  return socialIcons[provider] ?? 'i-lucide:link'
+}
+
+function getSocialLinks(person: { twitterUsername: string | null; socialAccounts: SocialAccount[] }): { provider: string; url: string; icon: string }[] {
+  const links: { provider: string; url: string; icon: string }[] = []
+
+  if (person.twitterUsername) {
+    links.push({
+      provider: 'TWITTER',
+      url: `https://x.com/${person.twitterUsername}`,
+      icon: socialIcons.TWITTER!,
+    })
+  }
+
+  for (const account of person.socialAccounts) {
+    // Skip twitter if already added via twitterUsername
+    if (account.provider === 'TWITTER') continue
+    links.push({
+      provider: account.provider,
+      url: account.url,
+      icon: getSocialIcon(account.provider),
+    })
+  }
+
+  return links
+}
+
 const roleLabels = computed(
   () =>
     ({
@@ -209,17 +247,42 @@ const roleLabels = computed(
                   <div class="text-xs text-fg-muted tracking-tight">
                     {{ roleLabels[person.role] ?? person.role }}
                   </div>
-                  <LinkBase
-                    v-if="person.sponsors_url"
-                    :to="person.sponsors_url"
-                    no-underline
-                    no-external-icon
-                    classicon="i-lucide:heart"
-                    class="relative z-10 text-xs text-fg-muted hover:text-pink-400 mt-0.5"
-                    :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
+                  <div
+                    v-if="person.bio"
+                    class="text-xs text-fg-subtle truncate mt-0.5"
+                    :title="person.bio"
                   >
-                    {{ $t('about.team.sponsor') }}
-                  </LinkBase>
+                    {{ person.bio }}
+                  </div>
+                  <div class="flex items-center gap-1.5 mt-1">
+                    <LinkBase
+                      v-if="person.sponsors_url"
+                      :to="person.sponsors_url"
+                      no-underline
+                      no-external-icon
+                      classicon="i-lucide:heart"
+                      class="relative z-10 text-xs text-fg-muted hover:text-pink-400"
+                      :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
+                    >
+                      {{ $t('about.team.sponsor') }}
+                    </LinkBase>
+                    <div
+                      v-if="getSocialLinks(person).length"
+                      class="relative z-10 flex items-center gap-1"
+                    >
+                      <a
+                        v-for="link in getSocialLinks(person)"
+                        :key="link.provider"
+                        :href="link.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-fg-muted hover:text-fg transition-colors"
+                        :aria-label="`${person.login} on ${link.provider.toLowerCase()}`"
+                      >
+                        <span :class="[link.icon, 'w-3 h-3']" aria-hidden="true" />
+                      </a>
+                    </div>
+                  </div>
                 </div>
                 <span
                   class="i-lucide:external-link rtl-flip w-3.5 h-3.5 text-fg-muted opacity-50 shrink-0 self-start mt-0.5 pointer-events-none"
diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index eb9ffc1884..543b42b5cd 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -1,5 +1,10 @@
 export type Role = 'steward' | 'maintainer' | 'contributor'
 
+export interface SocialAccount {
+  provider: string
+  url: string
+}
+
 export interface GitHubContributor {
   login: string
   id: number
@@ -8,9 +13,12 @@ export interface GitHubContributor {
   contributions: number
   role: Role
   sponsors_url: string | null
+  bio: string | null
+  twitterUsername: string | null
+  socialAccounts: SocialAccount[]
 }
 
-type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url'>
+type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url' | 'bio' | 'twitterUsername' | 'socialAccounts'>
 
 // Fallback when no GitHub token is available (e.g. preview environments).
 // Only stewards are shown as maintainers; everyone else is a contributor.
@@ -60,16 +68,31 @@ async function fetchTeamMembers(token: string): Promise<TeamMembers | null> {
   }
 }
 
+interface GovernanceProfile {
+  hasSponsorsListing: boolean
+  bio: string | null
+  twitterUsername: string | null
+  socialAccounts: SocialAccount[]
+}
+
 /**
- * Batch-query GitHub GraphQL API to check which users have sponsors enabled.
- * Returns a Set of logins that have a sponsors listing.
+ * Batch-query GitHub GraphQL API to fetch profile data for governance members.
+ * Returns bio, social accounts, and sponsors listing status.
  */
-async function fetchSponsorable(token: string, logins: string[]): Promise<Set<string>> {
-  if (logins.length === 0) return new Set()
+async function fetchGovernanceProfiles(
+  token: string,
+  logins: string[],
+): Promise<Map<string, GovernanceProfile>> {
+  if (logins.length === 0) return new Map()
 
-  // Build aliased GraphQL query: user0: user(login: "x") { hasSponsorsListing login }
   const fragments = logins.map(
-    (login, i) => `user${i}: user(login: "${login}") { hasSponsorsListing login }`,
+    (login, i) => `user${i}: user(login: "${login}") {
+      login
+      hasSponsorsListing
+      bio
+      twitterUsername
+      socialAccounts(first: 10) { nodes { provider url } }
+    }`,
   )
   const query = `{ ${fragments.join('\n')} }`
 
@@ -85,26 +108,40 @@ async function fetchSponsorable(token: string, logins: string[]): Promise<Set<st
     })
 
     if (!response.ok) {
-      console.warn(`Failed to fetch sponsors info: ${response.status}`)
-      return new Set()
+      console.warn(`Failed to fetch governance profiles: ${response.status}`)
+      return new Map()
     }
 
     const json = (await response.json()) as {
-      data?: Record<string, { login: string; hasSponsorsListing: boolean } | null>
+      data?: Record<string, {
+        login: string
+        hasSponsorsListing: boolean
+        bio: string | null
+        twitterUsername: string | null
+        socialAccounts: { nodes: { provider: string; url: string }[] }
+      } | null>
     }
 
-    const sponsorable = new Set<string>()
+    const profiles = new Map<string, GovernanceProfile>()
     if (json.data) {
       for (const user of Object.values(json.data)) {
-        if (user?.hasSponsorsListing) {
-          sponsorable.add(user.login)
+        if (user) {
+          profiles.set(user.login, {
+            hasSponsorsListing: user.hasSponsorsListing,
+            bio: user.bio,
+            twitterUsername: user.twitterUsername,
+            socialAccounts: user.socialAccounts.nodes.map(n => ({
+              provider: n.provider,
+              url: n.url,
+            })),
+          })
         }
       }
     }
-    return sponsorable
+    return profiles
   } catch (error) {
-    console.warn('Failed to fetch sponsors info:', error)
-    return new Set()
+    console.warn('Failed to fetch governance profiles:', error)
+    return new Map()
   }
 }
 
@@ -172,18 +209,22 @@ export default defineCachedEventHandler(
       .filter(c => teams.steward.has(c.login) || teams.maintainer.has(c.login))
       .map(c => c.login)
 
-    const sponsorable = githubToken
-      ? await fetchSponsorable(githubToken, maintainerLogins)
-      : new Set<string>()
+    const governanceProfiles = githubToken
+      ? await fetchGovernanceProfiles(githubToken, maintainerLogins)
+      : new Map<string, GovernanceProfile>()
 
     return filtered
       .map(c => {
         const { role, order } = getRoleInfo(c.login, teams)
-        const sponsors_url = sponsorable.has(c.login)
+        const profile = governanceProfiles.get(c.login)
+        const sponsors_url = profile?.hasSponsorsListing
           ? `https://github.com/sponsors/${c.login}`
           : null
-        Object.assign(c, { role, order, sponsors_url })
-        return c as GitHubContributor & { order: number; sponsors_url: string | null; role: Role }
+        const bio = profile?.bio ?? null
+        const twitterUsername = profile?.twitterUsername ?? null
+        const socialAccounts = profile?.socialAccounts ?? []
+        Object.assign(c, { role, order, sponsors_url, bio, twitterUsername, socialAccounts })
+        return c as GitHubContributor & { order: number }
       })
       .sort((a, b) => a.order - b.order || b.contributions - a.contributions)
       .map(({ order: _, ...rest }) => rest)

From d79af98b05dc7285f979ea147c3b20bdb59235cf Mon Sep 17 00:00:00 2001
From: OM MISHRA <152969928+howwohmm@users.noreply.github.com>
Date: Thu, 26 Mar 2026 10:45:16 +0530
Subject: [PATCH 2/3] feat(ui): add description and identity claims to
 governance cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Merge twitterUsername into socialAccounts array (per ghostdevv feedback)
- Simplify getSocialLinks — single unified array, no special-casing

Closes #1564
---
 app/pages/about.vue            | 28 ++++++----------------------
 server/api/contributors.get.ts | 24 ++++++++++++++----------
 2 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 782d2af930..ec84ed043b 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -51,28 +51,12 @@ function getSocialIcon(provider: string): string {
   return socialIcons[provider] ?? 'i-lucide:link'
 }
 
-function getSocialLinks(person: { twitterUsername: string | null; socialAccounts: SocialAccount[] }): { provider: string; url: string; icon: string }[] {
-  const links: { provider: string; url: string; icon: string }[] = []
-
-  if (person.twitterUsername) {
-    links.push({
-      provider: 'TWITTER',
-      url: `https://x.com/${person.twitterUsername}`,
-      icon: socialIcons.TWITTER!,
-    })
-  }
-
-  for (const account of person.socialAccounts) {
-    // Skip twitter if already added via twitterUsername
-    if (account.provider === 'TWITTER') continue
-    links.push({
-      provider: account.provider,
-      url: account.url,
-      icon: getSocialIcon(account.provider),
-    })
-  }
-
-  return links
+function getSocialLinks(person: { socialAccounts: SocialAccount[] }): { provider: string; url: string; icon: string }[] {
+  return person.socialAccounts.map(account => ({
+    provider: account.provider,
+    url: account.url,
+    icon: getSocialIcon(account.provider),
+  }))
 }
 
 const roleLabels = computed(
diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 543b42b5cd..631c368ffe 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -14,11 +14,10 @@ export interface GitHubContributor {
   role: Role
   sponsors_url: string | null
   bio: string | null
-  twitterUsername: string | null
   socialAccounts: SocialAccount[]
 }
 
-type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url' | 'bio' | 'twitterUsername' | 'socialAccounts'>
+type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url' | 'bio' | 'socialAccounts'>
 
 // Fallback when no GitHub token is available (e.g. preview environments).
 // Only stewards are shown as maintainers; everyone else is a contributor.
@@ -71,7 +70,6 @@ async function fetchTeamMembers(token: string): Promise<TeamMembers | null> {
 interface GovernanceProfile {
   hasSponsorsListing: boolean
   bio: string | null
-  twitterUsername: string | null
   socialAccounts: SocialAccount[]
 }
 
@@ -94,6 +92,7 @@ async function fetchGovernanceProfiles(
       socialAccounts(first: 10) { nodes { provider url } }
     }`,
   )
+  // twitterUsername is fetched to normalise it into socialAccounts below
   const query = `{ ${fragments.join('\n')} }`
 
   try {
@@ -126,14 +125,20 @@ async function fetchGovernanceProfiles(
     if (json.data) {
       for (const user of Object.values(json.data)) {
         if (user) {
+          const socialAccounts: SocialAccount[] = user.socialAccounts.nodes.map(n => ({
+            provider: n.provider,
+            url: n.url,
+          }))
+          // Normalise twitterUsername into socialAccounts so callers have a
+          // single unified array. GitHub returns it separately because it
+          // predates the socialAccounts field.
+          if (user.twitterUsername && !socialAccounts.some(a => a.provider === 'TWITTER')) {
+            socialAccounts.unshift({ provider: 'TWITTER', url: `https://x.com/${user.twitterUsername}` })
+          }
           profiles.set(user.login, {
             hasSponsorsListing: user.hasSponsorsListing,
             bio: user.bio,
-            twitterUsername: user.twitterUsername,
-            socialAccounts: user.socialAccounts.nodes.map(n => ({
-              provider: n.provider,
-              url: n.url,
-            })),
+            socialAccounts,
           })
         }
       }
@@ -221,9 +226,8 @@ export default defineCachedEventHandler(
           ? `https://github.com/sponsors/${c.login}`
           : null
         const bio = profile?.bio ?? null
-        const twitterUsername = profile?.twitterUsername ?? null
         const socialAccounts = profile?.socialAccounts ?? []
-        Object.assign(c, { role, order, sponsors_url, bio, twitterUsername, socialAccounts })
+        Object.assign(c, { role, order, sponsors_url, bio, socialAccounts })
         return c as GitHubContributor & { order: number }
       })
       .sort((a, b) => a.order - b.order || b.contributions - a.contributions)

From d57f87e80b22c8f439304903300a1f8094d576ce Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 26 Mar 2026 05:16:28 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes

---
 app/pages/about.vue            |  4 +++-
 server/api/contributors.get.ts | 27 ++++++++++++++++++---------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index ec84ed043b..11b43ccf7a 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -51,7 +51,9 @@ function getSocialIcon(provider: string): string {
   return socialIcons[provider] ?? 'i-lucide:link'
 }
 
-function getSocialLinks(person: { socialAccounts: SocialAccount[] }): { provider: string; url: string; icon: string }[] {
+function getSocialLinks(person: {
+  socialAccounts: SocialAccount[]
+}): { provider: string; url: string; icon: string }[] {
   return person.socialAccounts.map(account => ({
     provider: account.provider,
     url: account.url,
diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 631c368ffe..7c8c15517d 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -17,7 +17,10 @@ export interface GitHubContributor {
   socialAccounts: SocialAccount[]
 }
 
-type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url' | 'bio' | 'socialAccounts'>
+type GitHubAPIContributor = Omit<
+  GitHubContributor,
+  'role' | 'sponsors_url' | 'bio' | 'socialAccounts'
+>
 
 // Fallback when no GitHub token is available (e.g. preview environments).
 // Only stewards are shown as maintainers; everyone else is a contributor.
@@ -112,13 +115,16 @@ async function fetchGovernanceProfiles(
     }
 
     const json = (await response.json()) as {
-      data?: Record<string, {
-        login: string
-        hasSponsorsListing: boolean
-        bio: string | null
-        twitterUsername: string | null
-        socialAccounts: { nodes: { provider: string; url: string }[] }
-      } | null>
+      data?: Record<
+        string,
+        {
+          login: string
+          hasSponsorsListing: boolean
+          bio: string | null
+          twitterUsername: string | null
+          socialAccounts: { nodes: { provider: string; url: string }[] }
+        } | null
+      >
     }
 
     const profiles = new Map<string, GovernanceProfile>()
@@ -133,7 +139,10 @@ async function fetchGovernanceProfiles(
           // single unified array. GitHub returns it separately because it
           // predates the socialAccounts field.
           if (user.twitterUsername && !socialAccounts.some(a => a.provider === 'TWITTER')) {
-            socialAccounts.unshift({ provider: 'TWITTER', url: `https://x.com/${user.twitterUsername}` })
+            socialAccounts.unshift({
+              provider: 'TWITTER',
+              url: `https://x.com/${user.twitterUsername}`,
+            })
           }
           profiles.set(user.login, {
             hasSponsorsListing: user.hasSponsorsListing,