The Gist demos how to access the Github API to obtain metadata about a users public Repos and Gists.
In addition, it demos how to do this using only native DOM methods (as no external libraries are used). It does however use Bootstrap for some styling.
The Gist demos async-await when using fetch.
The Gist also demos how to combine the response header information with the response data payload in the fetch promise chain. The Github API implements rate control, where only certain number of API requests can be made within a certain timeframe (currently max 60 requests per hour). The parameters affecting the rate limit are provided in the response headers. To show the current rate limits, the header information needs to be available to the code that updates the UI, therefore the need to pass the headers down the fetch promise chain. At the end of the fetch call, both the parsed data and headers are provided to the caller.
Github API response headers example:
{
"cache-control": "public, max-age=60, s-maxage=60",
"content-type": "application/json; charset=utf-8",
"etag": "W/\"af22d4fd297131cb0ea8f6d9893f172d\"",
"x-github-media-type": "github.v3; format=json",
"x-ratelimit-limit": "60",
"x-ratelimit-remaining": "59",
"x-ratelimit-reset": "1589696851"
}In the visualization, please scroll to the bottom of the table to see the header information.
Please note that the Github API only delivers the first 30 Repos or Gists of a user with the non-paginated request done here. It is possible to obtain all Repos/Gists of a user, by paginated requests (repeated requests with incrementing page numbers in the query string). The Gist may be extend in the future to do that.
The Gist is alive here