0
94
VistasCrear una insignia de Github
Quiero crear una insignia para Github README (como esta , por ejemplo). Creé una función para obtener el valor GET de la URL usando JavaScript y lo puse en el SVG, eso funciona cuando lo probé en local pero si lo pongo en un archivo Markdown no cambia el número.
índice.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>secuencia de comandos.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(); });Salida en el navegador: salida correcta
Salida en rebaja (correcta): salida incorrecta
¿Cómo puedo arreglarlo?
1 Respuestas
Responde la pregunta0
Puede crear una función sin servidor utilizando la plantilla svg y pupa.
Archivo SVG:
...svg <tspan x="162.5" text-anchor="middle" y="45.891675" font-size="40" id="years-number">{years}</tspan> ...svgCódigo del lado del servidor:
// 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 })) }Usé Vercel para implementar la función sin servidor. También hay otras formas además de Vercel.
Enlace para responder: https://replit.com/@Programmerraj/serverless-api#api/index.js
Enlace al ejemplo en vivo: https://serverless-api-ebon.vercel.app/api?years=6 (cambiar years para que sea cualquier cosa).
Enlace al repositorio de GitHub: https://github.com/ChocolateLoverRaj/serverless-api .
Vista previa escrita en markdown en esta respuesta: