☝️ NOTE: this article is an updated version of one of my previous article on Medium, augmented with some updates. Also my first post on dev.to!

I love gamification. Really. Collecting achievement just for the sake of it, as any rpg-player.
It’s why I really love the green squares of the contribution graph on GitHub profiles.

But the green squares are personal by essence: it’s your commits, your activity on GitHub. There’s no data for teams or organisation.

At BeCode, we work as a team, we live as a team. Everything we do, we do as a team!

It’s why I wanted to create a contribution graph with informations of all the BeCodians.

Using green squares felt a bit wrong, so I use the blue tones of BeCode’s identity, and created Kareble.

Fetching the data

I already known about the GraphQL API of GitHub

Did I tell you that I really love GraphQL? I love GraphQL. So much. For real. It’s the future, deal with it.

But unfortunately, the information are deeply hidden in all the data that GitHub serves. And fetching all the data I needed is very slow, so I can’t do it in real time.

The idea is to create a script to fetch the data, and running it once a week.

After some tests, I ended with this graphql query:

It gives me all the contributions from the last year, by weeks, for 25 users of our organization. Then, I created a small script to fetch the data of all our users, 10 at a time (I don't care about the time it takes, it's all automated on a CI, will talk about it later).

The script also assemble and clean the data, then set the color of each day, regarding of the quantity of contributions.

It finally writes all the data in a JSON that will be used by our website.

At the time of the redaction (september 2019), the script fetches the data in 74 batches of 10 users, performing all its tasks in about 2min 30s.

Displaying the data

For this little project, I wanted to change my habits.

I could have done it with React or VueJS, but I wanted to use this project as a good pretext to test and discover something I never used before.

My choice went on Svelte. The version 3 was quite new when I started working on kareble and some podcasters I listen made very enthusiastic episodes about it.

Svelte is a very great tool, similar to React or VueJS (working with components), but also quite different - the creator of Svelte describe it as a disappearing framework: when compiled, the code doesn’t need to include a runtime like React or Vue.

Svelte is also constructed around HTML: you defined components by their markup (svelte components are like small HTML fragments), and a small chunk of scripts to operate with them.

Svelte is really fast and easy to use, and for small projects, it’s a very good surprise.

The coding part was really straightforward, you can dig around the code on the repository.

If you’ve already played with a modern front-end framework like React, you’ll see that Svelte is really easy to understand.

Build & deploy

Compiling Svelte is really easy, thanks to rollup.

To host and deploy, since we can’t fetch the data in real time, we can host the website on any static platform, like netlify or github-pages. For Kareble, I use github-pages.

At the moment of releasing Kareble, the only missing part was automation - I needed to run three npm scripts to fetch, build and deploy the website each week. A strange sunday morning routine, but, hey... 😋

I really wanted to use GitHub Actions, which I was testing in beta on my personal GitHub account, but didn't had the beta access on the BeCode organisation... until this september.

With the newly introduced syntax, I came out with this workflow:

Thanks to the cron syntax, this runs every sunday at 8am (while I hope my son let me sleep a little longer), prepare a node environment, install dependencies (the npm ci is a better/faster npm install alternative in this case), then publish the result of the build on the gh-pages branch.

It was a really nice and fun little project to code.

You can see the result on kareble.becode.xyz, and dig in the code on the GitHub repository.