Files
mintel.me/apps/web/app/blog/[slug]/opengraph-image.tsx

44 lines
1.2 KiB
TypeScript

import { ImageResponse } from "next/og";
import { allPosts } from "contentlayer/generated";
import { blogThumbnails } from "../../../src/components/blog/blogThumbnails";
import { OGImageTemplate } from "../../../src/components/OGImageTemplate";
import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper";
export const size = OG_IMAGE_SIZE;
export const contentType = "image/png";
export const runtime = "nodejs";
export default async function Image({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const post = allPosts.find((p) => p.slug === slug);
const thumbnail = blogThumbnails[slug];
const title = post?.title || "Marc Mintel";
const description =
post?.description ||
"Technical problem solver's blog - practical insights and learning notes";
const label = post ? "Blog Post" : "Engineering";
const accentColor = thumbnail?.accent;
const keyword = thumbnail?.keyword;
const fonts = await getOgFonts();
return new ImageResponse(
<OGImageTemplate
title={title}
description={description}
label={label}
accentColor={accentColor}
keyword={keyword}
/>,
{
...OG_IMAGE_SIZE,
fonts: fonts as any,
},
);
}