Add This Cool Utility To Your GitHub README Today!
Just a little something to spice up your GitHub projects…
Codecast is a reader supported publication. If you want a regular supply of fun and informative articles like this on a variety of programming topics, you should definitely subscribe:
Your README is the first thing a visitor sees upon opening the URL of your open-source project. Every other detail fades into the background as their focus is consumed in taking the first few seconds into getting to know what the project does and how it can be useful for them.
Providing useful information for the visitors and the users is of course an obvious requirement. However, nobody said that you couldn’t add a little extra flair to it on the sidelines.
If we’re being honest, visually pleasing READMEs do rock. So why not lean into that a bit more?
Let’s see about a neat little addition to your project’s README that will do the following:
Keep track of every stargazer of your repository.
Let’s get going 👇
First, create a little space at the bottom specifically for adding the usernames and their GitHub profile links to your README.
The best way to do this is how I’ve done it with my repository: Data Another Day (which also recently reached 100th star by the way :)
After that, we are good to go ahead and configure a way to add any new people who star our repository to the bottom of that heading.
The shortest, cleanest, and the most intuitive way to do this as I’ve found is with GitHub Actions.
First define a new workflow file in the folder .github/workflows of the root of your GitHub project called addstars.yml.
Now, let’s add some yaml code to this file.
Here are the things we want to do stepwise:
Create a workflow trigger
Make sure the trigger works when someone stars the project repository
Define a default runner
Create a job to add stars: add GitHub profile link to README
Commit new changes to README
Great. Let’s see how each of them look like in our yaml file:
The first step is obviously creating a workflow trigger, and making sure that the trigger works on starring the repository. We do it like this:
name: Add Stars
on:
watch:
types: [started]
workflow_dispatch:name defines the name of the workflow
on: is the trigger for the workflow. We define two triggers as you can see:
watch trigger to make sure the starring action works
workflow_dispatch trigger to just test the action out by running it manually from the Actions tab in the repository.
Now, we can go ahead and define a new job.
Here is the full job:
jobs:
addstars:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Add Stars to Readme
run: |
echo -e ":star: [@${{github.actor}}](https://github.com/${{github.actor}})\t" >> README.md
- name: Commit changes
uses: elstudio/actions-js-build/commit@v2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
PUSH_BRANCH: 'main'This workflow runs on a simple Ubuntu OS runner.
Now, we define the first step called Add Stars to Readme for adding the stargazer to the README. We do this by getting the name of the GitHub actor (the username) of the person and appending it simply to the README.md by the echo >> command.
We also make sure to do this in the Markdown fashion, meaning like this: [username](URL to profile).
Now, in the second and last step, we use a commit action to push our new changes to our desired branch. My branch here is main but make sure to change it to what you need. (It could be ‘master’ in your case!)
Now, simply commit the addstars.yml file to your branch and ask a friend to star your repository or just manually run your workflow from the Actions tab like this:
Now see the output at my repository (by starring it if you haven’t already :P https://github.com/yashprakash13/data-another-day):
Awesome, we have now added a little spice to our GitHub README. Congrats on following along!
If you liked this article, share it with a friend maybe?