Made an API to get GitHub contributions in Deno (for Terminal/JSON/SVG)
Tags: deno, github, api, cli
Published: 2021-08-31 05:33:33

I created this project.

https://github.com/kawarimidoll/deno-github-contributions-api

Here is demo:
https://twitter.com/KawarimiDoll/status/1411657903614742532
![demo](https://github.com/kawarimidoll/deno-github-contributions-api/raw/main/t-rec.gif)

Please access the following URL from your browser or request it using `curl`, and follow the instructions displayed.

https://github-contributions-api.deno.dev/

Since I wanted the engineers to have fun, didn't dare to create a rich UI, but rather provide explanations through text responses.
In this article, each API is explained briefly. Please try to access and play with them by yourself.

## API
When you access `https://github-contributions-api.deno.dev/[username]`, you will see the number of annual contributions for that user and some descriptions of the API.
Each API can be accessed by adding an extension to the end of the URL, such as `/[username].text`.

### .text
This is the simplest and most uninteresting type. It outputs a comma-separated list of contribution graphs.

```
❯ curl https://github-contributions-api.deno.dev/kawarimidoll.text
2387 contributions in the last year
13, 5, 2, 4, 5, 9, 1, 2, 3, 3, 3, 8, 3,10, 1, 4, 1, 1, 6, 2, 4, 2,10,10,10, 9, 8, 6,13, 4, 7, 7, 6, 6, 3, 1,11, 1, 5, 2, 6, 6, 6,21,11,17,13,16, 2, 7, 6,10,12
 4, 0, 1, 5, 7, 1, 1, 3, 9, 1, 5, 8, 3, 1, 4, 5, 3, 1, 1, 1, 1, 6, 7,12, 5, 7, 5, 5,19, 2,20,11, 8,10,32, 4, 6, 2, 5, 4, 3, 3, 7,20, 5,17, 6, 5,13,14,22, 6,12
 0, 5, 0, 7, 8, 3, 3, 3, 2, 2, 5, 1, 1, 4, 1, 3, 1, 1, 2, 1, 1, 7, 5, 9, 4,10, 2,14,12,18,11,22, 6, 7, 7,14, 1, 3, 2, 5, 1,18, 5,20, 7, 4, 6, 5,16,14, 4,17, 2
 8, 5, 1, 4, 2, 5, 2, 4, 1, 5, 2, 3, 1, 4, 1, 1, 1, 1, 1, 2, 2, 4, 7, 5, 6, 4, 2, 6,18,16, 6, 6, 2, 2, 7, 9, 1, 4, 1, 4, 4, 9, 4,11, 5,20, 6,14, 7,16,15, 9,
 6, 1, 0, 0, 5, 1, 4, 3, 1, 6, 3, 2, 1, 1, 2,10, 1, 1, 1, 2, 2,11, 3,18, 4,15, 4,12,24, 4,23,15, 4,17, 8, 5, 4, 2, 2,14, 2,12, 6, 9, 1, 9, 4, 2,11,17,14, 7,
 2, 3, 3, 2, 3, 1, 3, 1, 9, 5, 6, 1, 1, 1, 3, 1, 1, 1, 1, 2, 1, 9, 7,23, 6,13, 6, 1,14, 6, 3,12, 3, 4, 6, 2, 1, 2, 6,14, 6,12, 6,15, 2,10, 4,18, 7,20, 5,11,
 7, 3, 3,10, 4, 5, 4, 3, 2, 4, 1, 6, 4, 1, 4, 2, 2, 3, 1, 2, 1,10, 7,28, 6,12, 8,17, 7, 6, 4,14,13, 3, 5,15, 2, 5, 4,11, 6,15,24,20, 8,19, 9, 9,23, 4,12,18,
```

The display of the total number of contributions can be removed with the `no-total` parameter.
Since it is comma-separated, saving it to a CSV file may be an interesting use.

### .term
This is the most characteristic type. This is the one that is shown in the demo at the beginning of this article, and is the one that I'm promoting.
It is intended to be used with `curl`, etc in the terminal.

The display of the total number of contributions can be removed with the `no-total` parameter and the legend (`Less...More`) can be removed with the `no-legend` parameter.
In addition, there is a `scheme` parameter to set the color scheme, a `pixel` parameter to change the text used for the pixels, and an `invert` parameter to change the background color instead of the text.

The `pixel` parameter allows non-ascii characters if encoded properly.

Make sure that your device supports True Color to this works well.

### .json

This is the most "API-like" type. It returns a JSON containing a string with the total number of contributions and an array of contribution data for each week.
I can say it's a wrapper for GraphQL API of GitHub.

The contribution data is a two-dimensional array of 7 days x 53 weeks, but it can be received as a one-dimensional array using the `flat` option.

I think this type can be utilized as a source when you want to use the contributions for some purpose.

### .svg
This is the most intuitive type. It returns the contribution graph as an SVG image.
It's almost the same as the one on the GitHub user page, but the official one has some quirks in specifying coordinates, so I refactored it a bit.

Since it is an image, **it can be pasted on DEV.** Now you can show off your development activities on your articles!

![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg)
```
![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg)
```

There are some options, `no-total`, `no-legend`, `scheme`, `font-color`, `frame` and `bg`.

![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg?no-total=true&no-legend=true&bg=184038&font-color=d7f07b&frame=f03153&scheme=amber)

I think it can be used anywhere you can attach an image with a URL.
Please use it conveniently.

## Closure
I'm satisfied with the result, because it's fun to make, and the finished product is visually interesting, and I can see my achievements.

If you like it, please have a look at the repository page.

https://github.com/kawarimidoll/deno-github-contributions-api

Deno has a really good development experience.
I'd like to continue playing with Deno and Deno Deploy.

This is a translation of the following article.
Please leave comments if there are any mistakes in the translation.

https://zenn.dev/kawarimidoll/articles/b573f617a51c0b

## Extra

The tiger🐯 has given it a Star🌟! Overwhelming thanks...!

https://twitter.com/KawarimiDoll/status/1411871548449853443

This have also been picked up by Deno official Twitter! Overwhelmingly impressed...!

https://twitter.com/deno_land/status/1420387162206478340