feat: Added gradient background color

api/index.ts

@@ -3,7 +3,7 @@ import { Request, Response } from "express";
 import getData from "../src/getData";
 import cardStyle from "../src/card";
 import { themes, Themes } from "../themes/index";
-import { isValidHexColor, parseBoolean } from "../src/common/utils";
+import { isValidHexColor, isValidGradient, parseBoolean } from "../src/common/utils";
 
 export type UiConfig = {
   titleColor: string;
@@ -12,7 +12,7 @@ export type UiConfig = {
   borderColor: string;
   strokeColor: string;
   usernameColor: string;
-  bgColor: string;
+  bgColor: any;
   Locale: string;
   borderWidth: number | string;
   borderRadius: number | string;
@@ -52,14 +52,21 @@ export default async function readmeStats(req: any, res: any): Promise<any> {
     }
 
     if (
-      !isValidHexColor(uiConfig.bgColor) ||
       !isValidHexColor(uiConfig.titleColor) ||
       !isValidHexColor(uiConfig.textColor) ||
       !isValidHexColor(uiConfig.iconColor) ||
       !isValidHexColor(uiConfig.borderColor) ||
       !isValidHexColor(uiConfig.usernameColor) ||
       !isValidHexColor(uiConfig.strokeColor)
-    ) throw new Error("Enter a valid hex color code");
+    ) {
+      throw new Error("Enter a valid hex color code");
+    };
+
+    if (!isValidGradient(uiConfig.bgColor)) {
+      if (!isValidHexColor(uiConfig.bgColor)) {
+        throw new Error("Enter a valid hex color code");
+      };
+    };
 
     var fetchStats = await getData(username);
     res.setHeader("Cache-Control", "s-maxage=3600, stale-while-revalidate");

src/card.ts

@@ -98,6 +98,39 @@ export default function cardStyle(data: GetData, uiConfig: UiConfig): string {
                 </g>
             </g>`).join('\n');
 
+  function generateGradient(colors: string[]): string {
+    const gradientId = 'gradient';
+    const gradientAngle = colors[0];
+    const getColors = colors.slice(1);
+    const gradientStops = getColors.map((color, index) => {
+      const offset = (index * 100) / (getColors.length - 1);
+      return `<stop offset="${offset}%" stop-color="#${color}"/>`;
+    }).join('');
+    return `
+    <defs>
+        <linearGradient id="${gradientId}" gradientTransform="rotate(${gradientAngle})" gradientUnits="userSpaceOnUse">
+            ${gradientStops}
+        </linearGradient>
+    </defs>
+    <rect x="0.5" y="0.5" rx="${uiConfig.borderRadius}" height="99.6%" width="99.8%" fill="url(#${gradientId})" stroke="#${uiConfig.borderColor}" stroke-opacity="1" stroke-width="${uiConfig.borderWidth}"/>
+    `;
+  };
+
+  let backgroundSVG = '';
+  if (uiConfig.bgColor) {
+    if (Array.isArray(uiConfig.bgColor)) {
+      backgroundSVG = generateGradient(uiConfig.bgColor);
+    } else if (typeof uiConfig.bgColor === 'string') {
+      const gradientHexArray = uiConfig.bgColor.split(',');
+      if (gradientHexArray.length >= 2) {
+        const gradientColors = gradientHexArray.map(color => color.trim());
+        backgroundSVG = generateGradient(gradientColors);
+      } else {
+        backgroundSVG = `<rect x="0.5" y="0.5" rx="${uiConfig.borderRadius}" height="99.6%" width="99.8%" fill="#${uiConfig.bgColor}" stroke="#${uiConfig.borderColor}" stroke-opacity="1" stroke-width="${uiConfig.borderWidth}" />`;
+      }
+    }
+  };
+
   var card = `<svg width="535" height="${Math.max(220, 45 + cardItemsToShow.length * 25)}"  direction="${direction}" viewBox="0 0 535 ${Math.max(220, 45 + cardItemsToShow.length * 25)}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
         ${animations}
@@ -146,7 +179,7 @@ export default function cardStyle(data: GetData, uiConfig: UiConfig): string {
     </style>
     <title id="titleId">${selectLocale.titleCard.split("{name}").join(data.name) || defaultLocale.titleCard.split("{name}").join(data.name)}</title>
 
-    <rect x="0.5" y="0.5" rx="${uiConfig.borderRadius}" height="99.6%" width="99.8%" fill="#${uiConfig.bgColor}" stroke="#${uiConfig.borderColor}" stroke-opacity="1" stroke-width="${uiConfig.borderWidth}"/>
+    ${backgroundSVG}
     <g transform="translate(0, 25)">
         <g class="div-animation">
             <text x="${titleXAngle}" y="${titleYAngle}" class="text-title">${selectLocale.titleCard.split("{name}").join(data.name) || defaultLocale.titleCard.split("{name}").join(data.name)}</text>

src/common/utils.ts

@@ -1,8 +1,18 @@
-function isValidHexColor(hexColor: string): boolean {
+function isValidHexColor(hexColor: any): boolean {
   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);
-}
+};
+
+function isValidGradient(hexColors: string[]): boolean {
+  const colors = [hexColors];
+  for (let i = 1; i < colors.length; i++) {
+    if (!isValidHexColor(colors[i])) {
+      return false;
+    }
+  }
+  return true;
+};
 
 function parseBoolean(value: boolean | string): boolean | undefined {
   if (typeof value === "boolean") {
@@ -17,9 +27,10 @@ function parseBoolean(value: boolean | string): boolean | undefined {
     }
   }
   return undefined;
-}
+};
 
 export {
   isValidHexColor,
+  isValidGradient,
   parseBoolean
-}
+}