DEV Community 👩‍💻👨‍💻

Julian Pufler
Julian Pufler

Posted on

I built a badge API for your GitHub README

GitHub logo puf17640 / git-badges

An API serving useful badges for your GitHub Profile README 🚀🎉

You probably heard of the new GitHub profile READMEs, right?
If not you, check out my last article so you know what this is all about! Basically, you can now add a README and thus display markdown content directly on your profile page and that's awesome, because it allows us to add dynamic content to a profile.

Soon people started building projects that served these dynamically generated images so people could use them and I thought that was really cool!

I came across a visit tracker for READMEs and quickly found out it wasn't working anymore, so I figured I'd just build it myself and see how it works.

I quickly spun up a new node app on my dedicated server and played around with it, it worked great. I initially wanted to call the project 'gh-visitors' or something like that but then I thought that there might be a few other types of badges that people would want to show on their profile so I called the project 'git-badges' to leave open the possibility of more than just visit tracking.

I built the API using ExpressJs and MongoDB and the SVG generating is done by

Soon someone started working on a badge that shows how long you have been on GitHub, so I had the idea to dig around in the GitHub API docs. After that I added another badge that show how many repositories you have publicly available.

You can embed the badges on every service that supports markdown but the visit tracker will only be updating the count if the request comes from a github server to mitigate people faking visit counts.

Visits badge (puf17640/git-badges)

Visits Badge

Years badge (puf17640)

Years Badge

Repos badge (puf17640)

Repos Badge

If you have an idea for a new badge, please let me know either by creating an issue on the repository or by writing a comment down below! 👍

Top comments (3)

waterboy96 profile image
Waterboy96 • Edited on

Hi again Julian,

I tried to create some crack-pot code to fetch the download count of one asset (for my case this is fine since each release only has one asset). I don't know how to test it, but let me know what you think!

app.get('/downloads/:user/:repo/:id', async (req, res) => {
const { user, repo, id } = req.params;
const response = await request(${username}/${repo}/releases/assets/${id})
if (! return createError(res, response.message);
return res.redirect(${moment(response.download_count).fromNow()}-brightgreen${req.originalUrl.slice(req.originalUrl.indexOf('?'))})

waterboy96 profile image
Waterboy96 • Edited on

Hi Julian,

I'm trying to spice up a GitHub readme and I would like to include the download count of specific releases in the readme file (which is available through the GitHub API). Now my only issue is that I am a PhD student in chemical engineering and not software engineering... How would I go about dissecting the GitHub code you made in order to understand what I would need to change in order to create a custom badge for a specific release?

Best regards
WB // Sebastian

rocktimsaikia profile image
Rocktim Saikia

Awesome creative stuff buddy :)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.