feat: receives text, title and icon colors from URL

api/index.js

@@ -4,7 +4,16 @@ const fetchStats = require("../src/fetchStats");
 const renderStatsCard = require("../src/renderStatsCard");
 
 module.exports = async (req, res) => {
-  const { username, hide, hide_border, show_icons, line_height } = req.query;
+  const {
+    username,
+    hide,
+    hide_border,
+    show_icons,
+    line_height,
+    title_color,
+    icon_color,
+    text_color,
+  } = req.query;
   let stats;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -20,6 +29,9 @@ module.exports = async (req, res) => {
       show_icons,
       hide_border,
       line_height,
+      title_color,
+      icon_color,
+      text_color,
     })
   );
 };

src/renderStatsCard.js

@@ -1,11 +1,11 @@
-const { kFormatter } = require("../src/utils");
+const { kFormatter, isValidHexColor } = require("../src/utils");
 
 const createTextNode = ({ icon, label, value, lineHeight, id }) => {
   const classname = icon === "★" && "star-icon";
   const kValue = kFormatter(value);
   return `
     <tspan x="25" dy="${lineHeight}" class="stat bold">
-    <tspan data-testid="icon" class="icon ${classname}" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
+    <tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan>
     <tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</tspan>
   `;
 };
@@ -24,10 +24,19 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     show_icons = false,
     hide_border = false,
     line_height = 25,
+    title_color,
+    icon_color,
+    text_color,
   } = options;
 
   const lheight = parseInt(line_height);
 
+  const titleColor =
+    (isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed";
+  const iconColor =
+    (isValidHexColor(icon_color) && `#${icon_color}`) || "#4c71f2";
+  const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
+
   const STAT_MAP = {
     stars: createTextNode({
       icon: "★",
@@ -76,11 +85,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   return `
     <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
       <style>
-      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
+      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; }
-      .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
+      .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; }
       .star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
       .bold { font-weight: 700 }
       .icon {
+        fill: ${iconColor};
         display: ${!!show_icons ? "block" : "none"};
       }
       </style>

src/utils.js

@@ -25,4 +25,10 @@ function kFormatter(num) {
     : Math.sign(num) * Math.abs(num);
 }
 
-module.exports = { renderError, kFormatter, encodeHTML };
+function isValidHexColor(hexColor) {
+  return new RegExp(
+    /^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/
+  ).test(hexColor);
+}
+
+module.exports = { renderError, kFormatter, encodeHTML, isValidHexColor };