how to use gh-actions to produce example images of code
what i learned
I learned to chain a lot of small tools using GitHub Actions to produce ready-to-share images of code examples for social media (namely, instagram and twitter) from my phone. The steps, generally speaking, go as follows:
- Create a new page on a Notion Database. Probably will create a specific template for this, like I do with TIL’s but it’s not necessary.
- GitHub Action: Use my
markdownify-notionpython package to write the markdown version of this page and save it on a “quarto project” folder. This let’s me use one general front-matter yaml file for all files rather than automate adding front matter to each file. I can still add specific front matter to files if I want to. (this TIL is an example of how this works - I’m writing it on Notion on my phone.) - GitHub Action: Use Quarto to render this markdown file
--to htmland save it on an “output” directory. This will execute the code in the code cells and save the output inline. - GitHub Action: Use
shot-scraperto produce two files: a png screenshot and a pdf file. I’m usingshot-scraperfor the PDF as well rather than using quarto because it’s easier and I am not in need of customizing this pdf file at all just yet. I’m creating it and saving it essentially just because I can, it’s easy, and might find use for it later. - GitHub Action: Once there are new png or pdf files in the “output” directory, I then use
s3-credentialsto put those objects on a S3 bucket I also created usings3-credentials. This tool is fantastic s3-credentials.readthedocs.io
This is how the final image looks like
