helmet added, box real width/height
This commit is contained in:
@@ -10,7 +10,8 @@ Az alábbi paraméterekkel szabályozhatod a `/badge` végpont működését:
|
||||
|-------------|----------|-----------------------|----------------------------------------------------------------------------------------|------------------------------|
|
||||
| `icon` | Igen |`simpleicons` | A SimpleIcons ikon neve (kisbetű, kötőjellel). | `github`, `docker`, `nginx` |
|
||||
| `label` | Nem |`Simple Icons` | A badge-en megjelenő szöveg. | `MyApp`, `Status` |
|
||||
| `bg` | Nem |`#f0f0f0` | Háttérszín (hex vagy CSS színnév). | `#fff`, `#222`, `red` |
|
||||
| `bgicon` | Nem |`#cccccc` | Icon Háttérszín (hex vagy CSS színnév). | `#fff`, `#222`, `red` |
|
||||
| `bglabel` | Nem |`#cccccc` | Label Háttérszín (hex vagy CSS színnév). | `#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` |
|
||||
@@ -21,8 +22,11 @@ Az alábbi paraméterekkel szabályozhatod a `/badge` végpont működését:
|
||||
- **Alap badge:**
|
||||
`/badge`
|
||||
|
||||
- **GitHub ikon, piros háttér, fehér szöveg:**
|
||||
`/badge?icon=github&bg=red&color=white`
|
||||
- **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`
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
const express = require('express');
|
||||
const axios = require('axios');
|
||||
|
||||
const helmet = require('helmet');
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
app.use(helmet({
|
||||
crossOriginResourcePolicy: false,
|
||||
}));
|
||||
|
||||
app.get('/badge', async (req, res) => {
|
||||
const {
|
||||
icon = 'simpleicons',
|
||||
@@ -17,7 +21,7 @@ app.get('/badge', async (req, res) => {
|
||||
} = req.query;
|
||||
|
||||
try {
|
||||
// Ikon letöltése
|
||||
// download icon SVG from SimpleIcons CDN
|
||||
const iconUrl = `https://cdn.simpleicons.org/${icon}?viewbox=auto&size=${size}`;
|
||||
const iconResponse = await axios.get(iconUrl, { responseType: 'text' });
|
||||
if (iconResponse.status !== 200) {
|
||||
@@ -25,7 +29,7 @@ app.get('/badge', async (req, res) => {
|
||||
}
|
||||
const iconSVG = iconResponse.data;
|
||||
|
||||
// Ha nincs label paraméter, akkor az ikon SVG <title> mezőjét használjuk
|
||||
// if there is no label query, use the title from the SVG
|
||||
let effectiveLabel = label;
|
||||
if (!req.query.label || req.query.label === 'Simple Icons') {
|
||||
const titleMatch = iconSVG.match(/<title>([^<]+)<\/title>/i);
|
||||
@@ -34,11 +38,11 @@ app.get('/badge', async (req, res) => {
|
||||
}
|
||||
}
|
||||
|
||||
// Badge méretek
|
||||
// Badge size
|
||||
const padding = 10;
|
||||
const iconSize = parseInt(size);
|
||||
const fontSize = Math.round(iconSize * 0.6); // Font size az ikon méret 60%-a
|
||||
const textPadding = Math.round(iconSize * 0.4); // Dinamikus: size 40%-a
|
||||
const fontSize = Math.round(iconSize * 0.6);
|
||||
const textPadding = Math.round(iconSize * 0.4);
|
||||
const radius = 8;
|
||||
const approxCharWidth = fontSize * 0.6;
|
||||
const textWidth = effectiveLabel.length * approxCharWidth;
|
||||
@@ -58,26 +62,17 @@ app.get('/badge', async (req, res) => {
|
||||
// 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";
|
||||
const match = iconSVG.match(/fill="([^"]+)"/);
|
||||
if (match && match[1]) {
|
||||
effectiveColor = match[1];
|
||||
} else {
|
||||
effectiveColor = "#222"; // fallback
|
||||
}
|
||||
}
|
||||
|
||||
// ÚJ: doboz magasság 5 pixellel nagyobb legyen az ikon méreténél
|
||||
const boxHeight = iconSize + 5;
|
||||
const labelBoxHeight = boxHeight;
|
||||
const totalHeight = Math.max(boxHeight, fontSize + padding * 2);
|
||||
// doboz magasság 5 pixellel nagyobb legyen az ikon méreténél
|
||||
const iconSizeAndPadding = iconSize + 5;
|
||||
const labelRectHeight = fontSize + padding;
|
||||
|
||||
let width, height, iconGroup, textElem;
|
||||
|
||||
@@ -94,15 +89,15 @@ app.get('/badge', async (req, res) => {
|
||||
`;
|
||||
} else if (labelpos === 'above' || labelpos === 'below') {
|
||||
// Felső vagy alsó label: ikon doboz magassága = iconSize + 5, szélessége = szöveg doboz szélessége
|
||||
width = Math.max(iconSize + 5, textWidth);
|
||||
const labelRectHeight = fontSize + padding;
|
||||
width = Math.max(iiconSizeAndPadding, textWidth);
|
||||
|
||||
const iconRectY = labelpos === 'above'
|
||||
? labelRectHeight
|
||||
: 0;
|
||||
const labelRectY = labelpos === 'above'
|
||||
? 0
|
||||
: iconSize + 5;
|
||||
height = iconSize + 5 + textPadding + labelRectHeight;
|
||||
: iiconSizeAndPadding;
|
||||
height = iconSizeAndPadding + textPadding + labelRectHeight;
|
||||
|
||||
// Label háttér
|
||||
const labelRect = `<rect x="0" y="${labelRectY}" width="${width}" height="${labelRectHeight}" rx="${radius}" fill="${bglabel}"/>`;
|
||||
@@ -135,7 +130,7 @@ app.get('/badge', async (req, res) => {
|
||||
|
||||
// SVG badge string összefűzéssel, szöveg árnyékkal
|
||||
const svg = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" style="background:none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="${(labelpos === 'left' || labelpos === 'right') ? iconBoxWidth + textWidth : width}" height="${(labelpos === 'left' || labelpos === 'right') ? iconBoxHeight : labelRectHeight+iconSize + 5}" style="background:none">
|
||||
<defs>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000" flood-opacity="0.25"/>
|
||||
|
||||
Generated
+10
@@ -12,6 +12,7 @@
|
||||
"@svgdotjs/svg.js": "^3.2.4",
|
||||
"axios": "^1.10.0",
|
||||
"express": "^5.1.0",
|
||||
"helmet": "^8.1.0",
|
||||
"svgdom": "^0.1.21"
|
||||
}
|
||||
},
|
||||
@@ -595,6 +596,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/helmet": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
|
||||
"integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"@svgdotjs/svg.js": "^3.2.4",
|
||||
"axios": "^1.10.0",
|
||||
"express": "^5.1.0",
|
||||
"helmet": "^8.1.0",
|
||||
"svgdom": "^0.1.21"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user