DEV Community

Estee Tey
Estee Tey

Posted on

Article Badge Counter (ABC) Workflow

Submission Category: Wacky Wildcards


Link to Code

Main repository

GitHub logo lyqht / article-badge-counter-workflow

GitHub Action Workflow that complements blog-post-workflow to generate a Shields.io badge. Intended to be easy like ABC

article-count-workflow

This GitHub action workflow aims to help you to create an article badge counter like this to showcase on your profile that you are more than just a developer 😉 Users can click it and be redirected to a website of your choice.

The default badge looks something like this.

Website

What it does

This workflow is a composite action:

  • The number of articles is retrieved using the blog-post-workflow action.
  • The badge is generated using Shields.io, which are not clickable by default.
  • This action has a script to take in your inputs to create a customized clickable badge.
  • The commit and push github actions to your repo are performed by the git-auto-commit workflow

How to use

If you are new to GitHub Actions, refer to this section. Otherwise, you can get started by referring to to the example given and the input options available.

Example

This is an example…

Also tried out doing a pre-release on the GitHub Action Marketplace here


About the workflow

This workflow is a composite action:

  • The number of articles is retrieved using the blog-post-workflow action.
  • The badge is generated with Shields.io, which is not clickable by default.
  • This action has a script to take in your inputs to create a customized clickable badge.
  • The commit and push github actions to your repo are performed by the git-auto-commit workflow

Using the GitHub Action

An example for the action yaml, instructions for those who are unfamiliar with GitHub Actions, and the input options available to be used to customize the badge are included in the repository's README.md.

Users can display their generated badge on their GitHub profile README.md in any way they like. This is a layout example from my profile.

GitHub Profile with generated article badge counter

Additional Resources / Info

Special thanks to Gautam Krishnar for helping to fix the bug that I discovered while working on this action 🧡 He also submitted the blog-post-workflow action for the hackathon, and the article can be found here.


Room for improvements

There were a lot of troubleshooting along the way, but it was fun to learn about composite action concepts and create this action 😄 Ideally, I would also want to include some form of E2E test on the README as part of the composite action to make sure that the badge does render correctly before the action pushes the commit.

Oldest comments (2)

Collapse
 
cicirello profile image
Vincent A. Cicirello

Very nice. If I ever get around to starting a blog I might use a variation of this. Have you thought about having it instead generate a Shields JSON file specifying the badge, and pushing that instead of the badge? The benefit is that the README wouldn't need to change when the badge content changes. I have an action that counts the number of workflows that use an action and reports the count with a badge, and instead of generating the badge my action generates JSON in format expected by Shields, so the markdown in README to insert badge and link it to something stays the same. If you want to see what I mean, check out github.com/cicirello/count-action-.... If you do something similar, you just need to update the post count in a JSON file when it changes and existing markdown in README stays the same. Anyway, nice workflow.

Collapse
 
lyqht profile image
Estee Tey

That's a great idea! that way, the user don't need to include the comment tag name for the action to search for where they want to put the badge, users just have to point the image url to where the generated JSON file will be.

I did consider that approach initially, however decided not to do it because of 2 user experience reasons.

  1. I didn't really want to create additional files in the user's repository, so i rather the workflow update the README rather than generating a new JSON file and updating it.
  2. I would also expect that if anyone uses them, a lot will people who already uses blog-post-workflow, so I wanted to keep the inputs consistent with that workflow.

I also find the Shields endpoint a little too complicated to understand, that's why in this action I'm just creating CDN links rather than generating endpoints.

I did check out your project though, really liked that you have a Dockerfile and also tests. 😄