320 lines
11 KiB
TypeScript
320 lines
11 KiB
TypeScript
/* 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";
|
|
|
|
import { rarityGradient } from "@/lib/catalog/rarity";
|
|
import { artifactTierCount } from "@/lib/guides/artifacts";
|
|
|
|
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 metric(value: string): string {
|
|
return Number(value) === 0
|
|
? "-%"
|
|
: `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
|
|
}
|
|
|
|
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,
|
|
recommendedWeapon,
|
|
recommendedArtifact,
|
|
}: {
|
|
title: string;
|
|
sub: string;
|
|
characterCard?: boolean;
|
|
backgroundUrl?: string | null;
|
|
characterUrl?: string | null;
|
|
recommendedWeapon?: {
|
|
name: string;
|
|
refinement: number;
|
|
rarity: number | null;
|
|
imageUrl: string;
|
|
overallPercent: string | null;
|
|
personalPercent: string | null;
|
|
} | null;
|
|
recommendedArtifact?: {
|
|
first: {
|
|
name: string;
|
|
rarity: number | null;
|
|
imageUrl: string;
|
|
};
|
|
second: {
|
|
name: string;
|
|
rarity: number | null;
|
|
imageUrl: string;
|
|
} | null;
|
|
percent: string;
|
|
} | null;
|
|
}) {
|
|
const [
|
|
bannerSrc,
|
|
kanit,
|
|
characterFont,
|
|
characterBackgroundSrc,
|
|
characterArtSrc,
|
|
weaponArtSrc,
|
|
firstArtifactArtSrc,
|
|
secondArtifactArtSrc,
|
|
] =
|
|
await Promise.all([
|
|
characterCard ? null : getBannerData(),
|
|
getFontData(),
|
|
characterCard ? getCharacterFontData() : null,
|
|
characterCard && backgroundUrl ? getImageData(backgroundUrl) : null,
|
|
characterCard && characterUrl ? getImageData(characterUrl) : null,
|
|
recommendedWeapon ? getImageData(recommendedWeapon.imageUrl) : null,
|
|
recommendedArtifact ? getImageData(recommendedArtifact.first.imageUrl) : null,
|
|
recommendedArtifact?.second
|
|
? getImageData(recommendedArtifact.second.imageUrl)
|
|
: 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",
|
|
top: characterCard
|
|
? recommendedWeapon || recommendedArtifact
|
|
? "36px"
|
|
: "52px"
|
|
: "160px",
|
|
left: "60px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
right: characterCard ? "560px" : "450px",
|
|
bottom: recommendedWeapon || recommendedArtifact ? "28px" : "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>
|
|
{recommendedWeapon ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: "500px",
|
|
height: "72px",
|
|
marginTop: "14px",
|
|
overflow: "hidden",
|
|
borderRadius: "12px",
|
|
background: "#fff",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flex: recommendedWeapon.overallPercent || recommendedWeapon.personalPercent ? 3 : 1,
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
overflow: "hidden",
|
|
borderBottomRightRadius: "48px",
|
|
background: rarityGradient(recommendedWeapon.rarity),
|
|
color: "#fff",
|
|
padding: "2px 28px 2px 6px",
|
|
}}
|
|
>
|
|
{weaponArtSrc ? (
|
|
<img
|
|
src={weaponArtSrc}
|
|
alt=""
|
|
width={68}
|
|
height={68}
|
|
style={{ width: "68px", height: "68px", objectFit: "contain" }}
|
|
/>
|
|
) : null}
|
|
<div style={{ display: "flex", fontSize: 20 }}>
|
|
{shorten(recommendedWeapon.name, 19)} R{recommendedWeapon.refinement}
|
|
</div>
|
|
</div>
|
|
{recommendedWeapon.overallPercent || recommendedWeapon.personalPercent ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "space-around",
|
|
color: "#17171c",
|
|
padding: "6px",
|
|
}}
|
|
>
|
|
{recommendedWeapon.overallPercent ? (
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
|
|
<div style={{ display: "flex", fontSize: 16 }}>{metric(recommendedWeapon.overallPercent)}</div>
|
|
<div style={{ display: "flex", fontSize: 8 }}>ทั้งทีม</div>
|
|
</div>
|
|
) : null}
|
|
{recommendedWeapon.personalPercent ? (
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
|
|
<div style={{ display: "flex", fontSize: 16 }}>{metric(recommendedWeapon.personalPercent)}</div>
|
|
<div style={{ display: "flex", fontSize: 8 }}>ส่วนตัว</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
{recommendedArtifact ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: "500px",
|
|
height: "72px",
|
|
marginTop: recommendedWeapon ? "10px" : "14px",
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
overflow: "hidden",
|
|
border: "1px solid #ffffff1f",
|
|
borderRadius: "12px",
|
|
background: "#34343d",
|
|
padding: "2px 8px",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", width: recommendedArtifact.second ? "108px" : "68px" }}>
|
|
{firstArtifactArtSrc ? (
|
|
<div style={{ display: "flex", width: "68px", height: "68px", overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.first.rarity) }}>
|
|
<img src={firstArtifactArtSrc} alt="" width={68} height={68} style={{ objectFit: "contain" }} />
|
|
</div>
|
|
) : null}
|
|
{recommendedArtifact.second && secondArtifactArtSrc ? (
|
|
<div style={{ display: "flex", width: "68px", height: "68px", overflow: "hidden", marginLeft: "-28px", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.second.rarity) }}>
|
|
<img src={secondArtifactArtSrc} alt="" width={68} height={68} style={{ objectFit: "contain" }} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div style={{ display: "flex", flex: 1, fontSize: 18 }}>
|
|
{artifactTierCount(recommendedArtifact.second?.name ?? null)} {shorten(recommendedArtifact.first.name, recommendedArtifact.second ? 12 : 21)}
|
|
{recommendedArtifact.second ? ` + ${shorten(recommendedArtifact.second.name, 12)}` : ""}
|
|
</div>
|
|
<div style={{ display: "flex", color: "#f0b72f", fontSize: 22 }}>
|
|
{metric(recommendedArtifact.percent)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</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 }]
|
|
: []),
|
|
],
|
|
},
|
|
);
|
|
}
|