perf: use proxy for gravatar

Author: danielroe

app/components/User/Avatar.vue

@@ -3,12 +3,8 @@ const props = defineProps<{
   username: string
 }>()
 
-const { data: gravatarUrl } = useLazyFetch('/api/gravatar', {
-  query: {
-    username: computed(() => props.username),
-    size: 128,
-  },
-  transform: res => res.url,
+const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
+  transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
 })
 </script>
 

nuxt.config.ts

@@ -105,6 +105,12 @@ export default defineNuxtConfig({
     '/api/registry/docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/api/registry/file/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/api/registry/files/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
+    '/_avatar/**': {
+      isr: 3600,
+      proxy: {
+        to: 'https://www.gravatar.com/avatar/**',
+      },
+    },
     // static pages
     '/about': { prerender: true },
     '/settings': { prerender: true },

server/api/gravatar.get.ts server/api/gravatar/[username].get.tsserver/api/gravatar.get.ts renamed to server/api/gravatar/[username].get.ts

@@ -13,25 +13,23 @@ function getQueryParam(event: H3Event, key: string): string {
 
 export default defineCachedEventHandler(
   async event => {
-    const rawUsername = getQueryParam(event, 'username')
-    const rawSize = getQueryParam(event, 'size')
+    const rawUsername = getRouterParam(event, 'username')
 
     try {
-      const { username, size } = v.parse(GravatarQuerySchema, {
+      const { username } = v.parse(GravatarQuerySchema, {
         username: rawUsername,
-        size: rawSize ? rawSize : undefined,
       })
 
-      const dataUrl = await getGravatarFromUsername(username, size ?? 80)
+      const hash = await getGravatarFromUsername(username)
 
-      if (!dataUrl) {
+      if (!hash) {
         throw createError({
           statusCode: 404,
           message: ERROR_GRAVATAR_EMAIL_UNAVAILABLE,
         })
       }
 
-      return { url: dataUrl }
+      return { hash }
     } catch (error: unknown) {
       handleApiError(error, {
         statusCode: 502,

server/utils/gravatar.ts

@@ -1,32 +1,13 @@
-import { Buffer } from 'node:buffer'
 import { createHash } from 'node:crypto'
 import { fetchUserEmail } from '#server/utils/npm'
 
-const DEFAULT_GRAVATAR_SIZE = 80
-
-export async function getGravatarFromUsername(
-  username: string,
-  size: number = DEFAULT_GRAVATAR_SIZE,
-): Promise<string | null> {
+export async function getGravatarFromUsername(username: string): Promise<string | null> {
   const handle = username.trim()
   if (!handle) return null
 
   const email = await fetchUserEmail(handle)
   if (!email) return null
 
   const trimmedEmail = email.trim().toLowerCase()
-  const md5Hash = createHash('md5').update(trimmedEmail).digest('hex')
-  const gravatarUrl = `https://www.gravatar.com/avatar/${md5Hash}?s=${size}&d=404`
-
-  try {
-    const response = await fetch(gravatarUrl)
-    if (!response.ok) return null
-
-    const contentType = response.headers.get('content-type') || 'image/png'
-    const arrayBuffer = await response.arrayBuffer()
-    const base64 = Buffer.from(arrayBuffer).toString('base64')
-    return `data:${contentType};base64,${base64}`
-  } catch {
-    return null
-  }
+  return createHash('md5').update(trimmedEmail).digest('hex')
 }

shared/schemas/user.ts

@@ -19,22 +19,6 @@ export const NpmUsernameSchema = v.pipe(
  */
 export const GravatarQuerySchema = v.object({
   username: NpmUsernameSchema,
-  size: v.optional(
-    v.pipe(
-      v.union([v.number(), v.string()]),
-      v.transform(value => {
-        if (typeof value === 'string') {
-          const trimmed = value.trim()
-          return /^\d+$/.test(trimmed) ? Number(trimmed) : Number.NaN
-        }
-        return value
-      }),
-      v.check(value => !Number.isNaN(value), 'Invalid size'),
-      v.number(),
-      v.minValue(16),
-      v.maxValue(512),
-    ),
-  ),
 })
 
 /** @public */