tag api working

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

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 = `
+<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;