Create badges using node.js

Hey everyone, Lately, I encountered an problem and the solution was to create the badge of my own. Since I was using node.js and I searched for it. Finally, swig was the answer to me. So here is the source of code that will help you to create badges of your own without any hassles.

So, first of all, you need to create a badge svg template. Below is the content of the file that you might want to save it in a file called “badge.svg”

{% set leftWidth = left.length * 10 %}
{% set rightWidth = right.length * 13.5 %}
{% set totalWidth = leftWidth + rightWidth - 10 %}
<svg xmlns="http://www.w3.org/2000/svg" width="{{ totalWidth }}" height="18">
  <linearGradient id="smooth" x2="0" y2="100%">
    <stop offset="0"  stop-color="#fff" stop-opacity=".7"/>
    <stop offset=".1" stop-color="#aaa" stop-opacity=".1"/>
    <stop offset=".9" stop-color="#000" stop-opacity=".3"/>
    <stop offset="1"  stop-color="#000" stop-opacity=".5"/>
  </linearGradient>

  <mask id="round">
    <rect width="{{ totalWidth }}" height="18" rx="4" fill="#fff"/>
  </mask>

  <g mask="url(#round)">
    <rect width="{{ leftWidth }}" height="18" fill="#555"/>
    <rect x="{{ leftWidth }}" width="{{ rightWidth }}" height="18" fill="{{ color }}"/>
    <rect width="{{ totalWidth }}" height="18" fill="url(#smooth)"/>
  </g>

  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">
    <text x="{{ leftWidth /2+1 }}" y="14" fill="#010101" fill-opacity=".3">{{ left }}</text>
    <text x="{{ leftWidth /2+1 }}" y="13">{{ left }}</text>
    <text x="{{ leftWidth + rightWidth /2.5-1 }}" y="14" fill="#010101" fill-opacity=".3">{{ right }}</text>
    <text x="{{ leftWidth + rightWidth /2.5-1 }}" y="13">{{ right }}</text>
  </g>
</svg>

And secondly, create a js file with the dependency of “swig“. So I installed it in my node application using

npm install swig

And finally, created a js file and added this and ran this js file to create a badge file.

var swig = require("swig");
var badgeValue = {
    left: "Left",
    right: "Right";
    color: "Red";
}
var badge = swig.renderFile("./badge.svg", badgeValue);

const fs = require("fs");
const file = fs.createWriteStream("file-badge.svg");
file.write(badge);

And there you go, you have a new file created.