From 701238d31f4f846934ce0b84aabbd9f708fb3d5f Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <maximilian@kaske.org>
Date: Fri, 27 Dec 2024 10:59:43 +0100
Subject: [PATCH] chore: update og image

---
 apps/web/src/app/(content)/blog/[slug]/page.tsx      |  8 ++++++--
 apps/web/src/app/(content)/changelog/[slug]/page.tsx |  8 ++++++--
 apps/web/src/app/api/og/_components/basic-layout.tsx | 11 ++++++++---
 apps/web/src/app/api/og/post/route.tsx               |  2 +-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/(content)/blog/[slug]/page.tsx b/apps/web/src/app/(content)/blog/[slug]/page.tsx
index 59eb4f673d..67308b146c 100644
--- a/apps/web/src/app/(content)/blog/[slug]/page.tsx
+++ b/apps/web/src/app/(content)/blog/[slug]/page.tsx
@@ -29,6 +29,10 @@ export async function generateMetadata(props: {
   }
   const { title, publishedAt, description, slug, image } = post;
 
+  const encodedTitle = encodeURIComponent(title);
+  const encodedDescription = encodeURIComponent(description);
+  const encodedImage = encodeURIComponent(image);
+
   return {
     ...defaultMetadata,
     title,
@@ -42,7 +46,7 @@ export async function generateMetadata(props: {
       url: `https://www.openstatus.dev/blog/${slug}`,
       images: [
         {
-          url: `https://openstatus.dev/api/og/post?title=${title}&image=${image}`,
+          url: `https://openstatus.dev/api/og/post?title=${encodedTitle}&image=${encodedImage}&description=${encodedDescription}`,
         },
       ],
     },
@@ -51,7 +55,7 @@ export async function generateMetadata(props: {
       title,
       description,
       images: [
-        `https://openstatus.dev/api/og/post?title=${title}&image=${image}`,
+        `https://openstatus.dev/api/og/post?title=${encodedTitle}&image=${encodedImage}&description=${encodedDescription}`,
       ],
     },
   };
diff --git a/apps/web/src/app/(content)/changelog/[slug]/page.tsx b/apps/web/src/app/(content)/changelog/[slug]/page.tsx
index 874df4d65c..c34b90397f 100644
--- a/apps/web/src/app/(content)/changelog/[slug]/page.tsx
+++ b/apps/web/src/app/(content)/changelog/[slug]/page.tsx
@@ -33,6 +33,10 @@ export async function generateMetadata(props: {
 
   const { title, publishedAt, description, slug, image } = post;
 
+  const encodedTitle = encodeURIComponent(title);
+  const encodedDescription = encodeURIComponent(description);
+  const encodedImage = encodeURIComponent(image);
+
   return {
     ...defaultMetadata,
     title,
@@ -46,7 +50,7 @@ export async function generateMetadata(props: {
       url: `https://www.openstatus.dev/changelog/${slug}`,
       images: [
         {
-          url: `https://openstatus.dev/api/og/post?title=${title}&description=${description}&image=${image}`,
+          url: `https://openstatus.dev/api/og/post?title=${encodedTitle}&description=${encodedDescription}&image=${encodedImage}`,
         },
       ],
     },
@@ -55,7 +59,7 @@ export async function generateMetadata(props: {
       title,
       description,
       images: [
-        `https://openstatus.dev/api/og/post?title=${title}&description=${description}&image=${image}`,
+        `https://openstatus.dev/api/og/post?title=${encodedTitle}&description=${encodedDescription}&image=${encodedImage}`,
       ],
     },
   };
diff --git a/apps/web/src/app/api/og/_components/basic-layout.tsx b/apps/web/src/app/api/og/_components/basic-layout.tsx
index 0f3608ef27..ac99ea220c 100644
--- a/apps/web/src/app/api/og/_components/basic-layout.tsx
+++ b/apps/web/src/app/api/og/_components/basic-layout.tsx
@@ -17,11 +17,16 @@ export function BasicLayout({
       <div tw="flex flex-col h-full w-full px-24">
         <div tw="flex flex-col flex-1 justify-end">
           <div tw="flex flex-col px-12">
-            <h1 style={{ fontFamily: "Cal" }} tw="text-6xl">
+            <h3 style={{ fontFamily: "Cal" }} tw="text-5xl">
               {title}
-            </h1>
+            </h3>
             {description ? (
-              <p tw="text-slate-600 text-3xl">{description}</p>
+              <p
+                tw="text-slate-600 text-3xl"
+                style={{ lineClamp: 2, display: "block" }}
+              >
+                {description}
+              </p>
             ) : null}
           </div>
         </div>
diff --git a/apps/web/src/app/api/og/post/route.tsx b/apps/web/src/app/api/og/post/route.tsx
index bfb1dbc841..a45050c860 100644
--- a/apps/web/src/app/api/og/post/route.tsx
+++ b/apps/web/src/app/api/og/post/route.tsx
@@ -34,7 +34,7 @@ export async function GET(req: Request) {
       {image ? (
         <img
           alt=""
-          style={{ objectFit: "cover", height: 350 }} // h-80 = 320px
+          style={{ objectFit: "cover", height: 330 }} // h-80 = 320px
           tw="flex w-full"
           src={new URL(image, DEFAULT_URL).toString()}
         />