// Per-profile OG image. Mirrors the per-pet/per-collection OGs: // petdex-cloud gradient + brand purple, mono caption. Renders the // creator's avatar (when allowlisted), display name, pet count, and // a sprite collage of up to 4 pinned pets so the unfurl reads as // "this person made these pets" instead of a generic profile card. // // Driven by the user's pinned set (featuredPetSlugs). When the user // has no pinned pets we fall back to the most recent approved pets. import { ImageResponse } from "next/og"; import { clerkClient } from "@clerk/nextjs/server"; import { and, desc, eq, inArray } from "drizzle-orm"; import sharp from "sharp"; import { db, schema } from "@/lib/db/client"; import { userIdForHandle } from "@/lib/handles"; import { isAllowedAssetUrl, isAllowedAvatarUrl } from "@/lib/url-allowlist"; export const runtime = "nodejs"; export const contentType = "image/png"; export const size = { width: 1200, height: 630 }; export const alt = "Petdex profile preview"; // 24h ISR — same reasoning as the per-pet OG. Profile bios change // rarely and the unfurl bots that hit this path are noisy. Cached // PNG saves Fluid CPU + Origin Transfer on every Discord/X share. export const revalidate = 86400; const FRAME_W = 192; const FRAME_H = 208; const SPRITE_DISPLAY = 192; // square plate per sprite export default async function Image({ params, }: { params: Promise<{ locale: string; handle: string }>; }) { const { handle } = await params; const ownerId = await userIdForHandle(handle); if (!ownerId) return petdexFallback(); // Profile + Clerk identity. We fetch in parallel; the Clerk call can // throw on transient API errors but we swallow it and fall back to // the handle since the OG should never error a share. const [profile, clerkUser] = await Promise.all([ db.query.userProfiles.findFirst({ where: eq(schema.userProfiles.userId, ownerId), }), (async () => { try { const c = await clerkClient(); return await c.users.getUser(ownerId); } catch { return null; } })(), ]); const fullName = clerkUser ? [clerkUser.firstName, clerkUser.lastName].filter(Boolean).join(" ").trim() : ""; const displayName = profile?.displayName ?? fullName ?? `@${handle}`; const safeDisplayName = displayName || `@${handle}`; const publicHandle = profile?.handle ?? handle.toLowerCase(); const bio = profile?.bio?.trim() ?? null; const featuredSlugs = (profile?.featuredPetSlugs as string[] | undefined) ?? []; // Fetch sprite URLs. Pinned pets first; fall back to the 4 most // recently approved pets if the user has no pinned set yet. const approvedFilter = and( eq(schema.submittedPets.ownerId, ownerId), eq(schema.submittedPets.status, "approved"), ); const collageRows = featuredSlugs.length > 0 ? await db .select({ slug: schema.submittedPets.slug, spritesheetUrl: schema.submittedPets.spritesheetUrl, }) .from(schema.submittedPets) .where( and( approvedFilter, inArray(schema.submittedPets.slug, featuredSlugs.slice(0, 4)), ), ) : await db .select({ slug: schema.submittedPets.slug, spritesheetUrl: schema.submittedPets.spritesheetUrl, }) .from(schema.submittedPets) .where(approvedFilter) .orderBy(desc(schema.submittedPets.approvedAt)) .limit(4); // Total pet count for the stat line. One round-trip with raw count. const countRows = await db .select({ slug: schema.submittedPets.slug }) .from(schema.submittedPets) .where(approvedFilter); const petCount = countRows.length; // Decode sprites in parallel. Failures fall through to no-sprite // (the slot just renders empty). const spriteUrls = await Promise.all( collageRows .slice(0, 4) .map((r) => loadFirstFrameAsDataUrl(r.spritesheetUrl)), ); const avatarDataUrl = clerkUser?.imageUrl ? await loadAvatarAsDataUrl(clerkUser.imageUrl) : null; const fallbackInitial = ( safeDisplayName[0] ?? handle[0] ?? "?" ).toUpperCase(); return new ImageResponse(
{/* Top brand row */}
Petdex
Petdex creator
{/* Main row */}
{/* Avatar plate */}
{avatarDataUrl ? ( // biome-ignore lint/performance/noImgElement: og runtime needs ) : (
{fallbackInitial}
)}
{/* Identity column */}
@{publicHandle}
{clip(safeDisplayName, 24)}
{bio ? (
{clip(bio, 110)}
) : null}
{petCount} {petCount === 1 ? "pet" : "pets"} · petdex.crafter.run
{/* Sprite collage strip */} {spriteUrls.some(Boolean) ? (
{spriteUrls.map((dataUrl, i) => dataUrl ? (
{/* biome-ignore lint/performance/noImgElement: og runtime */}
) : null, )}
) : (
)}
, { ...size }, ); } async function loadFirstFrameAsDataUrl(url: string): Promise { if (!isAllowedAssetUrl(url)) return null; try { const res = await fetch(url, { redirect: "error" }); if (!res.ok) return null; const buf = Buffer.from(await res.arrayBuffer()); const png = await sharp(buf) .extract({ left: 0, top: 0, width: FRAME_W, height: FRAME_H }) .resize(SPRITE_DISPLAY - 24, SPRITE_DISPLAY - 24, { kernel: "nearest" }) .png() .toBuffer(); return `data:image/png;base64,${png.toString("base64")}`; } catch { return null; } } async function loadAvatarAsDataUrl(url: string): Promise { if (!isAllowedAvatarUrl(url)) return null; try { const res = await fetch(url, { redirect: "error" }); if (!res.ok) return null; const buf = Buffer.from(await res.arrayBuffer()); const png = await sharp(buf) .resize(220, 220, { fit: "cover" }) .png() .toBuffer(); return `data:image/png;base64,${png.toString("base64")}`; } catch { return null; } } function PetdexMark({ size }: { size: number }) { return ( ); } function petdexFallback() { return new ImageResponse(
Petdex
, { ...size }, ); } function clip(s: string, n: number): string { if (s.length <= n) return s; return `${s.slice(0, n - 1).trimEnd()}…`; }