feat: update governance list and design

app/components/About/GovernanceList.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Role, GitHubContributor } from '~~/server/api/contributors.get'
+
+const props = defineProps<{
+  members: GitHubContributor[]
+}>()
+
+const roleLabels = computed(
+  () =>
+    ({
+      steward: $t('about.team.role_steward'),
+      core: $t('about.team.role_core'),
+      maintainer: $t('about.team.role_maintainer'),
+    }) as Partial<Record<Role, string>>,
+)
+</script>
+
+<template>
+  <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 props.members"
+      :key="person.id"
+      class="relative p-3 bg-bg-muted border border-border rounded-xl hover:border-border-hover hover:bg-bg-subtle 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"
+    >
+      <div class="flex gap-3">
+        <img
+          :src="`${person.avatar_url}&s=80`"
+          :alt="`${person.login}'s avatar`"
+          class="block w-15 h-15 rounded-md ring-1 ring-bg 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-sm 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="flex! relative z-10 text-xs text-fg-muted hover:text-pink-400 mt-1"
+            :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
+          >
+            {{ $t('about.team.sponsor') }}
+          </LinkBase>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>

app/components/About/LogoList.vue

@@ -35,7 +35,7 @@ const props = defineProps<{
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border transition-colors py-1 px-3"
+        class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border hover:border-border-hover transition-colors py-1 px-3"
         :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
@@ -65,7 +65,7 @@ const props = defineProps<{
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border transition-colors p-1.5"
+              class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border-hover transition-colors p-1.5"
               :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >

app/pages/about.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Role } from '#server/api/contributors.get'
 import { SPONSORS } from '~/assets/logos/sponsors'
 import { OSS_PARTNERS } from '~/assets/logos/oss-partners'
 
@@ -33,19 +32,15 @@ const pmLinks = {
 const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors')
 
 const governanceMembers = computed(
-  () => contributors.value?.filter(c => c.role !== 'contributor') ?? [],
+  () => contributors.value?.filter(c => c.role === 'steward' || c.role === 'core') ?? [],
 )
 
-const communityContributors = computed(
-  () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
+const maintainersMembers = computed(
+  () => contributors.value?.filter(c => c.role === 'maintainer') ?? [],
 )
 
-const roleLabels = computed(
-  () =>
-    ({
-      steward: $t('about.team.role_steward'),
-      maintainer: $t('about.team.role_maintainer'),
-    }) as Partial<Record<Role, string>>,
+const communityContributors = computed(
+  () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
 )
 </script>
 
@@ -179,60 +174,26 @@ const roleLabels = computed(
             {{ $t('about.contributors.description') }}
           </p>
 
-          <!-- Governance: stewards + maintainers -->
+          <!-- Governance: stewards + core -->
+          <section v-if="governanceMembers.length" class="mb-12" aria-labelledby="core-heading">
+            <h3 id="core-heading" class="text-sm text-fg uppercase tracking-wider mb-4">
+              {{ $t('about.team.core') }}
+            </h3>
+
+            <AboutGovernanceList :members="governanceMembers" />
+          </section>
+
+          <!-- maintainers -->
           <section
-            v-if="governanceMembers.length"
+            v-if="maintainersMembers.length"
             class="mb-12"
-            aria-labelledby="governance-heading"
+            aria-labelledby="maintainers-heading"
           >
-            <h3 id="governance-heading" class="text-sm text-fg uppercase tracking-wider mb-4">
-              {{ $t('about.team.governance') }}
+            <h3 id="maintainers-heading" class="text-sm text-fg uppercase tracking-wider mb-4">
+              {{ $t('about.team.maintainers') }}
             </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="`${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-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 })"
-                  >
-                    {{ $t('about.team.sponsor') }}
-                  </LinkBase>
-                </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"
-                  aria-hidden="true"
-                />
-              </li>
-            </ul>
+            <AboutGovernanceList :members="maintainersMembers" />
           </section>
 
           <!-- Contributors cloud -->
@@ -263,12 +224,12 @@ const roleLabels = computed(
             </div>
             <ul
               v-else-if="communityContributors.length"
-              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0"
+              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-1 list-none p-0"
             >
               <li
                 v-for="contributor in communityContributors"
                 :key="contributor.id"
-                class="block group relative"
+                class="block group relative hover:z-1"
               >
                 <TooltipApp :text="`@${contributor.login}`" class="block" position="top">
                   <a
@@ -283,7 +244,7 @@ const roleLabels = computed(
                       :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 group-hover:scale-125 will-change-transform"
+                      class="w-12 h-12 rounded-md ring-1 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out"
                       loading="lazy"
                     />
                   </a>

app/pages/pds.vue

@@ -142,7 +142,7 @@ const totalAccounts = computed(() => pdsUsers.value.length)
             {{ $t('pds.community.empty') }}
           </div>
           <div v-else>
-            <ul class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0">
+            <ul class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-1 list-none p-0">
               <li
                 v-for="user in usersWithAvatars"
                 :key="user.handle"
@@ -162,7 +162,7 @@ const totalAccounts = computed(() => pdsUsers.value.length)
                       @error="handleImageError(user.handle)"
                       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 group-hover:scale-125 will-change-transform"
+                      class="w-12 h-12 rounded-md ring-1 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out"
                       loading="lazy"
                     />
                   </a>

i18n/locales/ar.json

@@ -819,7 +819,6 @@
     "oss_partners": {},
     "team": {
       "title": "الفريق",
-      "governance": "الحوكمة",
       "role_steward": "راعي",
       "role_maintainer": "مشرف",
       "sponsor": "راعي",

i18n/locales/az-AZ.json

@@ -927,7 +927,6 @@
     },
     "team": {
       "title": "Komanda",
-      "governance": "İdarəetmə",
       "role_steward": "idarəçi",
       "role_maintainer": "dəstəkçi",
       "sponsor": "sponsor",

i18n/locales/bg-BG.json

@@ -888,7 +888,6 @@
     },
     "team": {
       "title": "Отбор",
-      "governance": "Управление",
       "role_steward": "управител",
       "role_maintainer": "поддържащ",
       "sponsor": "спонсор",

i18n/locales/cs-CZ.json

@@ -1119,7 +1119,6 @@
     },
     "team": {
       "title": "Tým",
-      "governance": "Správa",
       "role_steward": "Vedoucí",
       "role_maintainer": "Správce",
       "sponsor": "Sponzor",

i18n/locales/de.json

@@ -1118,7 +1118,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Verwaltung",
       "role_steward": "Verwalter",
       "role_maintainer": "Maintainer",
       "sponsor": "Sponsor",

i18n/locales/en.json

@@ -1184,7 +1184,9 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Governance",
+      "core": "Core",
+      "maintainers": "Maintainers",
+      "role_core": "core",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",

i18n/locales/es.json

@@ -1000,7 +1000,6 @@
     },
     "team": {
       "title": "Equipo",
-      "governance": "Gobernanza",
       "role_steward": "Administrador",
       "role_maintainer": "Mantenedor",
       "sponsor": "Patrocinar",

i18n/locales/fr-FR.json

@@ -1169,7 +1169,6 @@
     },
     "team": {
       "title": "Équipe",
-      "governance": "Gouvernance",
       "role_steward": "pilote",
       "role_maintainer": "mainteneur",
       "sponsor": "sponsor",

i18n/locales/hi-IN.json

@@ -982,7 +982,6 @@
     },
     "team": {
       "title": "टीम",
-      "governance": "शासन",
       "role_steward": "संरक्षक",
       "role_maintainer": "अनुरक्षक",
       "sponsor": "प्रायोजक",

i18n/locales/hu-HU.json

@@ -888,7 +888,6 @@
     },
     "team": {
       "title": "Csapat",
-      "governance": "Irányítás",
       "role_steward": "gondnok",
       "role_maintainer": "karbantartó",
       "sponsor": "szponzor",

i18n/locales/id-ID.json

@@ -1000,7 +1000,6 @@
     },
     "team": {
       "title": "Tim",
-      "governance": "Tata Kelola",
       "role_steward": "pengurus",
       "role_maintainer": "pemelihara",
       "sponsor": "sponsor",

i18n/locales/ja-JP.json

@@ -941,7 +941,6 @@
     },
     "team": {
       "title": "チーム",
-      "governance": "ガバナンス",
       "role_steward": "スチュワード",
       "role_maintainer": "メンテナ",
       "sponsor": "スポンサー",

i18n/locales/mr-IN.json

@@ -960,7 +960,6 @@
     },
     "team": {
       "title": "टीम",
-      "governance": "शासन",
       "role_steward": "विश्वस्त",
       "role_maintainer": "देखभालकर्ता",
       "sponsor": "प्रायोजक",

i18n/locales/nb-NO.json

@@ -1179,7 +1179,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Styring",
       "role_steward": "forvalter",
       "role_maintainer": "vedlikeholder",
       "sponsor": "sponsor",

i18n/locales/nl.json

@@ -1125,7 +1125,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Bestuur",
       "role_steward": "Coördinator",
       "role_maintainer": "Onderhouder",
       "sponsor": "sponsor",

i18n/locales/pl-PL.json

@@ -941,7 +941,6 @@
     },
     "team": {
       "title": "Zespół",
-      "governance": "Zarządzanie",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",

i18n/locales/pt-BR.json

@@ -1151,7 +1151,6 @@
     },
     "team": {
       "title": "Equipe",
-      "governance": "Governança",
       "role_steward": "administrador",
       "role_maintainer": "mantenedor",
       "sponsor": "patrocinador",

i18n/locales/pt-PT.json

@@ -1165,7 +1165,6 @@
     },
     "team": {
       "title": "Equipa",
-      "governance": "Governança",
       "role_steward": "curador",
       "role_maintainer": "responsável",
       "sponsor": "patrocinador",

i18n/locales/ru-RU.json

@@ -1183,7 +1183,6 @@
     },
     "team": {
       "title": "Команда",
-      "governance": "Управление",
       "role_steward": "управляющий",
       "role_maintainer": "мейнтейнер",
       "sponsor": "спонсировать",

i18n/locales/sr-Latn-RS.json

@@ -997,7 +997,6 @@
     },
     "team": {
       "title": "Tim",
-      "governance": "Upravljanje",
       "role_steward": "steward",
       "role_maintainer": "održavalac",
       "sponsor": "sponzor",

i18n/locales/tr-TR.json

@@ -930,7 +930,6 @@
     },
     "team": {
       "title": "Ekip",
-      "governance": "Yönetişim",
       "role_steward": "Yönetici",
       "role_maintainer": "Geliştirici",
       "sponsor": "Sponsor",