DEV Community

Cover image for Add visitor count SVG to Git hub / profile

Add visitor count SVG to Git hub / profile

πŸ˜ƒπŸ‘‹ 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!
πŸ”°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 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="">

when you inspect, it becomes: ⬇️

<a target="_blank" rel="noopener noreferrer" href="">
<img height="64px" src="" 
data-canonical-src="" style="max-width:100%;">

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

It is similar to how 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 :
  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');

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!❀️ πŸ˜ƒ πŸ‘


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

Discussion (1)

annihil profile image

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