fix: Remove double encoding for OG image URLs (calcom#17872)

* fix: do not use vercel image api for meeting link preview image * fix * fix * remove double encoding * fix * fix test * fix * fix * fix test * fix * fix * remove test tag * fix
l3dlp-sandbox · Nov 27, 2024 · a7e99f3 · a7e99f3
1 parent 999019c
commit a7e99f3
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 18 deletions.
diff --git a/apps/web/pages/api/social/og/image.tsx b/apps/web/pages/api/social/og/image.tsx
@@ -87,7 +87,7 @@ export default async function handler(req: NextApiRequest) {
 
       return new Response(img.body, {
         status: 200,
-        headers: { "Content-Type": "image/png", "cache-control": "max-age=86400" },
+        headers: { "Content-Type": "image/png", "cache-control": "max-age=0" },
       });
     }
     case "app": {

diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts
@@ -55,10 +55,10 @@ test("check SSR and OG - User Event Type", async ({ page, users }) => {
   expect(canonicalLink).toEqual(`${WEBAPP_URL}/${user.username}/30-min`);
   // Verify that there is correct URL that would generate the awesome OG image
   expect(ogImage).toContain(
-    "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3D"
+    "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage?type=meeting&title=30%20min"
   );
   // Verify Organizer Name in the URL
-  expect(ogImage).toContain("meetingProfileName%3DTest%2520User%26");
+  expect(ogImage).toContain("meetingProfileName=Test%20User");
 });
 
 todo("check SSR and OG - Team Event Type");

diff --git a/apps/web/playwright/organization/booking.e2e.ts b/apps/web/playwright/organization/booking.e2e.ts
@@ -387,7 +387,7 @@ test.describe("Bookings", () => {
       });
     });
 
-    test("check SSR and OG ", async ({ page, users, orgs }) => {
+    test("check SSR and OG", async ({ page, users, orgs }) => {
       const name = "Test User";
       const org = await orgs.create({
         name: "TestOrg",
@@ -428,10 +428,10 @@ test.describe("Bookings", () => {
           expect(canonicalLink).toEqual(`${orgOrigin}${calLink}`);
           // Verify that there is correct URL that would generate the awesome OG image
           expect(ogImage).toContain(
-            "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3D"
+            "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage?type=meeting&title="
           );
           // Verify Organizer Name in the URL
-          expect(ogImage).toContain("meetingProfileName%3DTest%2520User%26");
+          expect(ogImage).toContain("meetingProfileName=Test%20User");
         }
       );
     });

diff --git a/apps/web/playwright/settings/upload-avatar.e2e.ts b/apps/web/playwright/settings/upload-avatar.e2e.ts
@@ -66,9 +66,7 @@ test.describe("User Avatar", async () => {
       // yes, OG image URI encodes at multiple places.. don't want to mess with that.
       await expect(page.locator('meta[property="og:image"]')).toHaveAttribute(
         "content",
-        new RegExp(
-          encodeURIComponent(`meetingImage=${encodeURIComponent(`${CAL_URL}/api/avatar/${objectKey}.png`)}`)
-        )
+        new RegExp(`meetingImage=${encodeURIComponent(`${CAL_URL}/api/avatar/${objectKey}.png`)}`)
       );
     });
   });

diff --git a/packages/lib/OgImages.tsx b/packages/lib/OgImages.tsx
@@ -56,10 +56,7 @@ const makeAbsoluteUrl = (url: string) => (/^https?:\/\//.test(url) ? url : `${CA
  * 4. Team event (round robin) http://localhost:3000/api/social/og/image?type=meeting&title=Round%20Robin%20Seeded%20Team%20Event&meetingProfileName=Seeded%20Team
  * 5. Dynamic collective (2 persons) http://localhost:3000/api/social/og/image?type=meeting&title=15min&meetingProfileName=Team%20Pro%20Example,%20Pro%20Example&names=Team%20Pro%20Example&names=Pro%20Example&usernames=teampro&usernames=pro
  */
-export const constructMeetingImage = (
-  { title, users = [], profile }: MeetingImageProps,
-  encodeUri = true
-): string => {
+export const constructMeetingImage = ({ title, users = [], profile }: MeetingImageProps): string => {
   const url = [
     `?type=meeting`,
     `&title=${encodeURIComponent(title)}`,
@@ -70,14 +67,14 @@ export const constructMeetingImage = (
     // Joining a multiline string for readability.
   ].join("");
 
-  return encodeUri ? encodeURIComponent(url) : url;
+  return url;
 };
 
 /**
  * Test url:
  * http://localhost:3000/api/social/og/image?type=app&name=Huddle01&slug=/api/app-store/huddle01video/icon.svg&description=Huddle01%20is%20a%20new%20video%20conferencing%20software%20native%20to%20Web3%20and%20is%20comparable%20to%20a%20decentralized%20version%20of%20Zoom.%20It%20supports%20conversations%20for...
  */
-export const constructAppImage = ({ name, slug, description }: AppImageProps, encodeUri = true): string => {
+export const constructAppImage = ({ name, slug, description }: AppImageProps): string => {
   const url = [
     `?type=app`,
     `&name=${encodeURIComponent(name)}`,
@@ -86,18 +83,18 @@ export const constructAppImage = ({ name, slug, description }: AppImageProps, en
     // Joining a multiline string for readability.
   ].join("");
 
-  return encodeUri ? encodeURIComponent(url) : url;
+  return url;
 };
 
-export const constructGenericImage = ({ title, description }: GenericImageProps, encodeUri = true) => {
+export const constructGenericImage = ({ title, description }: GenericImageProps) => {
   const url = [
     `?type=generic`,
     `&title=${encodeURIComponent(title)}`,
     `&description=${encodeURIComponent(description)}`,
     // Joining a multiline string for readability.
   ].join("");
 
-  return encodeUri ? encodeURIComponent(url) : url;
+  return url;
 };
 
 const Wrapper = ({ children, variant = "light", rotateBackground }: WrapperProps) => (