My journey developing the Github Action to Jazz up the code blocks in issues.
Tags: actionshackathon
Published: 2020-08-20 06:07:33

Follow up of my submission to the #ActionsHackathon that you can find below: 
{% link https://dev.to/callmekatootie/jazz-up-the-code-blocks-in-github-issues-52e6 %}

My Github Action takes fenced code blocks in the issues and generates beautiful images for them using [Carbon](https://github.com/carbon-app/carbon) and replaces the code block to display the image instead. Why? Because (A) it looks slick, (B) It allows formatting the code and styling the syntax using guidelines you chose and (C) it makes it easy to read the code on mobile devices since one no longer has to scroll but only zoom.

Here's a document of my project journey - from how I started to the problems I encountered along the way and how I managed to resolved them to end up with a published version:

- I started off by first going through Github Actions' awesome tutorial on [how to create an Action](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action). I know Nodejs and thus felt right at home taking the Javascript based Actions approach.
- After that, I started off my exploring whether Carbon had any APIs. Could not find anything official but a search through their issue trackers led me to Carbonara, which allowed calling their service to generate the images

{% github https://github.com/petersolopov/carbonara %}

- That was my first step - to generate the images from the code blocks. Having extracted the code block using a markdown parser library, I used the Carbonara API to generate the image. I first tested it locally and then used debug logs to verify that it indeed was generated in Github.
- Having confirmed that, I moved to the next step - storing the image. I could not find any Github API to upload images / files to (the ones where we can upload within the issue itself) so had to resort to a third party API - [Imgur](https://apidocs.imgur.com/) in my case. I was familiar with Imgur and their API documentation was easy to follow so settled with that as my image host.
- Finally I brought the two together: Generating the image and then hosting it on Imgur.

{% github https://github.com/callmekatootie/carbonate/issues/1#issuecomment-674970298 %}

- Now that I had the bare minimum completed, I decided to focus on improving it. Using [Prettier](https://prettier.io/) came to mind. Wouldn't it be better if the code was formatted too, to make it easier to read and remove the responsibility of readability from the author? I quickly explored their documentation to determine how to use it programmatically and integrated it into my Action.
- But Alas! Looks like I broke something. It did not generate the image. The logs also did not throw up anything promising.  At first I assumed I had not integrated Prettier correctly. But that did not throw up anything promising. Frustrated at not being able to determine what caused the failure I traced my steps back and figured out that, during the download of the generated image and subsequent upload, I might not have coded it properly. If the image had a larger size, it would end up with a partial download and that might have contributed to my failure earlier.

{% stackoverflow 61269447 %}

- I corrected my code to correctly download the image in full and tried again. Sweet! It worked. That indeed was the cause of the earlier failure.
- Onwards! I then decided to test my inputs - that allowed the user to specify the configurations for Prettier and Carbon. They worked well.
- I then came across a scenario where Carbon had not styled the code properly. It failed midway and assumed everything to be a string after a certain line, and styled it as such. That made me realize that there could be a possibility that the Action may fail, and on such a occasion, losing the original code block might make matters worse. Thus, I decided to add that original source code into the issue after the generated image, but as a collapsed element.
- I experimented with multiple markdown formats before settling on one that looked good. 

{% github https://github.com/callmekatootie/carbonate/issues/1#issuecomment-675431053 %}

- All is well! I finally ended up doing some housekeeping - cleaning up my code, renaming my Action, adding a README etc and finally published my [Action](https://github.com/marketplace/actions/carbonate) to the marketplace

You can actually see, step by step, how I arrived at the final version of my Action by checking this Github issue out. Every time I added significant code, I would test my Action out.

{% github https://github.com/callmekatootie/carbonate/issues/1 %}

### References
- <span>Cover Photo by <a href="https://unsplash.com/@nickmorrison?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Nick Morrison</a> on <a href="https://unsplash.com/s/photos/blog?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>