davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2const props = defineProps<{
3 username: string
4}>()
5
6const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
7 transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
8 getCachedData(key, nuxtApp) {
9 return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
10 },
11})
12</script>
13
14<template>
15 <!-- Avatar -->
16 <div
17 class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center overflow-hidden"
18 role="img"
19 :aria-label="`Avatar for ${username}`"
20 >
21 <!-- If Gravatar was fetched, display it -->
22 <img
23 v-if="gravatarUrl"
24 :src="gravatarUrl"
25 alt=""
26 width="64"
27 height="64"
28 class="w-full h-full object-cover"
29 />
30 <!-- Else fallback to initials -->
31 <span v-else class="text-2xl text-fg-subtle font-mono" aria-hidden="true">
32 {{ username.charAt(0).toUpperCase() }}
33 </span>
34 </div>
35</template>