Hugo and dynamic badges
Introduction
I have always liked the badges icons that we can see in a lot of websites, for website status, code status, and so on. They provide some usefull info in a quick glance. So another rainy day at home, I took the opportunity to look at how to add them. Crazy thing is, they are actually bringing dynamic infos to this static website ! Here are my findings.
Badge generation websites
There are actually several websites that are giving ways to generate those badges. Those websites are proposing some badges for well-known sites (Git-Hub, Jenkins, …). I have look on those 2 :
I have no idea which one is the best, but while reading the documentation of Shields.IO, I ve found the possibility to call any API returning a json payload, and that triggered my curiosity.
I thought a good idea would be to try showing the Crypto prices, as it changing a lot, it would be easier for me to test.
Crypto API
As Crypto prices seemed to be a good idea, I looked for a free API. I ve found out CoinGecko to provide a well documented API, also providing a Swagger documented API. Next step, query the API and output the expected json format for Shields.IO to generate the badge. To discover the list of coins, use the following :
https://api.coingecko.com/api/v3/coins/list
API Generator
While looking for an easy way to create an API endpoint available at all time, I have discovered Napkin.IO . That websites offers a free way to host up to 3 endpoints.
So I have created the following script and deployed it :
|
|
To find out which logo to use, Shields.IO uses Simple Icons . The name of the icon name is available in that list. The interface allows to run the query, showing directly the payload received in json :
{
"color": "green",
"label": "EUR",
"logoColor": "yellow",
"message": "1.563,1",
"namedLogo": "ethereum",
"schemaVersion": 1
}
Hugo integration
The last step is to show the badge in one of the page generated in Hugo.
I wanted to see the rates at all time, so I ve just added it in the footer.
In the footer.html
file at thew bottom, add the code below (in my case after the {{ partial "footer.html" . }}
):
|
|
And to add it to a markdown content, use the following structure :
![](https://img.shields.io/endpoint?style=plastic&url=https://{NapkinAccount}.npkn.net/{FunctionName})
Important note
Badges are cached, trying to refresh them too fast or too often will have no visible results. For Shields.IO, the badges are refreshed after min 6 minutes.