Social media cards for new posts aren't visible during the build

[simonw]

I just published https://til.simonwillison.net/til/til/cloudrun_using-gcloud-run-services-list.md and then noticed that the card image looks like this: https://til.simonwillison.net/-/media/screenshot/cloudrun_using-gcloud-run-services-list.md

That's because the script that fetches the previews ran during the build - so the page hadn't been deployed yet!

[simonw]

I need to be able to render the image before it's been deployed to the site. That's tricky. I may have to move my screenshot rendering into the GitHub Action itself.

[simonw]

Maybe use this: https://github.com/JarvusInnovations/puppeteer-cli

[simonw]

This worked:

npm install -g puppeteer-cli
puppeteer screenshot https://til.simonwillison.net/til/til/cloudrun_using-gcloud-run-services-list.md \
  --viewport 800x400 --full-page=false > img.png

img.png looks like this:

[simonw]

It works from disk too - so I can use datasette --get in combination of it to generate a screenshot:

datasette . --get /til/til/pytest_subprocess-server.md > page.html
puppeteer screenshot page.html --viewport 800x400 --full-page=false > img.png

I'll need to do this as a separate script from the original build_database.py.

[simonw]

This works now (I had to solve #25 on the way): https://twitter.com/simonw/status/1301029646033534977