Making a Custom Blog Widget Using GitHub Actions

Recently I wanted to include a widget on the about page of this website showing my current personal best typing speeds. However, my preferred website, Monkeytype, doesn’t appear to have a widget for websites. I considered many solutions for automating the process of getting updated typing data from Monkeytype and storing it somewhere, but most would not be free. GitHub actions and pages ended up being a viable solution since it can query websites, commit the returned data to a repository, and host the data. This is exactly what I have done with freierson/monkeytype-widget, which I use to get the typing data I show in the about page of this website.

There are three main parts to the GitHub action I made, which is shown in Figure 1. First the current version of the repository is made available using a GitHub action (actions/checkout@v4). Next, using the curl command, typing data is extracted from my profile on Monkeytype and written to a file. If the curl fails then the script stops and no data is committed. This ensures that the widget will still show data from the last successful curl. Finally, if the previous steps were successful, a GitHub action (stefanzweifel/git-auto-commit-action@v5) runs which commits the updated version of the repository. I have set the action to run only once every day, since the underlying data is unlikely to change very often.

name: get-typing-data
on:
  schedule:
  - cron: "0 12 * * *"
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
jobs:
  get-and-commit:
    permissions:
      contents: write
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Extract typing data.
        working-directory: ${{ github.workspace }}
        run: curl https://api.monkeytype.com/users/filipr1/profile -f -o "index.json"
      - uses: stefanzweifel/git-auto-commit-action@v5

Figure 1: The contents of get-typing-data.yml.

I also used GitHub pages to deploy index.json whenever there are any changes. This can be set up in the settings of the repository under the pages tab.

Finally I use javascript to process the data and css to style the widget to finally get something presentable like in Figure 2.

I hope this post was useful for those who want to use widgets for websites that do not have something quite ready to go out of the box.

My Best Monkeytype Results