Collecting squares together!
Tags: graphql, github, svelte, becode
Published: 2019-09-12 06:11:17

☝️ **NOTE:** this article is an _updated version_ of [one of my previous article on Medium](https://medium.com/becode/collecting-squares-together-cc3177a65c86), 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](https://www.youtube.com/watch?v=pGFGD5pj03M). 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](https://kareble.becode.xyz).

* * *

## Fetching the data

I already known about the [GraphQL API](https://developer.github.com/v4/) of GitHub 

> Did I tell you that I really love [GraphQL](https://graphql.org/)? 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:

{% gist https://gist.github.com/leny/6a71dd0b8ffef5c2f691e16e07102797 file=fetch-github-data.graphql %}

It gives me all the contributions from the last year, by weeks, for 25 users of our organization. Then, I created a [small script](https://github.com/becodeorg/kareble/blob/master/scripts/fetch-data.js) 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](https://svelte.dev). The version 3 was quite new when I started working on kareble and some podcasters I listen made very [enthusiastic](https://shoptalkshow.com/episodes/349/) [episodes](https://spec.fm/podcasts/toolsday/293076) 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](https://github.com/becodeorg/kareble).  
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](http://rollupjs.org).

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](https://github.com/features/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:

{% gist https://gist.github.com/leny/6a71dd0b8ffef5c2f691e16e07102797 file=workflow.yml %}

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`](https://docs.npmjs.com/cli/ci.html) 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](https://kareble.becode.xyz), and dig in the code on the [GitHub repository](https://github.com/becodeorg/kareble).