tag api working
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
BadgeDex
|
||||
|
||||
# BadgeDex API – URL Paraméterek
|
||||
## Badge
|
||||
|
||||
Az alábbi paraméterekkel szabályozhatod a `/badge` végpont működését:
|
||||
|
||||
@@ -40,4 +41,42 @@ Az alábbi paraméterekkel szabályozhatod a `/badge` végpont működését:
|
||||
|
||||
---
|
||||
|
||||
## Tag
|
||||
|
||||
Az alábbi paraméterekkel szabályozhatod a `/tag` végpont működését:
|
||||
|
||||
| Paraméter | Kötelező | Alapértelmezett érték | Leírás | Példa értékek |
|
||||
|-------------|----------|-----------------------|----------------------------------------------------------------------------------------|------------------------------|
|
||||
| `tag` | Igen |`badgedex` | A tag tartalma(kisbetű, kötőjellel). | `github`, `docker`, `nginx` |
|
||||
| `label` | Nem |`BadgeDex` | A tag label tartalma. | `MyApp`, `Status` |
|
||||
| `style` | Nem |`rect` | A badge stílusa. rect négyzetes, flat lekerekitett sarkok | `rect`, `flat` |
|
||||
| `bgtag` | Nem |`none` | Icon Háttérszín (hex vagy CSS színnév). Alapértelmezetten átlátszó. | `#fff`, `#222`, `red` |
|
||||
| `bglabel` | Nem |`none` | Label Háttérszín (hex vagy CSS színnév). Alapértelmezetten átlátszó. | `#fff`, `#222`, `red` |
|
||||
| `color` | Nem |`#000000` | Szöveg színe (hex vagy CSS színnév). Harmonizál az icon szinével ha nem kérünk külön. | `#333`, `white` |
|
||||
| `size` | Nem |`24` | Ikon (és badge) magassága pixelben. | `16`, `32`, `64` |
|
||||
| `labelpos` | Nem | `right` | Szöveg pozíciója az ikonhoz képest: `right`, `left`, `above`, `below`. | `left`, `above` |
|
||||
| `fontweight`| Nem | `normal` | Szöveg vastagsága (`normal`, `bold`, `lighter`, szám is lehet pl. `600`). | `bold`, `600` |
|
||||
|
||||
## Példák
|
||||
|
||||
- **Alap badge:**
|
||||
`/badge`
|
||||
|
||||
- **React ikon, label, size: 64, font: bold, fehér label szöveg, sárga label háttérszín, piros ikon háttérszín, label jobbra**
|
||||
`/badge?icon=react&label=React%20expert%20level&size=64&fontweight=bold&color=white&bgicon=red&bglabel=yellow&labelpos=right`
|
||||
|
||||
- **GitHub ikon, piros label háttér, fehér szöveg:**
|
||||
`/badge?icon=github&bglabel=red&color=white`
|
||||
|
||||
- **Szöveg balra, ikon jobbra:**
|
||||
`/badge?labelpos=left`
|
||||
|
||||
- **Szöveg az ikon fölött, félkövér betű:**
|
||||
`/badge?labelpos=above&fontweight=bold`
|
||||
|
||||
- **Nagyobb ikon és szöveg:**
|
||||
`/badge?size=48`
|
||||
|
||||
---
|
||||
|
||||
A badge SVG formátumban tér vissza, így közvetlenül beilleszthető HTML-be vagy Markdown
|
||||
+68
-1
@@ -2,7 +2,74 @@ const router = require('express').Router();
|
||||
|
||||
|
||||
router.get('/tag', (req, res) => {
|
||||
res.status(200).send('OK');
|
||||
const {
|
||||
tag = 'badgedex',
|
||||
label = 'BadgeDex',
|
||||
style = 'rect', // badge stílusa: rect (négyzetes), flat (lekerekített sarkok)
|
||||
bgtag = 'none', // ikon háttérszín, alap: világosszürke
|
||||
bglabel = 'none', // label háttérszín, alap: sötétszürke
|
||||
color = '#000000',
|
||||
size = 24,
|
||||
labelpos = 'right',
|
||||
fontweight = 'normal',
|
||||
} = req.query;
|
||||
|
||||
const fontFamily = "Verdana,Geneva,DejaVu Sans,sans-serif";
|
||||
const fontWeight = fontweight;
|
||||
|
||||
// A flat badge esetén a szöveg középre igazítása miatt a szöveg pozícióját módosítjuk
|
||||
//const labelX = labelpos === 'left' ? 165 : 455;
|
||||
//const tagX = labelpos === 'left' ? 455 : 165;
|
||||
|
||||
// A méretet pixelben adjuk meg, alapértelmezett 24px
|
||||
const textPadding = Number(5);
|
||||
const badgeSize = Number(size);
|
||||
const badgeFontSize = Math.round(badgeSize * 0.6); // A szöveg mérete a badge méretéhez igazítva
|
||||
const tagTextLength = tag.length * (badgeFontSize * 0.7); // A tag szöveg hossza
|
||||
const labelTextLength = label.length * (badgeFontSize * 0.8); // A label szöveg hossza
|
||||
const badgeWidth = tagTextLength + labelTextLength + 10; // A badge szélessége a szövegek hosszától függően
|
||||
const tagTextX = textPadding;
|
||||
const labelTextX = ( 2 * tagTextX ) + tagTextLength;
|
||||
|
||||
const rect = `
|
||||
<g shape-rendering="crispEdges">
|
||||
<rect width="${tagTextLength+textPadding}" height="${badgeSize}" fill="${bgtag}"/>
|
||||
<rect x="${tagTextLength}" width="${labelTextLength+(textPadding*2)}" height="${badgeSize}" fill="${bglabel}"/>
|
||||
</g>
|
||||
<g fill="#fff" text-anchor="start" font-family="${fontFamily}" text-rendering="geometricPrecision" font-size="${badgeFontSize}">
|
||||
<text x="${tagTextX}" y="${badgeFontSize + textPadding}" fill="${color}">${tag.toLowerCase()}</text>
|
||||
<text x="${labelTextX}" y="${badgeFontSize + textPadding}" fill="${color}" font-weight="${fontWeight}">${label.toUpperCase()}</text>
|
||||
</g>`;
|
||||
|
||||
|
||||
const flat = `
|
||||
<linearGradient id="s" x2="0" y2="100%">
|
||||
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
|
||||
<stop offset="1" stop-opacity=".1"/>
|
||||
</linearGradient>
|
||||
<clipPath id="r">
|
||||
<rect width="62" height="20" rx="3" fill="#fff"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#r)">
|
||||
<rect width="31" height="20" fill="#555"/>
|
||||
<rect x="31" width="31" height="20" fill="#007ec6"/>
|
||||
<rect width="62" height="20" fill="url(#s)"/>
|
||||
</g>
|
||||
<g fill="#fff" text-anchor="middle" font-family="${fontFamily}" text-rendering="geometricPrecision" font-size="110" font-weight="${fontWeight}">
|
||||
<text aria-hidden="true" x="165" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">${tag}</text>
|
||||
<text x="165" y="140" transform="scale(.1)" fill="#fff" textLength="210">${tag}</text>
|
||||
<text aria-hidden="true" x="455" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">${label}</text>
|
||||
<text x="455" y="140" transform="scale(.1)" fill="#fff" textLength="210">${label}</text>
|
||||
</g>`;
|
||||
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${badgeWidth}" height="${badgeSize}" role="img" aria-label="${tag}: ${label}">
|
||||
<title>${tag}: ${label}</title>
|
||||
${style === 'rect' ? rect : flat}
|
||||
</svg>`;
|
||||
|
||||
res.setHeader('Content-Type', 'image/svg+xml');
|
||||
res.send(svg);
|
||||
//res.status(200).send('OK');
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
Reference in New Issue
Block a user