Asciinema actions
Tags: actionshackathon21, github, opensource
Published: 2021-11-30 15:42:56

---
title: Asciinema actions
published: true
description: Shed some light into your markdown files
tags: actionshackathon21, github, opensource
---

![Asciinema+Markdown+GithubActions=AWESOMENESS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja0okslju77h2jboame0.png)

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

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

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

into this

![a block of code transformed into a gif image](https://github.com/oscarnevarezleal/awesome-project/raw/main/.asciicast/block-1.gif)

#### Usage

There are actually two actions working here.

1) [asccicast](https://github.com/oscarnevarezleal/asccinema/actions/asccicast) parses a mardown file and produces description files that helps to traverse its content.

2) [asciicast2gif](https://github.com/oscarnevarezleal/asccinema/actions/asciicast2gif) use json files produced by [asccicast](https://github.com/oscarnevarezleal/asccinema/actions/asccicast) and turn them into GIF files. this action also accepts JSON files from [asciinema.org](https://asciinema.org/)

Here's a online [demo](https://github.com/oscarnevarezleal/awesome-project)

```yaml

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.

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

Maintainer Must-Haves / Wacky Wildcards


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/oscarnevarezleal/asccinema-action %}

### Additional Resources / Info

- https://asciinema.org/