So there was a new GitHub feature spotted in the wild, where you could have a README on your GitHub profile. So I had an idea, why not build a dynamic README using GitHub actions
GitHub profile README
So what is that GitHub profile README thingy? Its a cool new feature by GitHub which allows you to have a README on your profile. Sounds cool? Surely it is. Time to get creative 😋.
How did I include the Spotify stats on my README?
Part 1: Introduction
The Spotify API allows you to fetch a ton of info, including your liked tracks, your saved albums and your playlists. It requires an OAuth2 authentication for the API
Part 2: Getting an OAuth2 token
So to access the Spotify API, you need to have an OAuth2 token. So how do we get one? Well, the answer is really easy. So we will do it in NodeJS, as I am really comfortable with it. So first, we need to install some dependencies. We will use yarn for it, however, npm will work just fine too.
yarn add isomorphic-unfetch express dotenv
We installed 3 dependencies here, but express
and dotenv
are only required to obtain a token. So how do we obtain it? Firstly, we need and OAuth2 client_id
and client_secret
. Visit here to learn more.
So what we did here was used the Spotify API to obtain an access_token
and a refresh_token
. Keep both of them safe, as we need them for later use.
Part 3: The self updating README
So now create a README.template.md with replacement tags like I like {sp_liked} songs accross {sp_abl} albums. I have {sp_pl} playlists of awesome music
. Now we need to create an index.js
file which does all the magic.
Here, we use the
refresh_token
, the client_id
and the client_secret
to get a new access_token
and get our profile information. As a bonus, I also used the Programming Quotes API to get the quote of the hour.
Part 4: Putting it all together
Now we have created the scripts, we need to automate it to update the README every hour. For this, we will use GitHub's actions.
Before that, we need to put out refresh_token
, the client_id
and the client_secret
in out GitHub secrets as we will need them for the action.
Here, we run the action every hour, and boom, the magic happens :P
Conclusion
The finished README
This was my first dev article, please comment on how can I improve them. Also, don't forget to checkout my README.
Top comments (4)
Adding an image of the finished "widget" would be very helpful 😁
Thanks for the suggestion Midas :)
Edit: Added
I’ve been using spotipie.com/ for my Spotify stats, and it’s pretty cool. You might find it useful too.