From 6ff907004c985042cf37dfff06ebd624d40b6887 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Fri, 18 Aug 2023 12:32:12 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9B=20Clean=20up=20and=20fix=20og-imag?=
 =?UTF-8?q?e=20code=20(#820)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/landing/src/pages/api/og-image.tsx |  3 +--
 apps/landing/src/pages/blog/[slug].tsx  | 16 +++++-----------
 apps/web/src/pages/invite/[urlId].tsx   | 19 +++++++++----------
 packages/utils/src/absolute-url.ts      |  9 +++++++--
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/apps/landing/src/pages/api/og-image.tsx b/apps/landing/src/pages/api/og-image.tsx
index 9c3364133..2cbe6d767 100644
--- a/apps/landing/src/pages/api/og-image.tsx
+++ b/apps/landing/src/pages/api/og-image.tsx
@@ -23,7 +23,6 @@ export default async function handler(req: NextRequest) {
   const { searchParams } = req.nextUrl;
   const title = searchParams.get("title");
   const excerpt = searchParams.get("excerpt");
-  const type = searchParams.get("type");
 
   return new ImageResponse(
     (
@@ -47,7 +46,7 @@ export default async function handler(req: NextRequest) {
                 height={64}
               />
               <div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
-                <span tw="bg-gray-200 px-6 py-3 rounded-full">{type}</span>
+                <span tw="bg-gray-200 px-6 py-3 rounded-full">Blog</span>
               </div>
             </div>
           </div>
diff --git a/apps/landing/src/pages/blog/[slug].tsx b/apps/landing/src/pages/blog/[slug].tsx
index 544f2f12e..91c7a9981 100644
--- a/apps/landing/src/pages/blog/[slug].tsx
+++ b/apps/landing/src/pages/blog/[slug].tsx
@@ -36,19 +36,13 @@ const Page: NextPageWithLayout<Props> = ({ post }) => {
         openGraph={{
           title: post.title,
           description: post.excerpt,
+          url: absoluteUrl(`/blog/${post.slug}`),
           images: [
             {
-              url:
-                `${absoluteUrl()}/_next/image?w=1200&q=100&url=${encodeURIComponent(
-                  `/api/og-image`,
-                )}` +
-                encodeURIComponent(
-                  `?type=${encodeURIComponent(
-                    "Blog",
-                  )}&title=${encodeURIComponent(
-                    post.title,
-                  )}&excerpt=${encodeURIComponent(post.excerpt)}`,
-                ),
+              url: absoluteUrl("/api/og-image", {
+                title: post.title,
+                excerpt: post.excerpt,
+              }),
               width: 1200,
               height: 630,
               alt: post.title,
diff --git a/apps/web/src/pages/invite/[urlId].tsx b/apps/web/src/pages/invite/[urlId].tsx
index 0c7053f2b..a8eef3f50 100644
--- a/apps/web/src/pages/invite/[urlId].tsx
+++ b/apps/web/src/pages/invite/[urlId].tsx
@@ -86,11 +86,12 @@ const GoToApp = () => {
 };
 
 type PageProps = {
+  id: string;
   title: string;
   user: string | null;
 };
 
-const Page = ({ title, user }: PageProps) => {
+const Page = ({ id, title, user }: PageProps) => {
   const { t } = useTranslation();
   const name = user ?? t("guest");
   return (
@@ -99,17 +100,13 @@ const Page = ({ title, user }: PageProps) => {
         openGraph={{
           title,
           description: `By ${name}`,
+          url: absoluteUrl(`/invite/${id}`),
           images: [
             {
-              url:
-                `${absoluteUrl()}/_next/image?w=1200&q=100&url=${encodeURIComponent(
-                  `/api/og-image-poll`,
-                )}` +
-                encodeURIComponent(
-                  `?title=${encodeURIComponent(
-                    title,
-                  )}&author=${encodeURIComponent(name)}`,
-                ),
+              url: `${absoluteUrl("/api/og-image-poll", {
+                title,
+                author: name,
+              })}`,
               width: 1200,
               height: 630,
               alt: title,
@@ -192,6 +189,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
       id: ctx.params?.urlId as string,
     },
     select: {
+      id: true,
       title: true,
       user: {
         select: {
@@ -207,6 +205,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
     return {
       props: {
         ...res.props,
+        id: poll.id,
         title: poll.title,
         user: poll.user?.name ?? null,
       },
diff --git a/packages/utils/src/absolute-url.ts b/packages/utils/src/absolute-url.ts
index a3c147ff8..6dd353603 100644
--- a/packages/utils/src/absolute-url.ts
+++ b/packages/utils/src/absolute-url.ts
@@ -15,13 +15,18 @@ function joinPath(baseUrl: string, subpath = "") {
   return baseUrl;
 }
 
-export function absoluteUrl(subpath = "") {
+export function absoluteUrl(subpath = "", query?: Record<string, string>) {
+  const queryString = query
+    ? `?${Object.entries(query)
+        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+        .join("&")}`
+    : "";
   const baseUrl =
     process.env.NEXT_PUBLIC_BASE_URL ??
     getVercelUrl() ??
     `http://localhost:${port}`;
 
-  return joinPath(baseUrl, subpath);
+  return joinPath(baseUrl, subpath) + queryString;
 }
 
 export function shortUrl(subpath = "") {