Carbonate
Jazz up the code blocks in your issues. Generate beautiful images for them to make it easier to follow. Meant to be used as a Github Action.
BEFORE
AFTER
First appeared at: https://stackoverflow.com/a/61269447/2104976
Features
The workflow of this action is as follows:
- It extracts the code block for the issue description / comment and generates images for them
- It then inserts the image at the code block
- It also retains the original code block as a collapsed detail in the same issue / comment body
Additionally, it
- Allows formatting the code using Prettier and controlling the styling of the images generated
- Supports the following events:
- issue_comment:
- types: created
- issues:
- types: opened
Not supported (yet)
- Generating images from multiple code blocks in the same issue description / comment
- Generating images after the issue description / comment has been edited
Advantages of code images over code blocks
- Easy to view and understand the image of the code v/s the code block text when using a mobile device. Why? Easier to scroll images v/s text.
- Members will no longer have to rely on the issue reporters and commenters to format their code blocks correctly. Using the in built formatter, the code is always structured properly
- Maintainers can style the code blocks to suit their project's language and guidelines and not put the onus of this on the issue reporter / commenter
- Carbon. Oh wow Carbon! It generates really beautiful images of code and it is aesthetically better to look at v/s plain code text
Pre-requisites
Register your application with Imgur to get a client_id. You will pass this as input to the action.
Usage
on:
issue_comment:
types: [created]
issues:
types: [opened]
jobs:
carbonate:
runs-on: ubuntu-latest
name: Generate beautiful images for code blocks present in issues
steps:
- name: Generate beautiful images for code blocks present in issues
uses: callmekatootie/carbonate@v1.0.2
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
imgur-client-id: ${{ secrets.IMGUR_CLIENT_ID }}More inputs are available. See below.
Inputs
github-token
This is the environment variable GITHUB_TOKEN.
imgur-client-id
The client_id that you obtained after registration with imgur. The action will be carrying out anonymous uploads. Required.
use-prettier
The action can use Prettier to format the code block before the image is generated. Set this input's value to the String 'true' if you want to use it or to the String 'false' otherwise. Default value is 'true'
prettier-parser
This input is only read if use-prettier input is 'true'. You will specify the parser that you want Prettier to use for formatting the code. Default value is 'babel'
prettier-options
This input is only read if use-prettier input is 'true'. You can specify the format options to use with Prettier. You need to pass the options object as a JSON string. If none is passed, the action will fall back to Prettier's default format options.
carbon-options
You can specify the Carbon image generation configuration options. See this for a list of supported options. You need to pass the options object as a JSON string. If none is passed, the action will use the options defined in the constants.js file.