Website Improvement: Social Post Preview Image

March 13, 2023 · 2 min read

PHPStan’s website is statically generated thanks to this stack:

  • Eleventy - think Jekyll, but for the modern JavaScript age
  • Parcel - my favourite bundler [1]

There’s also plenty of other cool technologies like TailwindCSS, Markdown, Mermaid, and Prism.

Being statically generated means I can host it on S3 & Cloudfront CDN and serve 120k+ views a month for literally pennies. But it makes implementing some features… not straightforward.

One day I noticed that Tomáš Votruba has nice custom previews for his articles when he shares them on Twitter.

And I wanted the same thing! I checked out some Eleventy plugins, but didn’t fall in love with any of them. I wanted to define how the image will look in HTML & TailwindCSS, screenshot it in a headless browser, and save the image to be uploaded alongside other regular website images.

So I’ve spent a few hours figuring it out, and designing the image. I love the result, both the code that achieved that, and the look. See for yourself:

Do you like PHPStan and use it every day? Consider supporting further development of PHPStan on GitHub Sponsors. I’d really appreciate it!

  1. It might as well mean “I can’t configure Webpack and I’m not ashamed!” ↩︎

© 2016–2024 Ondřej Mirtes