Last active
November 25, 2024 02:58
-
-
Save shellscape/a2ec2f0432a6383b94d18cb4417a1d10 to your computer and use it in GitHub Desktop.
Embedding the Github Contribution Calendar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var proxy = 'https://urlreq.appspot.com/req?method=GET&url=', | |
url = proxy + 'https://github.com/{{ site.github }}', | |
colors = { | |
'eeeeee': 'github-graph-none', | |
'd6e685': 'github-graph-litte', | |
'8cc665': 'github-graph-some', | |
'44a340': 'github-graph-more', | |
'1e6823': 'github-graph-most' | |
}; | |
document.addEventListener('DOMContentLoaded', function () { | |
fetch(url) | |
.then(function responseThen (response) { | |
return response.text(); | |
}) | |
.then(function fetchThen (body) { | |
var wrapper = document.createElement('div'), | |
container = document.querySelector('#github-graph'), | |
graph, | |
gs, | |
fill, | |
index; | |
wrapper.innerHTML = body; | |
graph = wrapper.querySelector('svg.js-calendar-graph-svg'); | |
gs = [].slice.call(graph.querySelectorAll('g g')); | |
for (var g of gs) { | |
index = gs.indexOf(g); | |
if (index < 26) { | |
g.parentElement.removeChild(g); | |
} | |
else { | |
g.attributes.transform.value = 'translate(' + (13 * (index - 26)) + ', 0)'; | |
} | |
} | |
for(var rect of graph.querySelectorAll('rect')) { | |
fill = rect.getAttribute('fill').substring(1); | |
if (colors[fill]) { | |
rect.classList.add(colors[fill]); | |
} | |
} | |
graph.setAttribute('version', '1.1'); | |
graph.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); | |
graph.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); | |
graph.setAttribute('xml:space', 'preserve'); | |
container.innerHTML = graph.outerHTML; | |
}); | |
}); |
Have a look at this link for more details: https://shellscape.org/2016/08/31/embedding-github-contribution-calendar
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, I'm a novice on programming. Doing my small project with my team mates, I got a responsible for getting gitlab commit graph on our page. Although I had searched so many methods for doing this, I couldn't find a suitable way. The only way for solving this problem would be disassembling all of the data, and reassemble in a graph but I cannot afford to do it.
So, I wonder how can I apply this to other pages. If you are willing to let me learn how to use this, please reply me whenever you're available.