fix: outdated/broken og preview image for org events #17812
Conversation
hbjORbj
changed the title
hbjORbj
changed the title
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (11/23/24)1 reviewer was added to this PR based on Keith Williams's automation. |
| @@ -127,7 +127,6 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => { | |||
| const avatars = attendees | |||
| .map((user) => { | |||
| if ("image" in user && user?.image) return user.image; | |||
| if ("username" in user && user?.username) return `${CAL_URL}/${user.username}/avatar.png`; | |||
There was a problem hiding this comment.
The reason I think this line might be the issue is 👇
Let's use one of our org event as an example. https://i.cal.com/support/intercom-support?date=2024-11-25&month=2024-11
This shows this broken preview image:
If we inspect the page and see the <meta/> element for og:image, we have this URL:
https://cal.com/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3DIntercom%2520Support%26meetingProfileName%3DSupport%26meetingImage%3Dhttps%253A%252F%252Fcal.com%252Fapi%252Favatar%252Fb0b58752-68ad-4c0d-8024-4fa382a77752.png%26names%3DMilos%2520Puac%26usernames%3Dmilos
which throws 502 cloudflare error. But if we remove %26usernames%3Dmilos, then it renders well:
https://cal.com/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3DIntercom%2520Support%26meetingProfileName%3DSupport%26meetingImage%3Dhttps%253A%252F%252Fcal.com%252Fapi%252Favatar%252Fb0b58752-68ad-4c0d-8024-4fa382a77752.png%26names%3DMilos%2520Puac
| @@ -127,7 +127,6 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => { | |||
| const avatars = attendees | |||
| .map((user) => { | |||
| if ("image" in user && user?.image) return user.image; | |||
| if ("username" in user && user?.username) return `${CAL_URL}/${user.username}/avatar.png`; | |||
There was a problem hiding this comment.
Do we need this line? I couldn't find relevant code storing users' avatars in ${user.username}/avatar.png. anyways
E2E results are ready! |
There was a problem hiding this comment.
Had a discussion with @hbjORbj about this. This won't break personal links so let's move ahead with this fix.
What does this PR do?
Mandatory Tasks (DO NOT REMOVE)