DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Add visitor count SVG to Git hub readme.md / profile readme.md [Counter is removed from github since heroku is chargin fees :(]
Anuj Grover πŸ‘¨πŸ»β€πŸ’»
Anuj Grover πŸ‘¨πŸ»β€πŸ’»

Posted on • Updated on

Add visitor count SVG to Git hub readme.md / profile readme.md [Counter is removed from github since heroku is chargin fees :(]

πŸ˜ƒπŸ‘‹ Hey guys here I will explain how to show visitor counter on your git hub profile.

🌟My github Profile Page

πŸ”°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:
Alt Text
πŸ”°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: ⬇️

<img height="64px" src="https://cdn.svgporn.com/logos/javascript.svg">
Enter fullscreen mode Exit fullscreen mode

when you inspect, it becomes: ⬇️

<a target="_blank" rel="noopener noreferrer" href="https://camo.githubusercontent.com/1beeb3d21bd0b20daeae02856eaf2b301846fb07/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f6a6176617363726970742e737667">
<img height="64px" src="https://camo.githubusercontent.com/1beeb3d21bd0b20daeae02856eaf2b301846fb07/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f6a6176617363726970742e737667" 
data-canonical-src="https://cdn.svgporn.com/logos/javascript.svg" style="max-width:100%;">
</a>
Enter fullscreen mode Exit fullscreen mode

your SVG URL ➑️ camo server ➑️ your profile page.

It is similar to how dev.to first saves the uploaded image to amazon servers.


Part 1 Getting things ready

We can have a counter as SVG in two ways:

  1. Using counting API's from WEB : https://countapi.xyz/
  2. 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.

Just make sure your svg response headers look like this

      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');
Enter fullscreen mode Exit fullscreen mode

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.


Part 2 Getting things done

Simply paste your SVG URL into your readme markdown like any other SVG. and done!❀️ πŸ˜ƒ πŸ‘

![](https://still-brushlands-82734.herokuapp.com/countercheck)
Enter fullscreen mode Exit fullscreen mode

❀️ πŸ˜ƒ πŸ‘
Note: Hey guys this is my first post, please support and give your views for improvementπŸ”¨

Top comments (1)

Collapse
 
annihil profile image
a

I'm glad you used my GIF as well! πŸ˜ƒ

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git