0
97
VisualizaçõesCreate a Github badge
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.
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?
1 Respostas
Responde à pergunta0
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: