Skip to content

Add OpenGraph image generation crate #11436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 59 commits into
base: main
Choose a base branch
from
Open

Conversation

Turbo87
Copy link
Member

@Turbo87 Turbo87 commented Jun 26, 2025

This PR adds a new crates_io_og_image crate that generates OpenGraph images for crates.io packages using the Typst typesetting system.

Features

  • Generates 1200x630px images with crate metadata (name, description, version, license, tags, metrics)
  • Downloads and renders author avatars from URLs
  • Handles text truncation and overflow for long content
  • Uses Typst typesetting system for layout and rendering
  • Uses snapshot tests for visual regression detection

crates_io_og_image__tests__generated_og_image snap

(more screenshots available in the snapshots folder in the diff view 😉)

The generated images are used for social media previews when crates.io links are shared.

Note that the crate is not integrated into the main crates.io application yet. This will be done in a follow-up pull request.

@Turbo87 Turbo87 added C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works A-backend ⚙️ labels Jun 26, 2025
@Turbo87 Turbo87 requested a review from a team June 26, 2025 09:31
@Turbo87 Turbo87 force-pushed the og-image branch 2 times, most recently from 2ad5ff2 to c45d09f Compare June 26, 2025 09:43
@Turbo87
Copy link
Member Author

Turbo87 commented Jun 26, 2025

hmmmmm..... looks like the PNG snapshot tests aren't quite as portable as I had hoped... 😅

@Turbo87 Turbo87 force-pushed the og-image branch 3 times, most recently from 89a3ca7 to 507f0b2 Compare June 26, 2025 14:19
@Turbo87
Copy link
Member Author

Turbo87 commented Jun 26, 2025

hmmmmm..... looks like the PNG snapshot tests aren't quite as portable as I had hoped... 😅

I take that back. The issue was caused by the CI machines not having the Fira Sans font pre-installed. I've added that to the CI workflow now and it seems that CI is happy with it 🎉

@saharshxyz
Copy link

Great new edition using modern tooling – love to see it! Having fun talking about this in the Typst discord :)

@Turbo87 Turbo87 force-pushed the og-image branch 15 times, most recently from a7861dc to 3105761 Compare June 28, 2025 07:00
Turbo87 added 26 commits June 28, 2025 09:05
This makes the crate more secure while maintaining the same functionality, and it simplifies the implementation by removing the intermediate template rendering step.
This allows `typst compile template/og-image.typ --input 'data={"name":"foo","version":"1.0.0"}'` to work too.
Add step to download and install Fira Sans font in CI environment
to ensure consistent font rendering between local development and
GitHub Actions. This fixes the PNG snapshot test failures caused
by font fallback differences.
@NiklasEi
Copy link

Typst's PNG export is (understandably) optimized for speed and not file size. If I understand the plan correctly, the images will be rendered once and then cached. So it would probably be worth it to run something like oxipng over the results, trading a bit more time for a reduction in file size.

A quick test with the output of the example from this PR => 56% smaller file size.
time oxipng -o 2 --strip safe test_og_image.png 
Processing: test_og_image.png
55478 bytes (56.00% smaller): test_og_image.png

real	0m0.136s
user	0m0.130s
sys	0m0.042s
time oxipng -o 4 --strip safe test_og_image.png 
Processing: test_og_image.png
53965 bytes (57.20% smaller): test_og_image.png

real	0m0.325s
user	0m0.948s
sys	0m0.028s

I hope this is the right place for a comment like that. I really like the idea of this PR!

@Turbo87
Copy link
Member Author

Turbo87 commented Jun 28, 2025

I hope this is the right place for a comment like that

absolutely. that's a great idea, thanks! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-backend ⚙️ C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works
Projects
Status: For next meeting
Development

Successfully merging this pull request may close these issues.

3 participants