buzz-sheet/lib/og-image.tsx

/* eslint-disable @next/next/no-img-element */

import { readFile } from "node:fs/promises";
import { join } from "node:path";

import { ImageResponse } from "next/og";
import sharp from "sharp";

export const ogImageSize = { width: 1222, height: 560 } as const;
export const ogImageContentType = "image/png";

let bannerDataPromise: Promise<string> | undefined;
let fontDataPromise: Promise<Buffer> | undefined;
let characterFontDataPromise: Promise<Buffer> | undefined;
const imageDataPromises = new Map<string, Promise<string | null>>();

function shorten(value: string, length: number): string {
  const normalized = value.replace(/\s+/gu, " ").trim();
  return normalized.length > length
    ? `${normalized.slice(0, length - 1).trimEnd()}…`
    : normalized;
}

function getBannerData(): Promise<string> {
  bannerDataPromise ??= readFile(
    join(process.cwd(), "public/web_banner.png"),
    "base64",
  ).then((data) => `data:image/png;base64,${data}`);
  return bannerDataPromise;
}

function getFontData(): Promise<Buffer> {
  fontDataPromise ??= readFile(join(process.cwd(), "public/Kanit-SemiBold.ttf"));
  return fontDataPromise;
}

function getCharacterFontData(): Promise<Buffer> {
  characterFontDataPromise ??= readFile(join(process.cwd(), "public/zh-cn.ttf"));
  return characterFontDataPromise;
}

function getImageData(url: string): Promise<string | null> {
  const cached = imageDataPromises.get(url);
  if (cached) return cached;

  const promise = fetch(url)
    .then(async (response) => {
      if (!response.ok) return null;
      const png = await sharp(Buffer.from(await response.arrayBuffer()))
        .png()
        .toBuffer();
      return `data:image/png;base64,${png.toString("base64")}`;
    })
    .catch(() => null);
  imageDataPromises.set(url, promise);
  return promise;
}

export async function generateOgImage({
  title,
  sub,
  characterCard = false,
  backgroundUrl,
  characterUrl,
}: {
  title: string;
  sub: string;
  characterCard?: boolean;
  backgroundUrl?: string | null;
  characterUrl?: string | null;
}) {
  const [
    bannerSrc,
    kanit,
    characterFont,
    characterBackgroundSrc,
    characterArtSrc,
  ] = await Promise.all([
    characterCard ? null : getBannerData(),
    getFontData(),
    characterCard ? getCharacterFontData() : null,
    characterCard && backgroundUrl ? getImageData(backgroundUrl) : null,
    characterCard && characterUrl ? getImageData(characterUrl) : null,
  ]);
  const backgroundSrc = characterCard ? characterBackgroundSrc : bannerSrc;

  return new ImageResponse(
    <div
      style={{
        display: "flex",
        width: "1222px",
        height: "560px",
        fontFamily: "Kanit",
        color: "#fff",
        textShadow: "0 2px 8px rgba(0, 0, 0, 0.8)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {backgroundSrc ? (
        <img src={backgroundSrc} alt="" width={1222} height={560} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      ) : (
        <div style={{ position: "absolute", inset: 0, background: "#111827" }} />
      )}
      {characterCard && characterArtSrc ? (
        <img
          src={characterArtSrc}
          alt=""
          width={480}
          height={360}
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            width: "58%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center",
          }}
        />
      ) : null}
      {characterCard ? (
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "linear-gradient(90deg, rgba(3, 8, 18, 0.88) 0%, rgba(3, 8, 18, 0.62) 45%, rgba(3, 8, 18, 0.08) 100%)",
          }}
        />
      ) : null}
      <div
        style={{
          position: "absolute",
          left: "60px",
          display: "flex",
          flexDirection: "column",
          right: characterCard ? "560px" : "450px",
          ...(characterCard
            ? { top: 0, bottom: 0, justifyContent: "center" }
            : { top: "160px", bottom: "100px" }),
        }}
      >
        {characterCard ? (
          <div style={{ display: "flex", color: "#d8f4ee", fontSize: 28 }}>
            ไกด์เกนชินไม่ใช่เกมมือถือ
          </div>
        ) : null}
        <div style={{ display: "flex", fontFamily: characterCard ? "Genshin" : "Kanit", fontSize: 64, marginTop: characterCard ? "8px" : 0 }}>
          {shorten(title, 24)}
        </div>
        <div
          style={{
            display: "flex",
            fontSize: 24,
            marginTop: characterCard ? "8px" : "-20px",
            color: "#fff",
          }}
        >
          {shorten(sub, 92)}
        </div>
      </div>
    </div>,
    {
      ...ogImageSize,
      fonts: [
        { name: "Kanit", data: kanit, style: "normal", weight: 600 },
        ...(characterFont
          ? [{ name: "Genshin", data: characterFont, style: "normal" as const, weight: 400 as const }]
          : []),
      ],
    },
  );
}