From ceb93aa77de56cf77970b196a251b5944ce67f02 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Mar 2026 11:13:41 +0800
Subject: [PATCH 1/6] feat(ui): show maintainers avatars

---
 app/components/Package/Maintainers.vue |  3 +-
 app/components/User/Avatar.vue         | 60 ++++++++++++++++++++++----
 app/pages/~[username]/index.vue        |  2 +-
 app/pages/~[username]/orgs.vue         |  2 +-
 4 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index ed93688526..63202f6788 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -189,7 +189,8 @@ watch(
             class="link-subtle text-sm shrink-0"
             dir="ltr"
           >
-            ~{{ maintainer.name }}
+            <UserAvatar :username="maintainer.name" size="sm" />
+            <span>{{ maintainer.name }}</span>
           </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{
             maintainer.email
diff --git a/app/components/User/Avatar.vue b/app/components/User/Avatar.vue
index 25cb6092b8..231ebd747d 100644
--- a/app/components/User/Avatar.vue
+++ b/app/components/User/Avatar.vue
@@ -1,10 +1,44 @@
 <script setup lang="ts">
 const props = defineProps<{
   username: string
+  size: 'sm' | 'md' | 'lg'
 }>()
 
+const sizePixels = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 24
+    case 'md':
+      return 40
+    case 'lg':
+      return 64
+  }
+})
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'size-6'
+    case 'md':
+      return 'size-10'
+    case 'lg':
+      return 'size-16'
+  }
+})
+
+const textClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'text-xs'
+    case 'md':
+      return 'text-base'
+    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),
+  transform: res => (res.hash ? `/_avatar/${res.hash}?s=64&d=404` : null),
   getCachedData(key, nuxtApp) {
     return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
   },
@@ -14,7 +48,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 +58,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>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 0fd04b47d1..6510c736e1 100644
--- a/app/pages/~[username]/index.vue
+++ b/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">
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 138bd69139..a5128237e1 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/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>

From d2744e79fec680bd87ffd669a8ac81f0680d0444 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Mar 2026 11:16:29 +0800
Subject: [PATCH 2/6] revert: stick with same size for now

---
 app/components/User/Avatar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/User/Avatar.vue b/app/components/User/Avatar.vue
index 231ebd747d..9b2d385941 100644
--- a/app/components/User/Avatar.vue
+++ b/app/components/User/Avatar.vue
@@ -38,7 +38,7 @@ const textClass = computed(() => {
 })
 
 const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
-  transform: res => (res.hash ? `/_avatar/${res.hash}?s=64&d=404` : null),
+  transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
   getCachedData(key, nuxtApp) {
     return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
   },

From ba54e096470d87953203f3a32baa9cc08bfffe83 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Mar 2026 11:18:34 +0800
Subject: [PATCH 3/6] fix: only implement known sizes

---
 app/components/Package/Maintainers.vue |  2 +-
 app/components/User/Avatar.vue         | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 63202f6788..833da65e34 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -189,7 +189,7 @@ watch(
             class="link-subtle text-sm shrink-0"
             dir="ltr"
           >
-            <UserAvatar :username="maintainer.name" size="sm" />
+            <UserAvatar :username="maintainer.name" size="xs" />
             <span>{{ maintainer.name }}</span>
           </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{
diff --git a/app/components/User/Avatar.vue b/app/components/User/Avatar.vue
index 9b2d385941..e78d320541 100644
--- a/app/components/User/Avatar.vue
+++ b/app/components/User/Avatar.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 const props = defineProps<{
   username: string
-  size: 'sm' | 'md' | 'lg'
+  size: 'xs' | 'lg'
 }>()
 
 const sizePixels = computed(() => {
   switch (props.size) {
-    case 'sm':
+    case 'xs':
       return 24
-    case 'md':
-      return 40
     case 'lg':
       return 64
   }
@@ -17,10 +15,8 @@ const sizePixels = computed(() => {
 
 const sizeClass = computed(() => {
   switch (props.size) {
-    case 'sm':
+    case 'xs':
       return 'size-6'
-    case 'md':
-      return 'size-10'
     case 'lg':
       return 'size-16'
   }
@@ -28,10 +24,8 @@ const sizeClass = computed(() => {
 
 const textClass = computed(() => {
   switch (props.size) {
-    case 'sm':
+    case 'xs':
       return 'text-xs'
-    case 'md':
-      return 'text-base'
     case 'lg':
       return 'text-2xl'
   }

From 4260601025391f1fc76a94ec79125e45ae895fe7 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Mar 2026 11:33:27 +0800
Subject: [PATCH 4/6] chore: fix test

---
 test/nuxt/a11y.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 28cdabb10d..800a30dd70 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -2854,7 +2854,7 @@ 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([])
@@ -2862,7 +2862,7 @@ describe('component accessibility audits', () => {
 
     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([])
@@ -2870,7 +2870,7 @@ describe('component accessibility audits', () => {
 
     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([])

From 6c29051afd8bdeb3754c3806a2a9f2dbb74a0513 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Mar 2026 11:39:23 +0800
Subject: [PATCH 5/6] fix: set aria-hidden=true

---
 app/components/Package/Maintainers.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 833da65e34..c3753a2c44 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -189,7 +189,7 @@ watch(
             class="link-subtle text-sm shrink-0"
             dir="ltr"
           >
-            <UserAvatar :username="maintainer.name" size="xs" />
+            <UserAvatar :username="maintainer.name" size="xs" aria-hidden="true" />
             <span>{{ maintainer.name }}</span>
           </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{

From 1d310bf6ab8382c92118e1adf7785ace64a30d44 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Mar 2026 11:39:57 +0800
Subject: [PATCH 6/6] test: add test for sizes

---
 test/nuxt/a11y.spec.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 800a30dd70..eb9f0b4a98 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -2875,6 +2875,17 @@ describe('component accessibility audits', () => {
       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