62 lines
1.4 KiB
TypeScript
Executable File
62 lines
1.4 KiB
TypeScript
Executable File
/* eslint-disable @next/next/no-img-element */
|
|
/** biome-ignore-all lint/performance/noImgElement: og no @/components/image */
|
|
|
|
import { readFile } from "node:fs/promises";
|
|
import { join } from "node:path";
|
|
import { ImageResponse } from "next/og";
|
|
|
|
// Image generation
|
|
export default async function generate({
|
|
title,
|
|
sub,
|
|
}: {
|
|
title: string;
|
|
sub: string;
|
|
}) {
|
|
const kanit = await readFile(
|
|
join(process.cwd(), "public/Kanit-SemiBold.ttf"),
|
|
);
|
|
const bannerData = await readFile(
|
|
join(process.cwd(), "public/web_banner.png"),
|
|
"base64",
|
|
);
|
|
const bannerSrc = `data:image/png;base64,${bannerData}`;
|
|
return new ImageResponse(
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: "1222px",
|
|
height: "560px",
|
|
fontFamily: "Kanit",
|
|
color: "#fff",
|
|
}}
|
|
>
|
|
<img src={bannerSrc} alt="Banner" width={1222} height={560} />
|
|
<div
|
|
style={{
|
|
fontSize: 64,
|
|
position: "absolute",
|
|
top: "160px",
|
|
left: "60px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
right: "450px",
|
|
bottom: "100px",
|
|
}}
|
|
>
|
|
<div>{title}</div>
|
|
<div
|
|
style={{
|
|
fontSize: 24,
|
|
marginTop: "-20",
|
|
color: "#aaa",
|
|
}}
|
|
>
|
|
{sub}
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
{ fonts: [{ name: "Kanit", data: kanit }], width: 1222, height: 560 },
|
|
);
|
|
}
|