feat : buzz feedback

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

@@ -1,4 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
+import { join } from "node:path";
+
 import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
@@ -44,6 +46,14 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
+async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
+  const image = sharp(join(process.cwd(), "public", "icon", fileName));
+  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
+    .png()
+    .toBuffer();
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+
 export async function GET(
   _request: Request,
   context: { params: Promise<{ guideId: string }> },
@@ -52,9 +62,10 @@ export async function GET(
   const guide = await getPublicWeaponExport(guideId);
   if (!guide) return new Response("Guide not found", { status: 404 });
 
-  const [fonts, weaponImages] = await Promise.all([
+  const [fonts, weaponImages, watermark] = await Promise.all([
     anuphanFonts,
     Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
+    localPngDataUrl("Watermark.png", null),
   ]);
   const weaponHeights = guide.weapons.map((row) => Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)));
   const height = Math.max(360, 190 + weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) + Math.max(0, guide.weapons.length - 1) * 14);
@@ -71,8 +82,11 @@ export async function GET(
         background: "#05060a",
         padding: "32px 36px",
         fontFamily: "Anuphan",
+        position: "relative",
       }}
     >
+      <img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
+      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 14 }}>
       <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}>
         <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div>
         <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>Weapons</div>
@@ -128,6 +142,7 @@ export async function GET(
           </div>
         </div>
       ))}
+      </div>
     </div>,
     {
       width: 1000,