Github Contribution Table

So when it comes to some products like Twitter & GitHub, there are ways to either access non-public APIs or minimum, to scrap info that we can't take easily with the official API.
For Twitter, I think it is more important because you can access a lot of data for free, but I'm not going into that in detail because methods still work for years. And I think people who found ways to scrape data from Twitter data with not much cost should continue. 

About GitHub, you probably know this, for its frontend, it uses a concept named 'micro-frontends', saw it advertised by them in a video at least a few years back, and they still use that.
What does this concept of micro-frontends mean? Simple the frontend is split into many parts that have their own URI and can even be streamed such that when you compose a more complex frontend, you can by combining streams of HTML. 
Ok, so there's such a URI for the contribution table also (very known fact). Now you can fetch HTML pretty easily but the result will contain more than that dynamic SVG, things like activity graph, and they'll even put announcements in there, like the recent one with 100 million devs. 

So I guess if you want to insert that anywhere and only need the graph table, you need to run some cleanup over the output and probably make the SVG responsive and get rid of some data. 
Here's the JS code for that:

const prepareHtml = (html: string) => {
    return html.replace(/<div[^>]+Box-header Box-header--blue.*?(<div class="js-calendar-graph)/gms, '$1') // remove potential github ADS
    .replace(/<div class="js-activity-overview-graph-container.*?<\/div>/gms, '') // remove activity graph
    .replace(/<details.*?<\/details>/gms, '') // remove details
    .replace(/<svg.*?js-calendar-graph-svg.*?>/gms, '<svg class="js-calendar-graph-svg" width="99%" viewBox="0 0 717 112">') // make svg responsive
    .replace(/<div class="float-left.*?<\/div>/gms, '') // remove float left
    .replace(/<a/gms, '<a  rel="noopener noreferrer external" ') // indicate to sveltekit to not preload external links
}

const updateContributions = async () => {
    let html = await (await (fetch('https://github.com/users/<REPLACE_GITHUB_USERNAME>/contributions'))).text()
    const updated_at = new Date().toISOString()
    html = prepareHtml(html)
    await supabase.from('fsk_github_contributions').upsert([{id: 1, html, updated_at}])
    return {html, updated_at}
}

The code is relatively simple may notice a cache there in DB, typically recommended because I don't see why you would update it more than once an hour unless your commits are automated. I have not tested how many requests you can make until you hit some restriction, but I know if you make one request even at 3-4 minutes, you're totally safe. I remember that from a Microsoft service with a script I made that let me literally download TB worth of courses out of LinkedIn with no issues. 


But aside from that, you'll also need some basic CSS for this contribution table which won't be in the response but can be easily scrapped from GitHub. I used the winter colors for the table it seems their CSS at the time of scrapping stored like a few color schemes for Winter, Halloween, and other events, probably kept there for laziness to switch them with ease. 


The essential GitHub contribution table CSS I have is like 200 lines so, I'll instead put a gist link, probably it can be cleaned up: Gist Link


Now put that table where you want if you want. I mean GitHub, at least thinks you do that because a lot of their events celebrate that table :).

Tags

JavaScript Code Example Automation

Related Articles

tag cloud javascript
JS Tag Cloud derived from Wordpress

When I started to code this blog, I tried to extract from my WordPress blog some simple features that I think are essential. Now I don't know how crucial a `Tag Cloud`&nbsp;is, but I assume even if it is not central, nothing is more emblematic of a blog than a...

Read more
svelte blog
Made a SvelteKit blog that runs on Deno Serverless

Just converted and deployed this blog on Netlify. So I've been exploring svelte, and svelteKit, and I was looking to refresh my old blog that is in a neglected state. When I started this blog was 2007, and then it was of course, a WordPress blog, but I deleted...

Read more
Deno Deploy Thoughts
Deno Deploy Thoughts

This is some old draft article that I didn't want to trash, so I'll try to at least partially salvage it. I played a bit with Deno deploy a while back, and I must say quite impressive that using Deno deploy is very easy to fast spawn a serverless worker, simi...

Read more

EVM Signature