JSON Format to enhance customization with shields.io

[aptyp4uk1337]

Hi, many people have already mentioned this issue regarding badge customization, and the fact that it depends on the library used to render the badge.

I suggest simply adding a JSON format that will return the number of views and update accordingly.

For example, something like https://komarev.com/ghpvc/?username=ApTyp4uK1337&format=json

Response:

{
  "views": "1337"
}

So, by using the features of shields.io (https://shields.io/badges/dynamic-json-badge), we can create a customizable badge.

https://img.shields.io/badge/dynamic/json?url=https://komarev.com/ghpvc/?username=ApTyp4uK1337&format=json&query=$.views&style=flat&label=Profile views

This will resolve the issue with the styles, the label color, and the icon placement all at once.

[antonkomarev]

AFAIK shields io using caching, so it wouldn't count increments correctly. When I tried it on start of the project I didn't found a solution, that's why I made it this way.

[aptyp4uk1337]

AFAIK shields io using caching, so it wouldn't count increments correctly. When I tried it on start of the project I didn't found a solution, that's why I made it this way.

If I understand correctly, yes, caching does exist. But the views must be read, and there will be a delay in updating.

There is also some parameter:

cacheSeconds string
HTTP cache lifetime (rules are applied to infer a default value on a per-badge basis, any values specified below the default will be ignored).
Example: 3600

[antonkomarev]

If it's cached, they are not doing request to the API, because it's response cached. So it will increment only when cache will be removed.

[aptyp4uk1337]

If it's cached, they are not doing request to the API, because it's response cached. So it will increment only when cache will be removed.

Yeah, you're right. What about using a proxy? I just tried that, and it works.

counter.php

$file = 'counter.txt';

if (!file_exists($file)) {
  file_put_contents($file, 0);
}

$count = (int)file_get_contents($file);
$count++;

file_put_contents($file, $count, LOCK_EX);

header('Content-Type: application/json');
echo json_encode([
  "views" => (string)$count
]);

index.php

$timestamp = time();

$badgeUrl = "https://img.shields.io/badge/dynamic/json"
  . "?url=https://fancy-dashing-impala.ngrok-free.app/counter.php"
  . "&query=$.views"
  . "&style=flat"
  . "&label=Profile_views"
  . "&cacheSeconds=1"
  . "&t=" . $timestamp;

$svg = file_get_contents($badgeUrl);

if ($svg === false) {
  http_response_code(500);
  echo 'Error loading badge';
  exit;
}

header("Content-Type: image/svg+xml");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");

echo $svg;

We retrieve the number of visits from the JSON, pass it to Shields, and add a timestamp to ensure the request is unique. We then output the SVG generated by Shields.

[antonkomarev]

I'm not sure it's allowed by the shields.io, because we will ignore their cache and increase traffic. I have another one idea in my mind, but don't really want to spend a lot of time for this project. It's corrupted) I'm using https://yhype.me

[aptyp4uk1337]

idk, I tried creating my own request pool in badges/poser ¯_(ツ)_/¯

badges/poser#117