feat(ui): add description and identity claims to governance cards

howwohmm · claude · howwohmm · commit e87055dd1946 · 2026-03-22T19:00:18.000+05:30
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>
diff --git 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
@@ -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)
