Create a Github badge

Question

I want to create a badge for Github README (like this for example). I created a function to get the GET value from URL using JavaScript and put it in the SVG, that works when I tried it in local but if I put it in a Markdown file it doesn't change the number.

![No](http://luigitest.altervista.org/widget/font.svg?years=9)

index.svg:

<svg width="200" height="75" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
  

<g>  
  <rect x="0" y="0" width="125" height="75" style="fill:#F84949F5"></rect>
  <text x="0" y="37.5" font-family="Segoe UI" font-size="16"  font-weight="bold" fill="white">
    <tspan x="62.5" text-anchor="middle" dy="-3.5%">I started</tspan>
    <tspan x="62.5" text-anchor="middle" dy="25%">programming</tspan>
  </text>
  <rect x="124" y="0" width="75" height="75" style="fill:#F84949"></rect>
  <text x="124" y="75" font-family="Segoe UI" font-size="13" fill="white" font-weight="bold">
    <tspan x="162.5" text-anchor="middle" y="45.891675" font-size="40" id="years-number">5</tspan>
    <tspan x="162.5" text-anchor="middle" y="67.5"  font-weight="bold">years ago</tspan>
  </text>
</g>  
<script xlink:href="script.js" />
</svg>

script.js:

function changeNumber() {
    document.getElementById("years-number").textContent = getValue;
}

let getValue;

window.addEventListener("load", function () {
    let name="years";
    if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      getValue = decodeURIComponent(name[1]);
  
    changeNumber();
});

Output in the browser: correct output

Output in markdown (correct one): wrong output

How can I fix it?

github is https, I don't think you can load a remote resource over http://, your get mixed content issues, you may need to add ssl — Lawrence Cherone, Sep 13 '21 at 14:31
try putting the svg inside the svg element like so: https://stackoverflow.com/questions/5378559/including-javascript-in-svg — enxaneta, Sep 13 '21 at 14:42
I tried using a website with SSL but nothing changes @LawrenceCherone — chillin, Sep 13 '21 at 14:48
Not even putting js inside the svg element it works @enxaneta — chillin, Sep 13 '21 at 14:49
getting any errors? *not works* is not really helpful is the SVG even showing? — Lawrence Cherone, Sep 13 '21 at 14:51
@LawrenceCherone When I add markdown code it shows me the svg with the default number (5) without changing it by interting the number inside the GET variable. — chillin, Sep 13 '21 at 14:56
I would imagine that markdown is loading the SVG as an image i.e. via an image, img or as a background-image. Script doesn't run if you do it that way. — Robert Longson, Sep 13 '21 at 16:03
yes, all badges for github are SVG loaded as an image but they are dynamic and their content changes, mine is not @RobertLongson — chillin, Sep 13 '21 at 17:32
@programmerRaj I write the code at the begin of the thread: `![No](http://luigitest.altervista.org/widget/font.svg?years=9)` — chillin, Sep 13 '21 at 17:33
script.js is inside index.svg so it will not be executed. The other icons must work differently. Maybe they use SMIL or CSS animations. — Robert Longson, Sep 13 '21 at 18:53
@programmerRaj but using this method there will not be any preview — chillin, Sep 14 '21 at 13:41
@Vector what do you mean by 'preview'? Like when you are editing the html file? — programmerRaj, Sep 14 '21 at 15:39
@programmerRaj the "preview" that comes out by using that code markdow — chillin, Sep 14 '21 at 17:41

programmerRaj · Accepted Answer · 2021-09-14T18:21:59.753

0

You can create a serverless function using template svg and pupa.

Svg file:

...svg
    <tspan x="162.5" text-anchor="middle" y="45.891675" font-size="40" id="years-number">{years}</tspan>
...svg

Server side code:

// https://stackoverflow.com/questions/69164294/create-a-github-badge
import pupa from 'pupa'
import { readFileSync } from 'fs'
import { join } from 'path'
import { dirname } from 'dirname-filename-esm'

const __dirname = dirname(import.meta)
const template = readFileSync(join(__dirname, '../badge.svg'), 'utf8')

export default (req, res) => {
  let { years } = req.query
  if (typeof years !== 'string') return res.status(400).end()
  res.setHeader('Content-Type', 'text/xml')
  res.end(pupa(template, { years }))
}

I used Vercel to deploy the serverless function. There are ways other than Vercel too.

Link to repl: https://replit.com/@Programmerraj/serverless-api#api/index.js

Link to live example: https://serverless-api-ebon.vercel.app/api?years=6 (change years to be anything).

Link to GitHub repo: https://github.com/ChocolateLoverRaj/serverless-api.

Preview written in markdown in this answer: preview

edited Sep 14 '21 at 18:21

answered Sep 14 '21 at 17:54

programmerRaj

1,810
2
9
19

I would like to add a second parameter (color) but doing ```let { years } = req.query.years; let color = req.query.color``` (and than do ```const template = readFileSync(join(__dirname, '../'+color+'.svg'), 'utf8');``` gives me problems like ```The character encoding of the plain text document was not declared```. I also tried other methods to get the parameters (https://stackoverflow.com/a/901144/15963931) and declare the variable 'template' in different ways with an if but it still doesn't work. Any ideas on how to fix this? – chillin Sep 22 '21 at 17:50
Why do you need a seperate file for every color? Why not just put the color as part of the template. – programmerRaj Sep 22 '21 at 18:14
It's a good idea but the error remains – chillin Sep 22 '21 at 18:41

Create a Github badge

1 Answers1