echomike/badgedex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

icon and label text color harmonize

Browse Source
This commit is contained in:
echomike
2025-07-08 13:42:34 +02:00
parent ef97c4b752
commit b1485ba3d4
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -11,7 +11,7 @@ Az alábbi paraméterekkel szabályozhatod a `/badge` végpont működését:
| `icon` | `portainer` | A SimpleIcons ikon neve (kisbetű, kötőjellel). | `github`, `docker`, `nginx` |
| `label` | `Portainer` | A badge-en megjelenő szöveg. | `MyApp`, `Status` |
| `bg` | `#f0f0f0` | Háttérszín (hex vagy CSS színnév). | `#fff`, `#222`, `red` |
| `color` | `#000000` | Szöveg színe (hex vagy CSS színnév). | `#333`, `white` |
| `color` | `#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` | `24` | Ikon (és badge) magassága pixelben. | `16`, `32`, `64` |
| `labelpos` | `right` | Szöveg pozíciója az ikonhoz képest: `right`, `left`, `above`, `below`. | `left`, `above` |
| `fontweight`| `normal` | Szöveg vastagsága (`normal`, `bold`, `lighter`, szám is lehet pl. `600`). | `bold`, `600` |
index.js
+23 -4
View File
@@ -24,6 +24,25 @@ app.get('/badge', async (req, res) => {
}
const iconSVG = iconResponse.data;
// Ha a color paraméter nincs megadva, próbáljuk kinyerni az ikon színét
let effectiveColor = color;
if (!req.query.color || req.query.color === '#000000') {
// Próbáljuk kinyerni az ikon fő színét a SimpleIcons API-ból
try {
const iconMetaUrl = `https://cdn.simpleicons.org/${icon}`;
const iconMetaResp = await axios.get(iconMetaUrl, { responseType: 'text' });
// Kikeressük az első "fill=" attribútumot
const match = iconMetaResp.data.match(/fill="([^"]+)"/);
if (match && match[1]) {
effectiveColor = match[1];
} else {
effectiveColor = "#222"; // fallback
}
} catch {
effectiveColor = "#222";
}
}
// Badge méretek
const padding = 10;
const iconSize = parseInt(size);
@@ -44,25 +63,25 @@ app.get('/badge', async (req, res) => {
height = padding * 2 + iconSize + textPadding + fontSize;
if (labelpos === 'above') {
// Szöveg felül, ikon alul
textElem = `<text x="${width / 2}" y="${padding + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
textElem = `<text x="${width / 2}" y="${padding + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
iconGroup = `<g transform="translate(${(width - iconSize) / 2}, ${padding + fontSize + textPadding})">${iconSVG}</g>`;
} else {
// Szöveg alul, ikon felül
iconGroup = `<g transform="translate(${(width - iconSize) / 2}, ${padding})">${iconSVG}</g>`;
textElem = `<text x="${width / 2}" y="${padding + iconSize + textPadding}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" text-anchor="middle" dominant-baseline="hanging">${label}</text>`;
textElem = `<text x="${width / 2}" y="${padding + iconSize + textPadding}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="hanging">${label}</text>`;
}
} else if (labelpos === 'left') {
width = padding * 2 + iconSize + textPadding + textWidth;
height = Math.max(iconSize + padding * 2, fontSize + padding * 2);
// Szöveg balra, ikon jobbra (függőleges közép)
textElem = `<text x="${padding}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" alignment-baseline="middle" dominant-baseline="middle">${label}</text>`;
textElem = `<text x="${padding}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" alignment-baseline="middle" dominant-baseline="middle">${label}</text>`;
iconGroup = `<g transform="translate(${padding + textWidth + textPadding}, ${(height - iconSize) / 2})">${iconSVG}</g>`;
} else {
width = padding * 2 + iconSize + textPadding + textWidth;
height = Math.max(iconSize + padding * 2, fontSize + padding * 2);
// Alapértelmezett: ikon balra, szöveg jobbra (függőleges közép)
iconGroup = `<g transform="translate(${padding}, ${(height - iconSize) / 2})">${iconSVG}</g>`;
textElem = `<text x="${padding + iconSize + textPadding + textWidth / 2}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
textElem = `<text x="${padding + iconSize + textPadding + textWidth / 2}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
}
// SVG badge string összefűzéssel, szöveg árnyékkal