diff --git a/README.md b/README.md index 3cd8bc0..e6410e5 100644 --- a/README.md +++ b/README.md @@ -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 \ No newline at end of file diff --git a/src/api/tag.js b/src/api/tag.js index f968742..a91b3bd 100644 --- a/src/api/tag.js +++ b/src/api/tag.js @@ -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 = ` + + + + + + ${tag.toLowerCase()} + ${label.toUpperCase()} +`; + + + const flat = ` + + + + + + + + + + + + + + + ${tag} + + ${label} +`; + +const svg = ` + ${tag}: ${label} + ${style === 'rect' ? rect : flat} +`; + + res.setHeader('Content-Type', 'image/svg+xml'); + res.send(svg); + //res.status(200).send('OK'); }); module.exports = router; \ No newline at end of file