Opengraph image generation #135
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
ok I think this is ready to go! We still have a few tradeoffs with the edge runtime - there aren't great ways to revalidate cache, so we're preventing any caching on our janeway request which leads to a duplicate call during metadata generation (used in alt text). I think this is probably ok. Tested that a redeploy busts the cache, and it also looks like our cache-control in the ImageResponse header is working to cause regeneration after a day, so things shouldn't get too stale! |
| const fullAuthorString = authors | ||
| .map((author) => | ||
| `${author?.first_name || ''} ${author?.last_name || ''}`.trim(), | ||
| ) | ||
| .join(', ') | ||
| if (fullAuthorString.length < 35) { | ||
| return fullAuthorString | ||
| } | ||
| const firstAuthor = authors[0] | ||
| return firstAuthor?.last_name ? `${firstAuthor.last_name} et al.` : '' |
There was a problem hiding this comment.
nit: we could still pull in authorsList here to reduce duplication / enforce some consistency between social card formatting and in-app formatting
| const fullAuthorString = authors | |
| .map((author) => | |
| `${author?.first_name || ''} ${author?.last_name || ''}`.trim(), | |
| ) | |
| .join(', ') | |
| if (fullAuthorString.length < 35) { | |
| return fullAuthorString | |
| } | |
| const firstAuthor = authors[0] | |
| return firstAuthor?.last_name ? `${firstAuthor.last_name} et al.` : '' | |
| const fullAuthorString = authorsList(preprint.authors) | |
| if (fullAuthorString.length < 35) { | |
| return fullAuthorString | |
| } | |
| return authorsList(preprint.authors, { abbreviate: true }) |
app/opengraph-image.tsx
Outdated
| marginTop: '-5px', | ||
| }} | ||
| > | ||
| Preprints Available |
There was a problem hiding this comment.
Should we follow Tyler's nudge to use a more general term?
| Preprints Available | |
| Titles Hosted |
or
| Preprints Available | |
| Submissions Contributed |
This sets up dynamic social card generation via
next/ogfor both the overall website and individual preprint pages.Browse to
/opengraph-imagefor the main site version, and/preprint/[id]/opengraph-image/1for the preprint specific version.I ran into some odd errors when trying to use our formatter utils, so ended up replicating them in the files. Also created a couple reused components, which I placed in the
components/og-imagefolder.I think these are ready visually, with one potential wording change for the main card still to come. One other potential visual issue is that a lot of platforms add rounded corners to social card images, so our bezeled border loses a bit of its flair in those cases.
Currently these are set up to cache fonts indefinitely, and to refetch preprint count/title and regenerate the image after a week. I could imagine shortening this. Performance wise, it looks like raw image creation/fetch takes a bit over a second, with subsequent serves far faster than that, fwiw.