Create account

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.