🔰Yeah, you heard me right you can add dynamic visitor counter on your markdown readme.md!
🔰Github recently introduced profile readme's which can be activated when we use username as repository:
🔰So it all starts when we embed SVG's in readme.md file markdown code, what we don't know is behind the scenes GitHub retains them in their camo server.
saving readme as this: ⬇️
when you inspect, it becomes: ⬇️
your SVG URL ➡️ camo server ➡️ your profile page.
It is similar to how dev.to first saves the uploaded image to amazon servers.
We can have a counter as SVG in two ways:
- Using counting API's from WEB : https://countapi.xyz/
- Using backend for calculating counter and serving svg.
📢 For me depending on public servers for reliability is not a safe choice. so I chose to make a free backend application on Heroku
🆓 The free tier will provide you Postgres DB, node js application hosting, and a public URL: 😃 My Counter
I will save the part of creating the node js application and deploying it for the public URL for future posts.
res.set('Content-Type', 'image/svg+xml'); res.header('Cache-Control', 'no-cache,max-age=0,no-store,s-maxage=0,proxy-revalidate'); res.header('Pragma', 'no-cache'); res.header('Expires', '-1');
It means no cache-control and expiry which results in fetching from the server every time someone try to accesses the URL.
🚥 If we embed without such headers the cache of your route will be saved forever in camo servers 😣. To avoid this try to change your route path so that it will fetch a new request with a new header.
Simply paste your SVG URL into your readme markdown like any other SVG. and done!❤️ 😃 👍
❤️ 😃 👍
Note: Hey guys this is my first post, please support and give your views for improvement🔨