feat: sort contributors list by role (#1369)

Co-authored-by: Daniel Roe <[e-mail]>

app/pages/about.vue

···
 <script setup lang="ts">
+import type { Role } from '#server/api/contributors.get'
+
 const router = useRouter()
 const canGoBack = useCanGoBack()
 
···
 }
 
 const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors')
+
+const governanceMembers = computed(
+  () => contributors.value?.filter(c => c.role !== 'contributor') ?? [],
+)
+
+const communityContributors = computed(
+  () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
+)
+
+const roleLabels = computed(
+  () =>
+    ({
+      steward: $t('about.team.role_steward'),
+      maintainer: $t('about.team.role_maintainer'),
+    }) as Partial<Record<Role, string>>,
+)
 </script>
 
 <template>
···
 
         <div>
           <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
-            {{
-              $t(
-                'about.contributors.title',
-                { count: $n(contributors?.length ?? 0) },
-                contributors?.length ?? 0,
-              )
-            }}
+            {{ $t('about.team.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-6">
             {{ $t('about.contributors.description') }}
           </p>
 
-          <!-- Contributors cloud -->
-          <div v-if="contributorsStatus === 'pending'" class="text-fg-subtle text-sm">
-            {{ $t('about.contributors.loading') }}
-          </div>
-          <div v-else-if="contributorsStatus === 'error'" class="text-fg-subtle text-sm">
-            {{ $t('about.contributors.error') }}
-          </div>
-          <div
-            v-else-if="contributors?.length"
-            class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2"
+          <!-- Governance: stewards + maintainers -->
+          <section
+            v-if="governanceMembers.length"
+            class="mb-12"
+            aria-labelledby="governance-heading"
           >
-            <a
-              v-for="contributor in contributors"
-              :key="contributor.id"
-              :href="contributor.html_url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="group relative"
-              :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
+            <h3
+              id="governance-heading"
+              class="text-sm text-fg-subtle uppercase tracking-wider mb-4"
             >
-              <div class="relative flex items-center">
+              {{ $t('about.team.governance') }}
+            </h3>
+
+            <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 list-none p-0">
+              <li
+                v-for="person in governanceMembers"
+                :key="person.id"
+                class="relative flex items-center gap-3 p-3 border border-border rounded-lg hover:border-border-hover hover:bg-bg-muted transition-[border-color,background-color] duration-200 cursor-pointer focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+              >
                 <img
-                  :src="`${contributor.avatar_url}&s=64`"
-                  :alt="contributor.login"
-                  width="32"
-                  height="32"
-                  class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out hover:scale-125 will-change-transform"
+                  :src="`${person.avatar_url}&s=80`"
+                  :alt="`${person.login}'s avatar`"
+                  class="w-12 h-12 rounded-md ring-1 ring-border shrink-0"
                   loading="lazy"
                 />
+                <div class="min-w-0 flex-1">
+                  <div class="font-mono text-sm text-fg truncate">
+                    <NuxtLink
+                      :to="person.html_url"
+                      target="_blank"
+                      class="decoration-none after:content-[''] after:absolute after:inset-0"
+                      :aria-label="$t('about.contributors.view_profile', { name: person.login })"
+                    >
+                      @{{ person.login }}
+                    </NuxtLink>
+                  </div>
+                  <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-carbon:favorite"
+                    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 })"
+                  >
+                    {{ $t('about.team.sponsor') }}
+                  </LinkBase>
+                </div>
                 <span
-                  class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
-                  dir="ltr"
+                  class="i-carbon:launch rtl-flip w-3.5 h-3.5 text-fg-muted opacity-50 shrink-0 self-start mt-0.5"
+                  aria-hidden="true"
+                />
+              </li>
+            </ul>
+          </section>
+
+          <!-- Contributors cloud -->
+          <section aria-labelledby="contributors-heading">
+            <h3
+              id="contributors-heading"
+              class="text-sm text-fg-subtle uppercase tracking-wider mb-4"
+            >
+              {{
+                $t(
+                  'about.contributors.title',
+                  { count: $n(communityContributors.length) },
+                  communityContributors.length,
+                )
+              }}
+            </h3>
+
+            <div
+              v-if="contributorsStatus === 'pending'"
+              class="text-fg-subtle text-sm"
+              role="status"
+            >
+              {{ $t('about.contributors.loading') }}
+            </div>
+            <div
+              v-else-if="contributorsStatus === 'error'"
+              class="text-fg-subtle text-sm"
+              role="alert"
+            >
+              {{ $t('about.contributors.error') }}
+            </div>
+            <ul
+              v-else-if="communityContributors.length"
+              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0"
+            >
+              <li
+                v-for="contributor in communityContributors"
+                :key="contributor.id"
+                class="group relative"
+              >
+                <LinkBase
+                  :to="contributor.html_url"
+                  no-underline
+                  no-external-icon
+                  :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
                 >
-                  @{{ contributor.login }}
-                </span>
-              </div>
-            </a>
-          </div>
+                  <img
+                    :src="`${contributor.avatar_url}&s=64`"
+                    :alt="`${contributor.login}'s avatar`"
+                    width="48"
+                    height="48"
+                    class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out hover:scale-125 will-change-transform"
+                    loading="lazy"
+                  />
+                  <span
+                    class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
+                    dir="ltr"
+                    role="tooltip"
+                  >
+                    @{{ contributor.login }}
+                  </span>
+                </LinkBase>
+              </li>
+            </ul>
+          </section>
         </div>
 
         <CallToAction />

i18n/locales/en.json

···
         "managers": "package managers"
       }
     },
+    "team": {
+      "title": "Team",
+      "governance": "Governance",
+      "role_steward": "steward",
+      "role_maintainer": "maintainer",
+      "sponsor": "sponsor",
+      "sponsor_aria": "Sponsor {name} on GitHub"
+    },
     "contributors": {
-      "title": "{count} Contributor | {count} Contributors",
+      "title": "... and {count} more contributor | ... and {count} more contributors",
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",

i18n/schema.json

···
           },
           "additionalProperties": false
         },
+        "team": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "governance": {
+              "type": "string"
+            },
+            "role_steward": {
+              "type": "string"
+            },
+            "role_maintainer": {
+              "type": "string"
+            },
+            "sponsor": {
+              "type": "string"
+            },
+            "sponsor_aria": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "contributors": {
           "type": "object",
           "properties": {

lunaria/files/en-GB.json

···
         "managers": "package managers"
       }
     },
+    "team": {
+      "title": "Team",
+      "governance": "Governance",
+      "role_steward": "steward",
+      "role_maintainer": "maintainer",
+      "sponsor": "sponsor",
+      "sponsor_aria": "Sponsor {name} on GitHub"
+    },
     "contributors": {
-      "title": "{count} Contributor | {count} Contributors",
+      "title": "... and {count} more contributor | ... and {count} more contributors",
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",

lunaria/files/en-US.json

···
         "managers": "package managers"
       }
     },
+    "team": {
+      "title": "Team",
+      "governance": "Governance",
+      "role_steward": "steward",
+      "role_maintainer": "maintainer",
+      "sponsor": "sponsor",
+      "sponsor_aria": "Sponsor {name} on GitHub"
+    },
     "contributors": {
-      "title": "{count} Contributor | {count} Contributors",
+      "title": "... and {count} more contributor | ... and {count} more contributors",
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",

nuxt.config.ts

···
 
   runtimeConfig: {
     sessionPassword: '',
+    github: {
+      orgToken: '',
+    },
     // Upstash Redis for distributed OAuth token refresh locking in production
     upstash: {
       redisRestUrl: process.env.UPSTASH_KV_REST_API_URL || process.env.KV_REST_API_URL || '',

server/api/contributors.get.ts

···
+export type Role = 'steward' | 'maintainer' | 'contributor'
+
 export interface GitHubContributor {
   login: string
   id: number
   avatar_url: string
   html_url: string
   contributions: number
+  role: Role
+  sponsors_url: string | null
+}
+
+type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url'>
+
+// Fallback when no GitHub token is available (e.g. preview environments).
+// Only stewards are shown as maintainers; everyone else is a contributor.
+const FALLBACK_STEWARDS = new Set(['danielroe', 'patak-dev'])
+
+interface TeamMembers {
+  steward: Set<string>
+  maintainer: Set<string>
+}
+
+async function fetchTeamMembers(token: string): Promise<TeamMembers | null> {
+  const teams: Record<keyof TeamMembers, string> = {
+    steward: 'stewards',
+    maintainer: 'maintainers',
+  }
+
+  try {
+    const result: TeamMembers = { steward: new Set(), maintainer: new Set() }
+
+    for (const [role, slug] of Object.entries(teams) as [keyof TeamMembers, string][]) {
+      const response = await fetch(
+        `https://api.github.com/orgs/npmx-dev/teams/${slug}/members?per_page=100`,
+        {
+          headers: {
+            'Accept': 'application/vnd.github.v3+json',
+            'Authorization': `Bearer ${token}`,
+            'User-Agent': 'npmx',
+          },
+        },
+      )
+
+      if (!response.ok) {
+        console.warn(`Failed to fetch ${slug} team members: ${response.status}`)
+        return null
+      }
+
+      const members = (await response.json()) as { login: string }[]
+      for (const member of members) {
+        result[role].add(member.login)
+      }
+    }
+
+    return result
+  } catch (error) {
+    console.warn('Failed to fetch team members from GitHub:', error)
+    return null
+  }
+}
+
+/**
+ * Batch-query GitHub GraphQL API to check which users have sponsors enabled.
+ * Returns a Set of logins that have a sponsors listing.
+ */
+async function fetchSponsorable(token: string, logins: string[]): Promise<Set<string>> {
+  if (logins.length === 0) return new Set()
+
+  // Build aliased GraphQL query: user0: user(login: "x") { hasSponsorsListing login }
+  const fragments = logins.map(
+    (login, i) => `user${i}: user(login: "${login}") { hasSponsorsListing login }`,
+  )
+  const query = `{ ${fragments.join('\n')} }`
+
+  try {
+    const response = await fetch('https://api.github.com/graphql', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        'User-Agent': 'npmx',
+      },
+      body: JSON.stringify({ query }),
+    })
+
+    if (!response.ok) {
+      console.warn(`Failed to fetch sponsors info: ${response.status}`)
+      return new Set()
+    }
+
+    const json = (await response.json()) as {
+      data?: Record<string, { login: string; hasSponsorsListing: boolean } | null>
+    }
+
+    const sponsorable = new Set<string>()
+    if (json.data) {
+      for (const user of Object.values(json.data)) {
+        if (user?.hasSponsorsListing) {
+          sponsorable.add(user.login)
+        }
+      }
+    }
+    return sponsorable
+  } catch (error) {
+    console.warn('Failed to fetch sponsors info:', error)
+    return new Set()
+  }
+}
+
+function getRoleInfo(login: string, teams: TeamMembers): { role: Role; order: number } {
+  if (teams.steward.has(login)) return { role: 'steward', order: 0 }
+  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 1 }
+  return { role: 'contributor', order: 2 }
 }
 
 export default defineCachedEventHandler(
   async (): Promise<GitHubContributor[]> => {
-    const allContributors: GitHubContributor[] = []
+    const githubToken = useRuntimeConfig().github.orgToken
+
+    // Fetch team members dynamically if token is available, otherwise use fallback
+    const teams: TeamMembers = await (async () => {
+      if (githubToken) {
+        const fetched = await fetchTeamMembers(githubToken)
+        if (fetched) return fetched
+      }
+      return { steward: FALLBACK_STEWARDS, maintainer: new Set<string>() }
+    })()
+
+    const allContributors: GitHubAPIContributor[] = []
     let page = 1
     const perPage = 100
 
···
           headers: {
             'Accept': 'application/vnd.github.v3+json',
             'User-Agent': 'npmx',
+            ...(githubToken && { Authorization: `Bearer ${githubToken}` }),
           },
         },
       )
···
         })
       }
 
-      const contributors = (await response.json()) as GitHubContributor[]
+      const contributors = (await response.json()) as GitHubAPIContributor[]
 
       if (contributors.length === 0) {
         break
···
 
       allContributors.push(...contributors)
 
-      // If we got fewer than perPage results, we've reached the end
       if (contributors.length < perPage) {
         break
       }
···
       page++
     }
 
-    // Filter out bots
-    return allContributors.filter(c => !c.login.includes('[bot]'))
+    const filtered = allContributors.filter(c => !c.login.includes('[bot]'))
+
+    // Identify maintainers (stewards + maintainers) and check their sponsors status
+    const maintainerLogins = filtered
+      .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>()
+
+    return filtered
+      .map(c => {
+        const { role, order } = getRoleInfo(c.login, teams)
+        const sponsors_url = sponsorable.has(c.login)
+          ? `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 }
+      })
+      .sort((a, b) => a.order - b.order || b.contributions - a.contributions)
+      .map(({ order: _, ...rest }) => rest)
   },
   {
     maxAge: 3600, // Cache for 1 hour