Add avatar-bubbles endpoint to bskyogcard (#10327)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: rafaeleyng <rafaeleyng@gmail.com>

bskyogcard/src/routes/avatar-bubbles.tsx

@@ -0,0 +1,70 @@
+import resvg from '@resvg/resvg-js'
+import {type Express} from 'express'
+import satori from 'satori'
+
+import {
+  AVATAR_BUBBLES_SIZE,
+  AvatarBubbles,
+} from '../components/AvatarBubbles.js'
+import {type AppContext} from '../context.js'
+import {httpLogger} from '../logger.js'
+import {
+  getImage,
+  handler,
+  hideAvatarLabels,
+  originVerifyMiddleware,
+} from './util.js'
+
+export default function (ctx: AppContext, app: Express) {
+  return app.get(
+    '/avatar-bubbles',
+    originVerifyMiddleware(ctx),
+    handler(async (req, res) => {
+      const didsParam = req.query.dids
+      if (typeof didsParam !== 'string') {
+        return res.status(400).end('missing dids parameter')
+      }
+      const dids = didsParam.split(',').filter(Boolean)
+      if (dids.length < 1 || dids.length > 4) {
+        return res.status(400).end('dids must contain 1-4 DIDs')
+      }
+
+      let profiles
+      try {
+        const result = await ctx.appviewAgent.api.app.bsky.actor.getProfiles({
+          actors: dids,
+        })
+        profiles = result.data.profiles
+      } catch (err) {
+        httpLogger.warn({err, dids}, 'could not fetch profiles')
+        return res.status(502).end('could not fetch profiles')
+      }
+
+      const images = await Promise.all(
+        dids.map(async did => {
+          const profile = profiles.find(p => p.did === did)
+          if (!profile?.avatar) return null
+          if (profile.labels?.some(l => hideAvatarLabels.has(l.val)))
+            return null
+          try {
+            return await getImage(profile.avatar)
+          } catch (err) {
+            httpLogger.warn({err, did}, 'could not fetch avatar image')
+            return null
+          }
+        }),
+      )
+
+      const svg = await satori(<AvatarBubbles images={images} />, {
+        fonts: ctx.fonts,
+        height: AVATAR_BUBBLES_SIZE,
+        width: AVATAR_BUBBLES_SIZE,
+      })
+      const output = await resvg.renderAsync(svg)
+      res.statusCode = 200
+      res.setHeader('content-type', 'image/png')
+      res.setHeader('cdn-tag', dids.join(','))
+      return res.end(output.asPng())
+    }),
+  )
+}

bskyogcard/src/routes/health.ts

@@ -1,6 +1,6 @@
-import {Express} from 'express'
+import {type Express} from 'express'
 
-import {AppContext} from '../context.js'
+import {type AppContext} from '../context.js'
 import {handler} from './util.js'
 
 export default function (ctx: AppContext, app: Express) {

bskyogcard/src/routes/index.ts

@@ -1,6 +1,7 @@
-import {Express} from 'express'
+import {type Express} from 'express'
 
-import {AppContext} from '../context.js'
+import {type AppContext} from '../context.js'
+import {default as avatarBubbles} from './avatar-bubbles.js'
 import {default as health} from './health.js'
 import {default as starterPack} from './starter-pack.js'
 
@@ -9,5 +10,6 @@ export * from './util.js'
 export default function (ctx: AppContext, app: Express) {
   app = health(ctx, app) // GET /_health
   app = starterPack(ctx, app) // GET /start/:actor/:rkey
+  app = avatarBubbles(ctx, app) // GET /avatar-bubbles?dids=...
   return app
 }

bskyogcard/src/routes/starter-pack.tsx

@@ -1,6 +1,5 @@
 import assert from 'node:assert'
 
-import React from 'react'
 import {type AppBskyGraphDefs, AtUri} from '@atproto/api'
 import resvg from '@resvg/resvg-js'
 import {type Express} from 'express'
@@ -14,7 +13,12 @@ import {
 import {type AppContext} from '../context.js'
 import {httpLogger} from '../logger.js'
 import {loadEmojiAsSvg} from '../util.js'
-import {handler, originVerifyMiddleware} from './util.js'
+import {
+  getImage,
+  handler,
+  hideAvatarLabels,
+  originVerifyMiddleware,
+} from './util.js'
 
 export default function (ctx: AppContext, app: Express) {
   return app.get(
@@ -87,35 +91,3 @@ export default function (ctx: AppContext, app: Express) {
     }),
   )
 }
-
-async function getImage(url: string) {
-  const response = await fetch(ensureJpeg(url))
-  const arrayBuf = await response.arrayBuffer() // must drain body even if it will be discarded
-  if (response.status !== 200) return null
-  return Buffer.from(arrayBuf)
-}
-
-// CDN URLs end with @jpeg, @webp, or no extension (which may default to webp).
-// We want to ensure the image URLs we use are for jpegs, required for compat with satori.
-function ensureJpeg(url: string) {
-  return url.replace(/(@[a-z]{3,5})?$/, '@jpeg')
-}
-
-const hideAvatarLabels = new Set([
-  '!hide',
-  '!warn',
-  'porn',
-  'sexual',
-  'nudity',
-  'sexual-figurative',
-  'graphic-media',
-  'gore',
-  'self-harm',
-  'sensitive',
-  'security',
-  'impersonation',
-  'scam',
-  'spam',
-  'misleading',
-  'inauthentic',
-])

bskyogcard/src/routes/util.ts

@@ -1,6 +1,11 @@
-import {ErrorRequestHandler, Request, RequestHandler, Response} from 'express'
+import {
+  type ErrorRequestHandler,
+  type Request,
+  type RequestHandler,
+  type Response,
+} from 'express'
 
-import {AppContext} from '../context.js'
+import {type AppContext} from '../context.js'
 import {httpLogger} from '../logger.js'
 
 export type Handler = (req: Request, res: Response) => Awaited<void>
@@ -34,3 +39,35 @@ export const errorHandler: ErrorRequestHandler = (err, req, res, next) => {
   }
   return res.status(500).end('server error')
 }
+
+export async function getImage(url: string) {
+  const response = await fetch(ensureJpeg(url))
+  const arrayBuf = await response.arrayBuffer()
+  if (response.status !== 200) return null
+  return Buffer.from(arrayBuf)
+}
+
+// CDN URLs end with @jpeg, @webp, or no extension (which may default to webp).
+// We want to ensure the image URLs we use are for jpegs, required for compat with satori.
+function ensureJpeg(url: string) {
+  return url.replace(/(@[a-z]{3,5})?$/, '@jpeg')
+}
+
+export const hideAvatarLabels = new Set([
+  '!hide',
+  '!warn',
+  'porn',
+  'sexual',
+  'nudity',
+  'sexual-figurative',
+  'graphic-media',
+  'gore',
+  'self-harm',
+  'sensitive',
+  'security',
+  'impersonation',
+  'scam',
+  'spam',
+  'misleading',
+  'inauthentic',
+])