While relatively meaningless, I very much enjoy the comfort which my Github Contribution Graph brings me when I reflect on my growth as a professional developer.

I say the graph is meaningless for two reasons:

  1. quantity > quality
  2. easily abused
    • this can be accomplished through fake repos and back-dated commits

However, these graphs provide an easily digestable view into one’s commit frequency.

Given my enjoyment of this graph, I decided to try to insert it here (on this site). While I was at it, I wanted to relearn Javascript.

Note that Github does not (currently) provide an easy mechanism to extract this graph from one’s Github Profile.

Method 1: Github Chart API

Version 1 (inline)

My first method was to utilize @2016rshah’s Github Chart API through a HTML img element right inside of Jekyll’s markdown:

<img src="https://ghchart.rshah.org/dlstadther"/>

Cool, right?

Wait a second, isn’t this post supposed to be about relearning Javascript?

While still on this method, I wanted to try out some other features using Javascript:

  • custom graph colors
  • Jekyll includes

Version 2 (includes + color randomization)

I decided to combine both of the aforementioned features (plus css formatting and randomization of graph base color). The result turned out quite nice!

dlstadther's Github contributions
Github Contribution Graph
Color Hex:

Up-to-date code for this can be found at /_includes/gh_contributions.html. But at the time of writing:

<style>
figure {
float: center;
width: 100%;
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
border: thin silver solid;
margin: 2em;
padding: 2em;
}
</style>
<figure>
<a href="https://github.com/dlstadther"><img id="ghContributions" src="https://ghchart.rshah.org/dlstadther" alt="dlstadther's Github contributions"/></a>
<figcaption id="ghContributionsCaption">Github Contribution Graph</figcaption>
<button onclick="randomizeGhContributionChart()">Randomize Graph Color</button>
<form id="submitColorHex">
Color Hex: <input type="color" name="rgbHex" value="#5996b6"><br>
<input type="button" onclick="submitColorGhContributionChart()" value="Update Color">
</form>
<button onclick="resetGhContribitionChart()">Reset Graph Color</button>
</figure>
<script>
function randomInt(min, max) {
return Math.floor((Math.random() * (max - min)) + min)
}
function randomColorInt() {
return randomInt(1, 255);
}
function randomColorHex() {
return randomColorInt().toString(16);
}
function getRandomRgbHex() {
return `${randomColorHex()}${randomColorHex()}${randomColorHex()}`
}
function getGhColorChart(rgbHex) {
return `https://ghchart.rshah.org/${rgbHex}/dlstadther`
}
function setGhContributionsChart(urlColor) {
document.getElementById("ghContributions").src = urlColor
}
function setGhContributionsCaption(figureCaption) {
document.getElementById("ghContributionsCaption").innerHTML = figureCaption
}
function updateChContributionChart(rgbHex) {
var urlColor = getGhColorChart(rgbHex)
var figureCaption = `Github Contribution Graph (Base RGB HEX: ${rgbHex})`
setGhContributionsChart(urlColor)
setGhContributionsCaption(figureCaption)
}
function randomizeGhContributionChart() {
var rgbHex = getRandomRgbHex()
console.log(`Random: ${rgbHex}`)
updateChContributionChart(rgbHex)
}
function submitColorGhContributionChart() {
var rgbHex = document.getElementById("submitColorHex").elements[0].value;
rgbHex = rgbHex.substr(1);
console.log(`Submission: ${rgbHex}`)
updateChContributionChart(rgbHex)
}
function resetGhContribitionChart() {
setGhContributionsChart(`https://ghchart.rshah.org/dlstadther`)
setGhContributionsCaption(`Github Contribution Graph`)
}
</script>
view raw gh_contributions.html hosted with ❤ by GitHub

This satified my base desire - to have my Github Contribution Graph on a website other than Github. However, one key component was missing - the commit count.

Method 2: Github Contributions Chart Generator

Method 1 had a few shortcomings of which I wasn’t a huge fan.

  1. Commit count is not included
  2. Url response is slow
  3. Only includes past year

In pursuit of the unicorn to satify my desires, I found a few projects by @sallar which appeared to be promising.

Version 1 (static img)

I first came upon @sallar’s hosted contribution image generator, github-contributions.now.sh.

For a static solution, this was exactly what I was looking for!

Yearly Github Contributions (static)

Version 2 (dynamic img)

Ideally, I don’t have to manually update and upload an updated image every so often.

Thankfully, @sallar also opensourced the backbones of his hosted contribution image generator:

I’m not yet sure if/how I can interact with these projects while continuing to utilize Jekyll and Github Pages. Nevertheless, efforts will be made.

To avoid this post sitting idle for too long, a future post will be made continuing on this topic…