feat(opengraph): generated fallback image

src/app/api/openGraphImage/OpenGraphImage.tsx

@@ -0,0 +1,56 @@
+import { getBackground } from "./background";
+
+interface OpenGraphImageProps {
+  title: string;
+  description?: string;
+}
+
+const OpenGraphImage = ({ title, description }: OpenGraphImageProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        color: "white",
+        background: getBackground(),
+        width: "100%",
+        height: "100%",
+        padding: "0 75px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          height: "70%",
+          marginTop: "125px",
+        }}
+      >
+        <span
+          style={{
+            fontFamily: "Recoleta",
+            fontSize: 78,
+          }}
+        >
+          {title}
+        </span>
+        {description && (
+          <span
+            style={{
+              fontFamily: "Graphik",
+              fontWeight: 400,
+              fontSize: 36,
+            }}
+          >
+            {description.length > 160
+              ? description.substring(0, 160) + "[...]"
+              : description}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OpenGraphImage;

src/app/api/openGraphImage/fontUtils.ts

@@ -0,0 +1,39 @@
+import { readFile } from "fs/promises";
+import { join } from "path";
+
+type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type FontStyle = "normal" | "italic";
+interface FontOptions {
+  data: Buffer | ArrayBuffer;
+  name: string;
+  weight?: Weight;
+  style?: FontStyle;
+  lang?: string;
+}
+
+function readFont(filename: string) {
+  return readFile(join(process.cwd(), "public/fonts", filename));
+}
+
+export async function getFonts(): Promise<FontOptions[]> {
+  return [
+    {
+      data: await readFont("graphik_regular.woff"),
+      name: "Graphik",
+      weight: 400,
+      style: "normal",
+    },
+    {
+      data: await readFont("graphik_medium.woff"),
+      name: "Graphik",
+      weight: 600,
+      style: "normal",
+    },
+    {
+      data: await readFont("recoleta.ttf"),
+      name: "Recoleta",
+      weight: 600,
+      style: "normal",
+    },
+  ];
+}

src/app/api/openGraphImage/route.tsx

@@ -0,0 +1,18 @@
+import { ImageResponse } from "next/og";
+import { NextRequest } from "next/server";
+import OpenGraphImage from "./OpenGraphImage";
+import { getFonts } from "./fontUtils";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const title = searchParams.get("title") ?? "Variant";
+  const description = searchParams.get("description");
+  return new ImageResponse(
+    <OpenGraphImage title={title} description={description ?? undefined} />,
+    {
+      width: 1200,
+      height: 630,
+      fonts: await getFonts(),
+    },
+  );
+}

src/utils/seo.ts

@@ -80,10 +80,8 @@ export async function generateMetadataFromSeo(
 ): Promise<Metadata> {
   const companyInfo = await fetchCompanyInfo();
 
-  const title =
-    seo?.title || companyInfo?.siteMetadata?.siteName || "Fallback Title";
-  const description = seo?.description || "";
-  const imageUrl = seo?.imageUrl || "";
+  const title = seo?.title || companyInfo?.siteMetadata?.siteName || "Variant";
+  const description = seo?.description;
   const keywords = seo?.keywords || "";
 
   const favicon = companyInfo?.brandAssets?.favicon;
@@ -93,11 +91,16 @@ export async function generateMetadataFromSeo(
     (icon): icon is NonNullable<typeof icon> => icon !== null,
   );
 
+  const fallbackImageUrl = `/api/openGraphImage?${new URLSearchParams({
+    title: title,
+    ...(description ? { description: description } : {}),
+  })}`;
+
   return {
     title: title,
     description: description,
     openGraph: {
-      images: [imageUrl],
+      images: [seo?.imageUrl ?? fallbackImageUrl],
     },
     icons: { icon: icons },
     keywords: keywords,