Add visitor count SVG to Git hub readme.md / profile readme.md [Counter is removed from github since heroku is chargin fees :(]
Tags: github, readme, visitor, count
Published: 2020-07-21 01:50:00

### 😃👋 Hey guys here I will explain how to show visitor counter on your git hub profile.
🌟[My github Profile Page] (https://github.com/groverception)
<p align="center">
  <img src="https://media.giphy.com/media/APqEbxBsVlkWSuFpth/giphy.gif" width="200px">
</p>
🔰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](https://dev-to-uploads.s3.amazonaws.com/i/c24dmc9uaxypmte3s5wc.PNG)
🔰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: ⬇️

```html
<img height="64px" src="https://cdn.svgporn.com/logos/javascript.svg">
```

>when you inspect, it becomes: ⬇️

```html
<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>
```
>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](https://dashboard.heroku.com/)
🆓 The free tier will provide you Postgres DB, node js application hosting, and a public URL: 😃 [My Counter](https://still-brushlands-82734.herokuapp.com/countercheck)

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
```Javascript
      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!❤️ 😃 👍
```markdown
![](https://still-brushlands-82734.herokuapp.com/countercheck)
```

___




❤️ 😃 👍
Note: Hey guys this is my first post, please support and give your views for improvement🔨