Creating my GitHub repo listing page using GitHub API

Sometimes, I found that the best way to display all of my GitHub repos for a better clarity is to create its own dedicated site/page for that, especially when the number of my repos started increasing. It will be quite helpful to look at all those repos in a glance. Similarly to what has been done by Twitter, IBM and Uber. All of these are made possible and easy by using GitHub API.

Previously, my repo listing page was using the same layout as I did for my gists (gist is like a code snippet service from GitHub). Below is the screenshot for my gist listing page, and for now I don’t have a plan to change the layout.

GitHub Gist is a great service provided by GitHub to easily share your code snippets or save your notes online, either for private use or public. More about gist here…

my-gists

Demo URL: heiswayi.github.io/my-gists

My new GitHub repo listing page

A new layout for my repo listing page:

my-repos

Demo URL: heiswayi.github.io/my-repos

This new page layout provides more clarity and also supports pagination if my repo count reaches 100+ repos as GitHub Search API only provides items in sets of 100. It’s built from scratch and passion using jQuery (for AJAX request), Bulma - A modern CSS framework based on Flexbox, Font Awesome, Muuri plugin and GitHub API v3.

Example of code snippets

I used jQuery $.ajax to query the GitHub API and then process the returned response data of JSON.

var github_username = 'heiswayi';
var per_page = 100;

$.ajax({
    type: 'GET',
    url: 'https://api.github.com/users/' + github_username,
    dataType: 'json',
    success: function(data) {
        // do something JSON response data
        // for example, get total number of my repos:
        var total_repos = data.public_repos;

        // now, get all repos (max 100 repos):
        get_repos('https://api.github.com/users/' + github_username + '/repos?&per_page=' + per_page);
    }
});

function get_repos(api) {
    $.ajax({
        type: 'GET',
        url: api,
        dataType: 'jsonp',
        success: function(data) {
            // console.log(data);
            init(data); // initialize Muuri plugin
        }
    });
}

Initialization of Muuri plugin and item iterations:

function init(data) {
    if (!data || !data.data || !data.data.length) return;
    if (!grid) {
        grid = new Muuri({
            container: $grid.get(0),
            items: generateElements(data),
            dragEnabled: false,
            dragReleaseEasing: 'ease-in',
            dragContainer: document.body,
            layout: ["firstFit", {
                fillGaps: true
            }]
        });
    }
}

// here is the example of how I generate each repo info
function generateElements(data) {

    var repositories = data.data;

    // sort last modified repo to the most recents
    repositories.sort(function(a, b) {
        var aFork = a.fork,
            bFork = b.fork;
        if (aFork && !bFork) return 1;
        if (!aFork && bFork) return -1;
        return new Date(b.pushed_at) - new Date(a.pushed_at);
    });

    var ret = [];

    for (var i = 0; i < repositories.length; i++) {

        var r = repositories[i];

        var id = ++uuid;
        var desc = r.description == null ? '' : r.description;
        var lang = r.language == null ? 'unknown' : r.language;
        var size = r.forks >= 100 ? 'is-6' : 'is-3';
        var isFork = r.fork == true ? '<i class="fa fa-code-fork" title="Forked repository"></i> ' : '<i class="fa fa-github-alt" aria-hidden="true"></i> ';
        var isRepo = r.fork == false ? 'repo' : 'forked';

        var item = $('<a href="' + r.html_url + '" class="item column ' + size + '" title="Click to go to repository on GitHub...">' +
            '<div class="item-content notification ' + isRepo + '">' +
            '<span class="name">' + isFork + r.name + '</span>' +
            '<span class="desc">' + desc + '</span>' +
            '<span class="star" title="Number of watchers"><i class="fa fa-star" aria-hidden="true"></i> ' + r.watchers + '</span><span class="spacing-20"></span><span class="fork" title="Number of forks"><i class="fa fa-code-fork" aria-hidden="true"></i> ' + r.forks + '</span><span class="spacing-20"></span><span class="language" title="Major programming language"><i class="fa fa-code" aria-hidden="true"></i> ' + lang + '</span>' +
            '</div>' +
            '</a>').get(0);

        ret.push(item);
    }
    return ret;
}

Free and open source

If you like my GitHub repo listing page, the source code is available on GitHub. Feel free to fork it. Similar to my gist listing page, the source code also is available on GitHub. All source code are licensed under MIT License.