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 shields.io.
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)
Years badge (puf17640)
Repos badge (puf17640)
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)
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(
https://api.github.com/repos/${username}/${repo}/releases/assets/${id}).header(githubHeaders).json();
if (!response.id) return createError(res, response.message);
return res.redirect(
https://img.shields.io/badge/Created-${moment(response.download_count).fromNow()}-brightgreen${req.originalUrl.slice(req.originalUrl.indexOf('?'))})});
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
Awesome creative stuff buddy :)