If you’ve been following my blog for a while, or saw my post from January, you’ll know that I recently re-wrote my website and blog to use GitHub Pages and Jekyll.

The basis for the new design was the elementary OS Blog:

elementary/blog-template

Within their template they provide beautifully-designed “cards” to format external content in a way that fits the style of the blog. There are cards for YouTube and Twitter, but as you just saw above, I recently created my own to support GitHub projects.

The primary motivation was that I simply don’t like the way GitHub’s Open Graph images look within the context of my blog:

They aren’t bad, but they just don’t really fit…

One of the original design tenants of the cards, especially the Twitter card, was to not rely on external sources for data. In other words, don’t link directly to Twitter to retrieve the content of the tweet. This is great, however for a GitHub card I really wanted to be able to display an accurate number of open issues, stars, and forks, which isn’t possible or feasible to do manually.

Instead, I opted to leverage the GitHub API to retrieve this information:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
fetch('https://api.github.com/repos/elementary/blog-template')
  .then(res => {
    if (!res.ok) {
      throw new Error("Bad network response");
    }
    return res.json();
  })
  .then((out) => {
    var stargazers = out['stargazers_count']
    var issues = out['open_issues_count']
    var forks = out['forks_count']
    
    // Populate the elements with the data from the response
    document.getElementById("elementary/blog-template-stargazers").innerHTML 
      += numeral(stargazers).format('0.[0]a') + " Star" + (stargazers != 1 ? "s" : "");
    document.getElementById("elementary/blog-template-issues").innerHTML
      += numeral(issues).format('0.[0]a') + " Issue" + (issues != 1 ? "s" : "");
    document.getElementById("elementary/blog-template-forks").innerHTML
      += numeral(forks).format('0.[0]a') + " Fork" + (forks != 1 ? "s" : "");
    document.getElementById("elementary/blog-template-description").innerHTML = out['description'];
}).catch((err) => {
  console.error(err);
  // Clear out the fields in case of error rather than showing 0 values
  document.getElementById("elementary/blog-template-stargazers").innerHTML = "";
  document.getElementById("elementary/blog-template-issues").innerHTML = "";
  document.getElementById("elementary/blog-template-forks").innerHTML = "";
});

The downside is that there is a rate limit enforced on the client-side (I think 60 requests per 15 minutes, or something like that), but it’s high enough that unless you’re constantly refreshing my blog pages, you probably won’t hit it.

If you do, then it will simply display basic information with a link to GitHub:

avojak/super-cool-project

The effect is the same when you link to a non-existent project.

What’s Next?

The only other feature that would be nice to have is an indication of the primary programming language used. I believe this information is available from the API, but I need to figure out how to display it cleanly, especially on a narrower display like a phone.

Anyway, it’s a nice touch to have something a bit better than boring URLs listed in a blog post! Check out the full implementation over on the GitHub repository for the blog:

avojak/blog