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 β€’ Edited on

6 3

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πŸ”¨

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
annihil profile image
a β€’

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay