From 25eef430bc4142100cf90c4d5644c4e1c5b5dc5d Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Tue, 4 Mar 2025 16:52:44 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Revert=20changes=20to=20og=20ima?=
 =?UTF-8?q?ge=20and=20handle=20missing=20author=20(#1610)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../invite/[urlId]/opengraph-image.tsx        | 109 ------------------
 .../src/app/[locale]/invite/[urlId]/page.tsx  |  19 ++-
 .../og-image-poll}/logo-color.svg             |   0
 apps/web/src/app/api/og-image-poll/route.tsx  |  33 +++---
 4 files changed, 24 insertions(+), 137 deletions(-)
 delete mode 100644 apps/web/src/app/[locale]/invite/[urlId]/opengraph-image.tsx
 rename apps/web/src/app/{[locale]/invite/[urlId] => api/og-image-poll}/logo-color.svg (100%)

diff --git a/apps/web/src/app/[locale]/invite/[urlId]/opengraph-image.tsx b/apps/web/src/app/[locale]/invite/[urlId]/opengraph-image.tsx
deleted file mode 100644
index c8d832b5d..000000000
--- a/apps/web/src/app/[locale]/invite/[urlId]/opengraph-image.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { prisma } from "@rallly/database";
-import { ImageResponse } from "next/og";
-import { readFile } from "node:fs/promises";
-import { join } from "node:path";
-import * as React from "react";
-
-import Logo from "./logo-color.svg";
-
-export const contentType = "image/png";
-export const size = {
-  width: 1200,
-  height: 630,
-};
-
-const regularFont = readFile(
-  join(process.cwd(), "public/static/fonts/inter-regular.ttf"),
-);
-
-const boldFont = readFile(
-  join(process.cwd(), "public/static/fonts/inter-bold.ttf"),
-);
-
-export default async function OgImage({
-  params,
-}: {
-  params: { urlId: string; locale: string };
-}) {
-  const [regularFontData, boldFontData] = await Promise.all([
-    regularFont,
-    boldFont,
-  ]);
-
-  const poll = await prisma.poll.findUnique({
-    where: {
-      id: params.urlId as string,
-    },
-    select: {
-      title: true,
-      deleted: true,
-      user: {
-        select: {
-          name: true,
-          banned: true,
-        },
-      },
-    },
-  });
-
-  if (!poll || poll.deleted || poll.user?.banned) {
-    return new Response("Not Found", { status: 404 });
-  }
-
-  const title = poll.title;
-  const author = poll.user?.name;
-
-  return new ImageResponse(
-    (
-      <div tw="flex relative flex-col bg-gray-100 w-full h-full px-[80px] py-[70px] items-start justify-center">
-        <div tw="h-full flex flex-col w-full justify-start">
-          <div tw="flex justify-between items-center w-full">
-            <Logo height={81} width={370} />
-            <div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
-              <span tw="bg-gray-200 px-6 py-3 rounded-full">Invite</span>
-            </div>
-          </div>
-          <div tw="relative flex w-full flex-col mt-auto">
-            {author ? (
-              <div
-                tw="flex text-gray-500 text-[48px] w-[1040px] overflow-hidden"
-                style={{
-                  width: 1000,
-                  whiteSpace: "nowrap",
-                  textOverflow: "ellipsis",
-                }}
-              >
-                By {author}
-              </div>
-            ) : null}
-            <div
-              tw="flex mt-3 text-[64px] font-bold w-[1040px] overflow-hidden"
-              style={{
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis",
-              }}
-            >
-              {title}
-            </div>
-          </div>
-        </div>
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 630,
-      fonts: [
-        {
-          name: "Inter",
-          data: regularFontData,
-          weight: 400,
-        },
-        {
-          name: "Inter",
-          data: boldFontData,
-          weight: 700,
-        },
-      ],
-    },
-  );
-}
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/page.tsx b/apps/web/src/app/[locale]/invite/[urlId]/page.tsx
index 926441d03..3cbcd793d 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/page.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/page.tsx
@@ -5,7 +5,6 @@ import { notFound } from "next/navigation";
 
 import { InvitePage } from "@/app/[locale]/invite/[urlId]/invite-page";
 import { PermissionProvider } from "@/contexts/permissions";
-import { getTranslation } from "@/i18n/server";
 import { createSSRHelper } from "@/trpc/server/create-ssr-helper";
 
 import Providers from "./providers";
@@ -58,7 +57,7 @@ export default async function Page({
 }
 
 export async function generateMetadata({
-  params: { urlId, locale },
+  params: { urlId },
 }: {
   params: {
     urlId: string;
@@ -83,20 +82,18 @@ export async function generateMetadata({
     },
   });
 
-  const { t } = await getTranslation(locale);
-
   if (!poll || poll.deleted || poll.user?.banned) {
     notFound();
   }
 
   const { title, id, user } = poll;
 
-  const author =
-    user?.name ||
-    t("guest", {
-      ns: "app",
-      defaultValue: "Guest",
-    });
+  const author = user?.name || "Guest";
+
+  const ogImageUrl = absoluteUrl("/api/og-image-poll", {
+    title,
+    author,
+  });
 
   return {
     title,
@@ -107,7 +104,7 @@ export async function generateMetadata({
       url: `/invite/${id}`,
       images: [
         {
-          url: `/invite/${id}/opengraph-image?${poll.updatedAt.getTime()}`,
+          url: ogImageUrl,
           width: 1200,
           height: 630,
           alt: title,
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/logo-color.svg b/apps/web/src/app/api/og-image-poll/logo-color.svg
similarity index 100%
rename from apps/web/src/app/[locale]/invite/[urlId]/logo-color.svg
rename to apps/web/src/app/api/og-image-poll/logo-color.svg
diff --git a/apps/web/src/app/api/og-image-poll/route.tsx b/apps/web/src/app/api/og-image-poll/route.tsx
index 59cf560aa..218e75a09 100644
--- a/apps/web/src/app/api/og-image-poll/route.tsx
+++ b/apps/web/src/app/api/og-image-poll/route.tsx
@@ -1,12 +1,13 @@
-/* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "next/og";
 import type { NextRequest } from "next/server";
 import * as React from "react";
 import { z } from "zod";
 
+import Logo from "./logo-color.svg";
+
 const schema = z.object({
   title: z.string().min(1),
-  author: z.string().min(1),
+  author: z.string().nullish(),
 });
 
 export const runtime = "edge";
@@ -37,26 +38,24 @@ export async function GET(req: NextRequest) {
       <div tw="flex relative flex-col bg-gray-100 w-full h-full px-[80px] py-[70px] items-start justify-center">
         <div tw="h-full flex flex-col w-full justify-start">
           <div tw="flex justify-between items-center w-full">
-            <img
-              alt="Rallly"
-              src="https://rallly.co/static/images/logo-color.svg"
-              height={64}
-            />
+            <Logo height={81} width={370} />
             <div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
               <span tw="bg-gray-200 px-6 py-3 rounded-full">Invite</span>
             </div>
           </div>
           <div tw="relative flex w-full flex-col mt-auto">
-            <div
-              tw="flex text-gray-500 text-[48px] w-[1040px] overflow-hidden"
-              style={{
-                width: 1000,
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis",
-              }}
-            >
-              By {author}
-            </div>
+            {author ? (
+              <div
+                tw="flex text-gray-500 text-[48px] w-[1040px] overflow-hidden"
+                style={{
+                  width: 1000,
+                  whiteSpace: "nowrap",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                By {author}
+              </div>
+            ) : null}
             <div
               tw="flex mt-3 text-[64px] font-bold w-[1040px] overflow-hidden"
               style={{