diff --git a/src/app/reports/[category]/[slug]/opengraph-image.tsx b/src/app/reports/[category]/[slug]/opengraph-image.tsx new file mode 100644 index 00000000..79ab3b05 --- /dev/null +++ b/src/app/reports/[category]/[slug]/opengraph-image.tsx @@ -0,0 +1,119 @@ +import { ImageResponse } from "next/og"; +import { getReport } from "@/lib/reports/loader"; + +export const runtime = "nodejs"; +export const alt = "OpenChainBench Research Report"; +export const size = { width: 1200, height: 630 }; +export const contentType = "image/png"; + +export async function generateStaticParams() { + return []; +} + +export default async function OG({ + params, +}: { + params: Promise<{ category: string; slug: string }>; +}) { + const { category, slug } = await params; + const report = getReport(category, slug); + if (!report) return new ImageResponse(
, { ...size }); + + const title = report.title; + const fontSize = title.length > 60 ? 58 : title.length > 40 ? 68 : 80; + + return new ImageResponse( + ( +
+
+ OpenChainBench ยท Research Report + {report.period} +
+ +
+
+ {report.category} +
+
+ {title} +
+
+ {report.heroFinding.length > 140 + ? report.heroFinding.slice(0, 137) + "..." + : report.heroFinding} +
+
+ +
+ openchainbench.com/reports + {report.author} +
+
+ ), + { ...size } + ); +}