fix(catalog): use avatar icons and repair exports

app/api/teams/[teamId]/image/route.tsx

@@ -1,18 +1,60 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "next/og";
+import sharp from "sharp";
 
 import { getPublicTeamExport } from "@/lib/guides/queries";
 
-const anuphanFont = fetch(
-  "https://raw.githubusercontent.com/google/fonts/main/ofl/anuphan/Anuphan%5Bwght%5D.ttf",
-)
-  .then((response) => (response.ok ? response.arrayBuffer() : null))
-  .catch(() => null);
+const anuphanFonts = Promise.all(
+  [
+    { subset: "latin", weight: 400 as const },
+    { subset: "thai", weight: 400 as const },
+    { subset: "latin", weight: 700 as const },
+    { subset: "thai", weight: 700 as const },
+  ].map(async ({ subset, weight }) => {
+    const response = await fetch(
+      `https://unpkg.com/@fontsource/[email protected]/files/anuphan-${subset}-${weight}-normal.woff`,
+    );
+    if (!response.ok) throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
+    return {
+      name: "Anuphan",
+      data: await response.arrayBuffer(),
+      weight,
+      style: "normal" as const,
+    };
+  }),
+).catch(() => []);
 
 function amount(value: number): string {
   return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
 }
 
+function contentDisposition(teamName: string): string {
+  const displayName = teamName.trim() || "team";
+  const fallback = displayName
+    .normalize("NFKD")
+    .replace(/[^a-z0-9]+/giu, "-")
+    .replace(/^-|-$/gu, "") || "team";
+  const encoded = encodeURIComponent(`${displayName}.png`).replace(
+    /['()*]/gu,
+    (character) => `%${character.charCodeAt(0).toString(16).toUpperCase()}`,
+  );
+  return `attachment; filename="${fallback}.png"; filename*=UTF-8''${encoded}`;
+}
+
+async function pngDataUrl(url: string): Promise<string | null> {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) return null;
+    const png = await sharp(Buffer.from(await response.arrayBuffer()))
+      .resize(156, 156, { fit: "cover" })
+      .png()
+      .toBuffer();
+    return `data:image/png;base64,${png.toString("base64")}`;
+  } catch {
+    return null;
+  }
+}
+
 export async function GET(
   _request: Request,
   context: RouteContext<"/api/teams/[teamId]/image">,
@@ -27,7 +69,10 @@ export async function GET(
   );
   const seconds = Number(team.rotationSeconds);
   const dps = seconds > 0 ? total / seconds : 0;
-  const font = await anuphanFont;
+  const fonts = await anuphanFonts;
+  const memberImages = await Promise.all(
+    team.members.map((member) => pngDataUrl(member.character.imageUrl)),
+  );
 
   return new ImageResponse(
     <div
@@ -57,18 +102,24 @@ export async function GET(
         Damage Share
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 10 }}>
-        {team.members.map((member) => {
+        {team.members.map((member, index) => {
           const damage = Number(member.damage);
           const percent = total > 0 ? (damage / total) * 100 : 0;
           return (
             <div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14 }}>
-              <img
-                src={member.character.imageUrl}
-                alt=""
-                width="78"
-                height="78"
-                style={{ borderRadius: 16, border: "2px solid #78cbc4", objectFit: "cover" }}
-              />
+              {memberImages[index] ? (
+                <img
+                  src={memberImages[index]}
+                  alt=""
+                  width={78}
+                  height={78}
+                  style={{ borderRadius: 16, border: "2px solid #78cbc4", objectFit: "cover" }}
+                />
+              ) : (
+                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #78cbc4", color: "#82d6ce", fontSize: 30 }}>
+                  {member.character.name.slice(0, 1)}
+                </div>
+              )}
               <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                   <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>{member.character.name}</div>
@@ -112,12 +163,11 @@ export async function GET(
     {
       width: 550,
       height: 776,
-      fonts: font
-        ? [{ name: "Anuphan", data: font, weight: 400, style: "normal" }]
-        : undefined,
+      fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": `attachment; filename="buzz-team-${team.id}.png"`,
+        "Content-Disposition": contentDisposition(team.title),
+        "Content-Type": "image/png",
       },
     },
   );