feat(ui): show maintainers avatars (#2055)

Author: bluwy

app/components/Package/Maintainers.vue

@@ -189,7 +189,13 @@ watch(
             class="link-subtle text-sm shrink-0"
             dir="ltr"
           >
-            ~{{ maintainer.name }}
+            <i18n-t keypath="package.maintainers.maintainer_template">
+              <template #avatar>
+                <UserAvatar :username="maintainer.name" size="xs" aria-hidden="true" />
+              </template>
+              <template #char126>~</template>
+              <template #name>{{ maintainer.name }}</template>
+            </i18n-t>
           </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{
             maintainer.email

app/components/User/Avatar.vue

@@ -1,8 +1,36 @@
 <script setup lang="ts">
 const props = defineProps<{
   username: string
+  size: 'xs' | 'lg'
 }>()
 
+const sizePixels = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 24
+    case 'lg':
+      return 64
+  }
+})
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 'size-6'
+    case 'lg':
+      return 'size-16'
+  }
+})
+
+const textClass = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 'text-xs'
+    case 'lg':
+      return 'text-2xl'
+  }
+})
+
 const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
   transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
   getCachedData(key, nuxtApp) {
@@ -14,7 +42,8 @@ const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username
 <template>
   <!-- Avatar -->
   <div
-    class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center overflow-hidden"
+    class="shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center overflow-hidden"
+    :class="sizeClass"
     role="img"
     :aria-label="`Avatar for ${username}`"
   >
@@ -23,13 +52,22 @@ const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username
       v-if="gravatarUrl"
       :src="gravatarUrl"
       alt=""
-      width="64"
-      height="64"
+      :width="sizePixels"
+      :height="sizePixels"
       class="w-full h-full object-cover"
     />
-    <!-- Else fallback to initials -->
-    <span v-else class="text-2xl text-fg-subtle font-mono" aria-hidden="true">
-      {{ username.charAt(0).toUpperCase() }}
-    </span>
+    <!-- Else fallback to initials (use svg to avoid underline styling) -->
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      :width="sizePixels"
+      :height="sizePixels"
+      class="text-fg-subtle"
+      :class="textClass"
+    >
+      <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" fill="currentColor">
+        {{ username.charAt(0).toUpperCase() }}
+      </text>
+    </svg>
   </div>
 </template>

app/pages/~[username]/index.vue

@@ -140,7 +140,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-wrap items-center gap-4">
-        <UserAvatar :username="username" />
+        <UserAvatar :username="username" size="lg" />
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p v-if="results?.total" class="text-fg-muted text-sm mt-1">

app/pages/~[username]/orgs.vue

@@ -126,7 +126,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-wrap items-center gap-4 mb-4">
-        <UserAvatar :username="username" />
+        <UserAvatar :username="username" size="lg" />
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p class="text-fg-muted text-sm mt-1">{{ $t('user.orgs_page.title') }}</p>

i18n/locales/en.json

@@ -447,7 +447,8 @@
       "cancel_add": "Cancel adding owner",
       "add_owner": "+ Add owner",
       "show_more": "(show {count} more)",
-      "show_less": "(show fewer)"
+      "show_less": "(show fewer)",
+      "maintainer_template": "{avatar} {char126}{name}"
     },
     "trends": {
       "granularity": "Granularity",

i18n/schema.json

@@ -1347,6 +1347,9 @@
             },
             "show_less": {
               "type": "string"
+            },
+            "maintainer_template": {
+              "type": "string"
             }
           },
           "additionalProperties": false

test/nuxt/a11y.spec.ts

@@ -2914,27 +2914,38 @@ describe('component accessibility audits', () => {
   describe('UserAvatar', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: 'testuser' },
+        props: { username: 'testuser', size: 'lg' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with short username', async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: 'a' },
+        props: { username: 'a', size: 'lg' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with long username', async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: 'verylongusernameexample' },
+        props: { username: 'verylongusernameexample', size: 'lg' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
+
+    it('should have no accessibility violations in all sizes', async () => {
+      const sizes = ['xs', 'lg'] as const
+      for (const size of sizes) {
+        const component = await mountSuspended(UserAvatar, {
+          props: { username: 'testuser', size },
+        })
+        const results = await runAxe(component)
+        expect(results.violations).toEqual([])
+      }
+    })
   })
 
   // Diff components