diff --git a/apps/web/pages/api/social/og/image.tsx b/apps/web/pages/api/social/og/image.tsx index 8a351ea787..c311be1b55 100644 --- 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 index 061b026b4a..9cb6baae95 100644 --- 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 index a6dd8f8f86..c5c0876c7d 100644 --- 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 index 4e79c6ceaf..9763e901dc 100644 --- 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 index 1ee9cec2bc..ca4e17791f 100644 --- 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,10 +83,10 @@ 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)}`, @@ -97,7 +94,7 @@ export const constructGenericImage = ({ title, description }: GenericImageProps, // Joining a multiline string for readability. ].join(""); - return encodeUri ? encodeURIComponent(url) : url; + return url; }; const Wrapper = ({ children, variant = "light", rotateBackground }: WrapperProps) => (