That's pretty cool. I've hand rolled an og-image generator with Automattic/node-canvas for a static site (Docusaurus) at build time. Edge is cool, but doing it at build time probably makes more sense for static sites.
Looks like using Satori might have been easier to use then having to do all the canvas draw calls (which isn't all that bad either though).
Edit: Nevermind. Actually looks like this wouldn't be self hostable in a github action. vercel/og doesn't run in a node runtime?
No, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output. That's because Satori implements its own layout engine based on the SVG 1.1 spec. However, Satori generated result (SVG) is stable on all browsers.
This was the use case I had in mind. My company generates exports that are either PDF or PNG/JPEG images from the DOM using Puppeteer. We really wanted to support SVG but every option we explored had pretty significant rendering issues, meaning an entire rewrite in SVG would have been required.
Is the SVG->PNG portion of the show handled by Satori as well, or separately as a part of the Vercel service? Asking because I’ve got code handling that part for this exact use case, which I’d be happy to either eliminate if I can use Satori, or I could clean up and open source my own solution if people would find it useful.
Thanks! Not to discourage anyone from using Vercel services if they’re interested (y’all are doing great stuff on this and lots of other fronts), but! I’d be remiss if I didn’t point out the unpublished-but-MIT-licensed repo I could find.
For anyone else who’s curious it looks like the pertinent source[1] can be self-hosted. I’m on mobile so I’m gonna limit my peering into the source, but it appears to wrap Chromium to do the PNG generation. Quite a bit different from my solution (which takes SVG-producing JSX and anything producing CSS, and renders to PNG with Sharp).
I’m curious how much overhead using Chromium adds, and whether alternatives like Sharp were considered.
To be clear, my implementation is build-time only but could easily be adapted to be dynamically server rendered, and probably could be adapted to the browser if the underlying graphics library (Sharp) has WASM support. It does need some awareness of how to get styles which can be made pluggable, but works well with my heavily customized atomic CSS setup generating styles and classes with Fela.
My use cases are all very unusual, but they’d probably make portability a much simpler task because I hobbled together such a weird set of technologies.
Here's a blog post detailing how this works (using @vercel/og): https://vercel.com/blog/introducing-vercel-og-image-generati...