Dynamic Badges with Shields.io and Runkit

Shields.io Github page with many badges
Runkit’s instant API feature described on their home page.
Runkit’s instant API feature
const endpoint = require("@runkit/runkit/json-endpoint/1.0.0")
const request = require("request") // peer dependency
const requestPromise = require("request-promise")
const queryTypes = ["lines","functions","statements","branches"]
const url = "https://raw.githubusercontent.com/nodes777/flower-game-phaser3/master/coverage/coverage-summary.json"
endpoint(module.exports, async function(req)
try {
var unparsed = await requestPromise(url)
var json = JSON.parse(unparsed)
} catch(e) {
return {error: "Runkit could not retrieve page"}

const queryType = req.query.type
const formattedLabel = queryType + " coverage"

if (queryTypes.includes(queryType)){
const percentage = json.total[queryType].pct+"%"
return {
"schemaVersion": 1,
"label": formattedLabel,
"message": percentage ,
"color": "orange",
} else {
return {
"schemaVersion": 1,
"label": "You need a valid queryType",
"message": queryType ,
"color": "red",
"schemaVersion": 1,
"label": "A label!",
"message": "Whatever text you want to render, for me, this is my percent coverage",
"color": "orange"
The Shields.io endpoint page with the url from Runkit as the url to generate the badge
The updated endpoint page with url to generate the badge
Badges: “code style: prettier” “lines 50.43%”, “statements 50.43%”, “functions 35.51%”, “buddy.works passed”, License: GPL v3
All my badges!




Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introduction to building Ionic 6 Angular App with NX monorepo (Part 1)

How to Build a Multi-Step Form Using Vue.js

Caching Google and Facebook Login Authentication Data Locally in a React-Native & Redux Application

Reap more of what you sow, no?


Best Frontend Web Development Tools and Frameworks for 2020

Front-End Web Development Tools & Frameworks For 2020

The Koa.js Framework: An Overview

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taylor Nodell

Taylor Nodell

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

More from Medium

React Code Editor Application

E2E Testing a Video Game

Use Axios with React

What is Koa.js