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-notion
python 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 html
and save it on an “output” directory. This will execute the code in the code cells and save the output inline. - GitHub Action: Use
shot-scraper
to produce two files: a png screenshot and a pdf file. I’m usingshot-scraper
for 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-credentials
to 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