helmet added, box real width/height

2025-07-09 13:49:23 +02:00
parent ec9359fb0a
commit b72e4861eb
4 changed files with 41 additions and 31 deletions
@@ -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="([^"]+)"/);
+      const match = iconSVG.match(/fill="([^"]+)"/);
      if (match && match[1]) {
        effectiveColor = match[1];
      } else {
        effectiveColor = "#222"; // fallback
      }
-      } catch {
-        effectiveColor = "#222";
-      }
    }

-    // Ú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"/>
@@ -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"
  }
 }