A badge generator service to count visitors of your markdown file.

Overview

cooltext399899734189845

Github Visitors Badge visitor badge

A badge generator service to count visitors of your markdown file.

Hello every one!

In this post, I will tell you the story of me to creating the github-visitors-badge, it's a svg image that can count your visitors for your GitHub README.md, issues, PRs in just one line markdown code.

Why

All the story starting from I migrate all my blog posts from Hexo GitHub Pages to a GitHub issue based repository. After a painful migration, I found that there is no visitor tracking for the repository, though basically I myself am the only one visitor in most time :( , I still want a visitor counting service for my every GitHub Issue and the README.

How

After a lot of searching, brainstorming, prototyping, I put my eye on the little badge in many other repository. Those badges can show us:

  • How much stars of the repository
  • How much opened issues
  • How much PRs
  • ...

and all the badges is just a svg image file with a dynamic content in it.

After more searching, I found the pybadge library which will generate a GitHub badge style dynamically with a very simple api.

So I can setup a python server, receive a svg file request, generate a dynamic svg file, return it, so it will display on the README.md.

What else? A database to store the previous count of each page so that in the next time the same request from the page received, I can increment 1 based on the previous count.

Here it is: https://countapi.xyz/, a free counting API allows you to create simple numeric counters. IaaS, Integer as a Service.

CountAPI is a perfect chosen for this use case, and it's easy to use, I don't need to prepare a database(SQLite, MySQL, etc.), I just send a http request to the API, and can get the incremented number.

Also can avoid concurrent updating issue if too many visitors to your page in the same time, it will count them correctly, because the CountAPI is based on Redis.

So, for now, we have all we needed, just coding:

Readme Card

Some tricks

Why you have to pass a page_id as a query parameter? For the first version, I plan to use the Referrer header in http request which is more convenient but GitHub proxy all the image request via its camo image server:

Your browser -> Github Camo -> My server

But Camo does not pass the Referrer header to my server for some reason, so I change to the query parameter solution.

How to deal with the image cache? As you know, browser often caches images and in our case GitHub Camo also caches images.

Cache is good for us in most time, but for a badge to count visitor, it is a disaster because if the previous badge image are cached, there is no new request to my server and the count will not have chance the increment until the cache is invalid, that's not what we want.

We want every time every one visitor our README.md the count will increment 1, so I did a trick thing:

Disable cache by adding a response header: 'Cache-Control': 'no-cache,max-age=0'

Set a passed expire time to 10 minutes AGO of current time: 'Expires': <10 minutes ago>

That's it, after this little tricks every time you visitor the README.md, the browser(and camo) will know that the cached image is invalidated then send a request to my server to get the latest count.

Examples:

  • Default Style
![visitor badge](https://github-visitors-badge.glitch.me/badge?page_id=KisaraPesanjithPerera.GithubVisitorsBadge)
  • Customized Left Text (default is visitors)
![visitor badge](https://github-visitors-badge.glitch.me/badge?page_id=KisaraPesanjithPerera.GithubVisitorsBadge&left_text=MyPageVisitors)
  • Customized Left Text With A Space Between Words
![visitor badge](https://github-visitors-badge.glitch.me/badge?page_id=KisaraPesanjithPerera.GithubVisitorsBadge&left_text=My%20Page%20Visitors)
  • Customzied Colour
![visitor badge](https://github-visitors-badge.glitch.me/badge?page_id=KisaraPesanjithPerera.GithubVisitorsBadge&left_color=red&right_color=green) 
  • Customized Colour And Left Text
![visitor badge](https://github-visitors-badge.glitch.me/badge?page_id=KisaraPesanjithPerera.GithubVisitorsBadge&left_color=red&right_color=green&left_text=HelloVisitors)
  • Customized Colour And A Space Between Words In Left Text
![visitor badge](https://github-visitors-badge.glitch.me/badge?page_id=KisaraPesanjithPerera.GithubVisitorsBadge&left_color=red&right_color=green&left_text=Hello%20Visitors)

CONTRIBUTING

Contributions are very much appreciated!

Pull requests should be based on and submitted to the "main" branch

Please raise an issue to discuss what you plan to implement or change before you start if it is going to involve a lot of work on your part.

Please keep pull requests specific, do not make many disparate changes or new features in one request. A separate pull request for each feature change is preferred.

Please ensure your changes work in Python 3.7+

Please add your github Username to the AUTHORS file

Powered By

Devs & Contributors

Thanks to everyone who starred github visitors badge, That is the greatest pleasure we have !

Support :

License

Code released under The GNU General Public License.

Owner
Kɪꜱᴀʀᴀ Pᴇꜱᴀɴᴊɪᴛʜ Pᴇʀᴇʀᴀ 〄
Codes Learner From Sri Lanka 🇱🇰✌️I’m Not Trying To Be Different. To Me, I’m Just Being Myself & My Style ♥️
Kɪꜱᴀʀᴀ Pᴇꜱᴀɴᴊɪᴛʜ Pᴇʀᴇʀᴀ 〄
Webb-Tracker-Bot - This is a discord bot that displays current progress of the James Webb Space Telescope.

Webb-Tracker-Bot - This is a discord bot that displays current progress of the James Webb Space Telescope.

Copperbotte 1 Jan 05, 2022
Discord Account Generator that will create Account with hCaptcha bypass. Using socks4 proxies

Account-Generator [!] This was made for education. Please use socks4 proxies for nice experiences. [!] Please install these modules - "pip3 install ht

RyanzSantos 10 Feb 23, 2022
PokemonGo-Bot - The Pokemon Go Bot, baking with community.

PokemonGo-Bot PokemonGo-Bot is a project created by the PokemonGoF team. Since no public API available for now, a patch to use HASH-Server was applied

3.8k Jan 08, 2023
A telegram media to gofile bot

GoFile-Bot A telegram media to gofile bot Made with Python3 (C) @FayasNoushad Copyright permission under MIT License License - https://github.com/Fay

Fayas Noushad 37 Nov 14, 2022
Code release for Transferable Curriculum for Weakly-Supervised Domain Adaptation (AAAI2019)

TCL Code release for Transferable Curriculum for Weakly-Supervised Domain Adaptation (AAAI2019) Dataset Office-31 dataset, with 0.4 label noise Requir

THUML @ Tsinghua University 17 Jul 07, 2022
Frwdit-V1 - A Simple Bot can copy any media to a private channel provided

📠 Auto Forward V2 A Simple Bot can copy any media to a private channel provided

FUCK OFF ANE 3 Dec 03, 2022
A corona statistics and information telegram bot.

A corona statistics and information telegram bot.

Fayas Noushad 15 Oct 21, 2022
使用appium进行抖音粉丝的自动化获取

DYfans 使用appium进行抖音粉丝的自动化获取 工具: appium appium inspector Fiddler 夜神模拟器或者安卓手机 mitmdump mitmproxy 推荐使用安卓5.0夜神模拟器 库: appium selenium json 环境: jdk 安卓sdk 安卓

kaba 0 Mar 25, 2022
Coinbase Pro API interface framework and tooling

neutrino This project has just begun. Rudimentary API documentation Installation Prerequisites: Python 3.8+ and Git 2.33+ Navigate into a directory of

Joshua Chen 1 Dec 26, 2021
Telegram music & video bot direct play music

Telegram music & video bot direct play music

noinoi-X 1 Dec 28, 2021
PyDiscord, a maintained fork of discord.py, is a python wrapper for the Discord API.

discord.py A modern, easy to use, feature-rich, and async ready API wrapper for Discord written in Python. The Future of discord.py Please read the gi

Omkaar 1 Jan 16, 2022
A telegram user and chat info extractor with pyrogram python module

Made with Python3 (C) @FayasNoushad Copyright permission under MIT License License - https://github.com/FayasNoushad/Telegram-Info/blob/main/LICENSE

Fayas Noushad 8 Dec 22, 2021
Token-gate Notion pages

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

John 8 Oct 13, 2022
Python Twitter API

Python Twitter Tools The Minimalist Twitter API for Python is a Python API for Twitter, everyone's favorite Web 2.0 Facebook-style status updater for

2.9k Dec 29, 2022
Wrapper for Between - 비트윈을 위한 파이썬 라이브러리

PyBetween Wrapper for Between - 비트윈을 위한 파이썬 라이브러리 Legal Disclaimer 오직 교육적 목적으로만 사용할수 있으며, 비트윈은 VCNC의 자산입니다. 악의적 공격에 이용할시 처벌 받을수 있습니다. 사용에 따른 책임은 사용자가

1 Mar 15, 2022
Tomli is a Python library for parsing TOML. Tomli is fully compatible with TOML v1.0.0.

Tomli A lil' TOML parser Table of Contents generated with mdformat-toc Intro Installation Usage Parse a TOML string Parse a TOML file Handle invalid T

Taneli Hukkinen 313 Dec 26, 2022
DadBot 2.0 is an interactive bot that reflects the personality of a typical dad

DadBot 2.0 is an interactive bot that reflects the personality of a typical dad! You can start by running main while all directories are maintained as they are on this GitHub.

1 Dec 04, 2021
A script written in python3 for bruteforcing Gmail accounts.

GmailBruteforce Made for bruteforcing gmail accounts. It needs Less Secure Apps setting turned on in order to work. Installation For windows git clone

Shinero 4 Sep 16, 2022
Automatically mass follows tons of NameMC profiles.

Automatically mass follows tons of NameMC profiles. (Creates REAL traffic to your profile)

Jam 3 Jun 29, 2022
Powerful Telegram userbot to turn your PROFILE PICTURE & LAST NAME into a real time clock & to change your BIO automatically.

DATE_TIME_USERBOT-TeLeTiPs Powerful Telegram userbot to turn your PROFILE PICTURE & LAST NAME into a real time clock & to change your BIO automaticall

53 Jan 05, 2023