chore: update og image

openstatusHQ · Dec 27, 2024 · 701238d · 701238d
1 parent 0e18c38
commit 701238d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()}
         />