Octocard is yet another GitHub badge widget for showing off your GitHub account.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHRDvC0NOcD7Ac4DLuyfNTufePvwRQ8t8E8-eFlpxZrQJTG-sYdxBns3K3-iGks4fiTukR6J00oBbxqB6JjqHiqY0MFWewxvHNjKqQl1c34kOurjRUqg1iqF314mGJWYtcCIS9i220b6A/s800/Octocard%25202014-02-08--06%253A04%253A22.png

Screenshot of Octocard

The one above is a screenshot and here is a live embedding:

The HTML code is:


<div id="octocard"></div>
<script
data-name="livibetter"
data-modules="base,details,stats,repos,eventsStatis,orgs"
data-reposNum="7"
data-reposIgnored="pianistic"
src="http://octocard.in/o.js">
</script>

It doesn’t access GitHub API directly but via Octocard’s server, that means the data is cached on the server, you also need to grant Octocard to retrieve your public data.

The default output looks nice here at first glance, the basic information about my account, website, location as well as some numbers, with the list of repositories and bar chart of my activities on GitHub. You can change the number of items, or remove sections that you don’t want to show, even exclude some repositories as you wish. It’s quite flexible.

Apparently, it’s rendered right into the page other than using <iframe/>, so it adopts the CSS of the page, it might or might not do well for your page, not totally fine here. The blue link with green hovering background color don’t blend well, little bit hard to read.

As of writing, the organizations doesn’t seem to show up or it’d have listed this 100+ ★ repository at top, probably some tiny bugs need to be fixed. But I do like it includes the number of Gists and how it sort across repositories and accounts. The “nFlood” isn’t under my account, but I have push right to that repository, this demonstrates that Octocard does good job to compile a good list to show my usage on GitHub accurately.