feat(ui): show maintainers avatars

Author: bluwy

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

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>

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>