Just making a quick post to show off new functionality. I saw a couple websites using Typst to generate OpenGraph embed images. I basically took the implementation from crates.io's crates_io_og_image library. (It's MIT licensed, I'm allowed to!)
One thing I noticed: invoking Typst is slow slow. I ended up having to add caching to keep rendered images around.
Another issue was that Discord embeds were, like, wrong? Well first, they looked like this:
I looked at MDN's embed meta tags, and saw that they used this:
< meta name ="og:image:type " content ="image/png ">
< meta name ="og:image:height " content ="1080 ">
< meta name ="og:image:width " content ="1920 ">
< meta name ="og:image:alt " content ="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background. ">
I thought that maybe it couldn't determine the size, so used a small version? So I updated my site, and it still wasn't working. So I looked again, and noticed this rather unassuming tag:
< meta name ="twitter:card " content ="summary_large_image ">
I guess so. I went to Discord's embed tester, and it explicitly says that they use Twitter embed stuff. I suppose this stuff isn't really specified. I feel like OpenGraph should add something like this eventually.
Anyway, I added all of this stuff and it worked. Yaaay.
Here's a sample embed:
There's a chance that I could accidentally mess this up if I put a big title or subtitle in. That would be pretty funny.