DEV Community

カワリミ人形
カワリミ人形

Posted on • Updated on

Made an API to get GitHub contributions in Deno (for Terminal/JSON/SVG)

I created this project.

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

Here is demo:
https://twitter.com/KawarimiDoll/status/1411657903614742532
demo

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,
Enter fullscreen mode Exit fullscreen mode

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

![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg)
Enter fullscreen mode Exit fullscreen mode

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

svg

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

Discussion (0)