feat : big update

app/admin/[character]/[page]/page.tsx

@@ -21,5 +21,6 @@ export default async function StructuredEditorPage({ params }: { params: Promise
   if (!guide) notFound();
   const [catalog, content] = await Promise.all([getActiveCatalog(), getPublicGuide(guide.slug)]);
   if (!catalog || !content) notFound();
-  return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8"><header className="flex items-center gap-4"><Button variant="outline" size="icon" render={<Link href={`/admin/${character}`} />} nativeButton={false} aria-label="กลับหน้า Guide"><ArrowLeftIcon /></Button><div><p className="text-sm text-muted-foreground">{guide.name}</p><h1 className="font-heading text-3xl font-semibold">{guide.sections.find((section) => section.slug === page)?.title ?? page}</h1></div></header><GuideSectionNav characterKey={guide.characterKey} current={page as (typeof sections)[number]} /><GuideSectionEditor section={page as (typeof sections)[number]} guide={guide} weapons={catalog.weapons} artifacts={catalog.artifacts} characters={catalog.characters} catalogConstellations={catalog.characters.find((item) => item.key === guide.characterKey)?.constellations ?? []} initial={{ weapons: content.weapons, artifactGroups: content.artifactGroups.map((group) => ({ id: group.id, name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: row.percent })) })), artifactProfile: content.artifactProfile, constellations: content.constellations, teams: content.teams.map((team) => ({ title: team.title, rotationSeconds: team.rotationSeconds, combo: team.combo, members: team.members.map((member) => ({ characterKey: member.characterKey, weaponKey: member.weaponKey, artifactKey: member.artifactKey, constellation: member.constellation, refinement: member.refinement, damage: member.damage })) })), extras: content.extras.map((section) => ({ title: section.title, rows: section.rows.map((row) => ({ mediaId: row.mediaId, heading: row.heading, body: row.body, percent: row.percent, imageUrl: row.imageUrl })) })) }} /></main></div>;
+  const guideCharacter = catalog.characters.find((item) => item.key === guide.characterKey);
+  return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8"><header className="flex items-center gap-4"><Button variant="outline" size="icon" render={<Link href={`/admin/${character}`} />} nativeButton={false} aria-label="กลับหน้า Guide"><ArrowLeftIcon /></Button><div><p className="text-sm text-muted-foreground">{guide.name}</p><h1 className="font-heading text-3xl font-semibold">{guide.sections.find((section) => section.slug === page)?.title ?? page}</h1></div></header><GuideSectionNav characterKey={guide.characterKey} current={page as (typeof sections)[number]} /><GuideSectionEditor section={page as (typeof sections)[number]} guide={guide} weapons={catalog.weapons} artifacts={catalog.artifacts} characters={catalog.characters} catalogConstellations={guideCharacter?.constellations ?? []} catalogTalents={guideCharacter?.talents ?? []} initial={{ weapons: content.weapons, artifactGroups: content.artifactGroups.map((group) => ({ id: group.id, name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: row.percent })) })), artifactProfile: content.artifactProfile, constellations: content.constellations, teams: content.teams.map((team) => ({ title: team.title, rotationSeconds: team.rotationSeconds, combo: team.combo, members: team.members.map((member) => ({ characterKey: member.characterKey, weaponKey: member.weaponKey, artifactKey: member.artifactKey, constellation: member.constellation, refinement: member.refinement, damage: member.damage })) })), extras: content.extras.map((section) => ({ title: section.title, rows: section.rows.map((row) => ({ mediaId: row.mediaId, heading: row.heading, body: row.body, percent: row.percent, imageUrl: row.imageUrl })) })) }} /></main></div>;
 }

app/api/guides/[guideId]/weapons/image/route.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from "next/og";
+import sharp from "sharp";
+
+import { rarityGradient } from "@/lib/catalog/rarity";
+import { imageContentDisposition } from "@/lib/guides/export-image";
+import { getPublicWeaponExport } from "@/lib/guides/queries";
+
+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 metric(value: string | null): string {
+  return value === null
+    ? "—"
+    : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+}
+
+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(120, 120, { fit: "contain" })
+      .png()
+      .toBuffer();
+    return `data:image/png;base64,${png.toString("base64")}`;
+  } catch {
+    return null;
+  }
+}
+
+export async function GET(
+  _request: Request,
+  context: { params: Promise<{ guideId: string }> },
+) {
+  const { guideId } = await context.params;
+  const guide = await getPublicWeaponExport(guideId);
+  if (!guide) return new Response("Guide not found", { status: 404 });
+
+  const [fonts, weaponImages] = await Promise.all([
+    anuphanFonts,
+    Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
+  ]);
+  const height = Math.max(360, 190 + guide.weapons.length * 126 + Math.max(0, guide.weapons.length - 1) * 14);
+
+  return new ImageResponse(
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 14,
+        color: "#f7f7f7",
+        background: "#17171c",
+        padding: "32px 36px",
+        fontFamily: "Anuphan",
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 6 }}>
+        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>{guide.guideName}</div>
+        <div style={{ display: "flex", color: "#d3b568", fontSize: 22 }}>Weapons</div>
+      </div>
+      {guide.weapons.map((row, index) => (
+        <div
+          key={row.id}
+          style={{
+            display: "flex",
+            minHeight: 112,
+            overflow: "hidden",
+            borderRadius: 14,
+            background: "white",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flex: 1,
+              alignItems: "center",
+              gap: 18,
+              background: rarityGradient(row.weapon.rarity),
+              color: "white",
+              padding: "10px 24px",
+            }}
+          >
+            {weaponImages[index] ? (
+              <img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} />
+            ) : (
+              <div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
+            )}
+            <div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
+              {index + 1}. {row.weapon.name} R{row.refinement}
+            </div>
+          </div>
+          <div style={{ display: "flex", width: 350, alignItems: "center", justifyContent: "space-around", gap: 16, color: "#17171c", padding: "12px 20px" }}>
+            <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
+              <div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.overallPercent)}</div>
+              <div style={{ display: "flex", fontSize: 14 }}>ดาเมจทั้งทีม</div>
+            </div>
+            <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
+              <div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.personalPercent)}</div>
+              <div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>,
+    {
+      width: 1000,
+      height,
+      fonts: fonts.length ? fonts : undefined,
+      headers: {
+        "Cache-Control": "no-store",
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} Weapons`, "weapons"),
+        "Content-Type": "image/png",
+      },
+    },
+  );
+}

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

@@ -3,6 +3,7 @@ import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
 import { rarityGradient } from "@/lib/catalog/rarity";
+import { imageContentDisposition } from "@/lib/guides/export-image";
 import { getPublicTeamExport } from "@/lib/guides/queries";
 
 const anuphanFonts = Promise.all(
@@ -29,19 +30,6 @@ 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);
@@ -186,7 +174,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": contentDisposition(team.title),
+        "Content-Disposition": imageContentDisposition(team.title, "team"),
         "Content-Type": "image/png",
       },
     },