From 87f161d944e5811a28d60e8358e8839af4f0082b Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 28 Feb 2025 05:03:20 -0500
Subject: [PATCH] chore: migrate OG image generation API to App Router (#19568)

* migrate

* improve apiRouteMiddleware wrapper type

* refactor

* fix type check

* fix build

* fix

* Do not import stripe lib in getServerErrorFromUnknown

* address comment

* remove comment

* add url

* keep the location

* remove space

* add unit test for getServerErrorFromUnknown

* improve

* fix
---
 apps/web/app/api/apiRouteMiddleware.ts        |  2 +-
 .../api/social/og/image/route.tsx}            | 28 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)
 rename apps/web/{pages/api/social/og/image.tsx => app/api/social/og/image/route.tsx} (83%)

diff --git a/apps/web/app/api/apiRouteMiddleware.ts b/apps/web/app/api/apiRouteMiddleware.ts
index a0580b163b..9f888df55d 100644
--- a/apps/web/app/api/apiRouteMiddleware.ts
+++ b/apps/web/app/api/apiRouteMiddleware.ts
@@ -6,7 +6,7 @@ import { NextResponse } from "next/server";
 import { getServerErrorFromUnknown } from "@calcom/lib/server/getServerErrorFromUnknown";
 
 export const apiRouteMiddleware =
-  (handler: (req: NextRequest, { params }: { params: Params }) => Promise<NextResponse>) =>
+  (handler: (req: NextRequest, { params }: { params: Params }) => Promise<NextResponse | Response>) =>
   async (req: NextRequest, { params }: { params: Params }) => {
     try {
       return await handler(req, { params });
diff --git a/apps/web/pages/api/social/og/image.tsx b/apps/web/app/api/social/og/image/route.tsx
similarity index 83%
rename from apps/web/pages/api/social/og/image.tsx
rename to apps/web/app/api/social/og/image/route.tsx
index 3756a8ff17..9905ca479a 100644
--- a/apps/web/pages/api/social/og/image.tsx
+++ b/apps/web/app/api/social/og/image/route.tsx
@@ -1,25 +1,21 @@
-import type { NextApiRequest } from "next";
+import { apiRouteMiddleware } from "app/api/apiRouteMiddleware";
+import type { NextRequest } from "next/server";
 import { ImageResponse } from "next/server";
 import type { SatoriOptions } from "satori";
 import { z } from "zod";
 
 import { Meeting, App, Generic } from "@calcom/lib/OgImages";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 
-const calFont = fetch(new URL("../../../../public/fonts/cal.ttf", import.meta.url)).then((res) =>
+const calFont = fetch(new URL("/fonts/cal.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer());
+
+const interFont = fetch(new URL("/fonts/Inter-Regular.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer());
+
+const interFontMedium = fetch(new URL("/fonts/Inter-Medium.ttf", WEBAPP_URL)).then((res) =>
   res.arrayBuffer()
 );
 
-const interFont = fetch(new URL("../../../../public/fonts/Inter-Regular.ttf", import.meta.url)).then((res) =>
-  res.arrayBuffer()
-);
-
-const interFontMedium = fetch(new URL("../../../../public/fonts/Inter-Medium.ttf", import.meta.url)).then(
-  (res) => res.arrayBuffer()
-);
-
-export const config = {
-  runtime: "edge",
-};
+export const runtime = "edge";
 
 const meetingSchema = z.object({
   imageType: z.literal("meeting"),
@@ -43,7 +39,7 @@ const genericSchema = z.object({
   description: z.string(),
 });
 
-export default async function handler(req: NextApiRequest) {
+async function handler(req: NextRequest) {
   const { searchParams } = new URL(`${req.url}`);
   const imageType = searchParams.get("type");
 
@@ -118,3 +114,7 @@ export default async function handler(req: NextApiRequest) {
       return new Response("What you're looking for is not here..", { status: 404 });
   }
 }
+
+const getHandler = apiRouteMiddleware(handler);
+
+export { getHandler as GET };