DEV Community

Oscar Nevárez

Posted on Nov 30, 2021

Asciinema actions

#actionshackathon21 #github #opensource

My Workflow

So I had this idea of turning code blocks within markdown files into gifs. That's what this Github Action does :D!

Introducing action

Turns this

#Here we go! npm i -g @org/awesome-project

into this

Usage

There are actually two actions working here.

1) asccicast parses a mardown file and produces description files that helps to traverse its content.

2) asciicast2gif use json files produced by asccicast and turn them into GIF files. this action also accepts JSON files from asciinema.org

Here's a online demo

 name: ci on: push: branches: [ 'dev' ] jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v2 - name: Asccinema generation id: asccinema uses: oscarnevarezleal/asciinema-actions/actions/asccicast@dev with: args: generate -s README.template.md -o README.md config: .asciinema.json - name: Theme block 0 uses: oscarnevarezleal/asciinema-actions/actions/asciicast2gif@dev with: theme: tango rows: 5 scale: 1 files: "block-0.*" - name: Theme block 1 uses: oscarnevarezleal/asciinema-actions/actions/asciicast2gif@dev with: theme: solarized-dark rows: 3 scale: 1 files: "block-1.*" - name: Theme block 2 uses: oscarnevarezleal/asciinema-actions/actions/asciicast2gif@dev with: theme: monokai rows: 3 scale: 1 files: "block-2.*" - uses: stefanzweifel/git-auto-commit-action@v4 with: # Optional, but recommended # Defaults to "Apply automatic changes" commit_message: Automated Change # Optional. Used by `git-commit`. # See https://git-scm.com/docs/git-commit#_options commit_options: '--no-verify --signoff' # Optional glob pattern of files which should be added to the commit # Defaults to all (.) # See the `pathspec`-documentation for git # - https://git-scm.com/docs/git-add#Documentation/git-add.txt-ltpathspecgt82308203 # - https://git-scm.com/docs/gitglossary#Documentation/gitglossary.txt-aiddefpathspecapathspec file_pattern: ".asciicast/*.gif *.md"

My recomended workflow is to keep a markdown template ( the one containing the code fences ) e.g README.template.md so the final process results in a modified version of that file > README.md. Keeping both files in the repository will guarantee consistency and prevent any content missmatch.