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.

Want to ensure your codebase is rock-solid? 💪

Measure your type coverage and improve your code's reliability! 🚀 https://t.co/d3ZU1bXyek

— Tomas Votruba (@VotrubaT) March 12, 2023

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:

A short tale about how @VotrubaT's tweet inspired me to improve PHPStan's statically generated website.https://t.co/ivmHJeGCze

— Ondřej Mirtes (@OndrejMirtes) March 13, 2023

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