Open
Conversation
Create opengraph-image.tsx for event pages following the club OG pattern. Enhance generateMetadata with event time, location, and twitter card.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
TyHil
requested changes
Apr 3, 2026
Member
TyHil
left a comment
TyHil
left a comment
There was a problem hiding this comment.
This looks so good! Couple small things
If you wanna add the approved check to the club open graph image too, that'd be great
- Use date-fns format matching EventTitle.tsx (start + duration style) - Parallelize async calls with Promise.all in OG image - Remove opacity on location text - Match UTD Clubs logo to 40x40 (consistent with club preview) - Add approved filter to club OG image query
Contributor
Author
|
Also added the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What's going on here
So right now, if you share a club page link on Discord or iMessage or whatever, you get a nice rich preview with the club name, logo, tags, and member count. But if you share an event link, you just get a boring plain link with no preview image at all. This PR fixes that.
The OG image (
opengraph-image.tsx)I basically followed the same pattern as the club OG image that was already built for #519. The new one lives at
src/app/events/[id]/opengraph-image.tsxand generates a 1200x630 image that shows:If the event has a banner image, it shows up on the left side of the card (same layout logic as the club OG image with the profile picture). If there's no image, everything centers up.
One thing worth noting: I added a
status = 'approved'filter on the database query so that pending/rejected/deleted events don't get a real OG image generated for them. The club OG image doesn't do this (it just checks by slug), but for events it felt important since event IDs are less guessable than slugs.The metadata (
page.tsx)The existing
generateMetadatawas pretty barebones. It had the title and a description, but was missing:summary_large_image) so the OG image actually shows up on Twitter/XopenGraphobject)Now the meta description reads something like: "Wed, Apr 2, 7:00 PM - Wed, Apr 2, 9:00 PM | ECSS 2.102. ACM Meeting from ACM at UTD on UTD Clubs". You get the time, location, and the club name all in one glance.
Closes #593