feat: impl old bg colors & gradients to Card

api/index.js

@@ -18,7 +18,6 @@ export default async (req, res) => {
     show_icons,
     include_all_commits,
     text_bold,
-    bg_color,
     theme,
     email,
     footer,
@@ -40,7 +39,6 @@ export default async (req, res) => {
       renderError("Something went wrong", "This username is blacklisted", {
         title_color,
         text_color,
-        bg_color,
         border_color,
         theme,
       }),
@@ -93,16 +91,15 @@ export default async (req, res) => {
       }),
     );
   } catch (err) {
+
     res.setHeader(
       "Cache-Control",
       `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${
         CONSTANTS.ERROR_CACHE_SECONDS
       }, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
     ); // Use lower cache period for errors.
     return res.send(
-      renderError(err.message, err.secondaryMessage, {
-        theme,
-      }),
+      renderError(err.message, err.secondaryMessage, {}),
     );
   }
 };

api/pin.js

@@ -98,7 +98,6 @@ export default async (req, res) => {
       renderError(err.message, err.secondaryMessage, {
         title_color,
         text_color,
-        bg_color,
         border_color,
         theme,
       }),

src/cards/stats-card.js

@@ -160,7 +160,6 @@ const renderStatsCard = (stats, options = {}) => {
     icon_color,
     text_color,
     text_bold = true,
-    bg_color,
     custom_height = 230,
     theme = "beach",
     dark_bg = 1,
@@ -177,12 +176,13 @@ const renderStatsCard = (stats, options = {}) => {
 
   const lheight = parseInt(String(line_height), 10);
 
+
+
   const { titleColor, iconColor, textColor, bgColor, borderColor, ringColor } =
     getCardColors({
       title_color,
       text_color,
       icon_color,
-      bg_color,
       border_color,
       ring_color,
       theme,
@@ -332,6 +332,13 @@ const renderStatsCard = (stats, options = {}) => {
     border_radius,
     theme: theme,
     dark_bg: dark_bg,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+      borderColor,
+    }
   });
 
   card.setHideBorder(hide_border);

src/common/Card.js

@@ -6,6 +6,7 @@ class Card {
     height = 100,
     border_radius = 4.5,
     theme = "beach",
+    colors = {},
     title = "Stats",
     dark_bg = 1,
   }) {
@@ -15,6 +16,7 @@ class Card {
     this.border_radius = border_radius;
     this.title = title;
     this.css = "";
+    this.colors = colors;
     this.paddingX = 25;
     this.paddingY = 35;
     this.animations = true;
@@ -102,7 +104,40 @@ class Card {
     `;
   }
 
+  /**
+   * @returns {string} The rendered card gradient.
+   */
+  renderGradient() {
+    if (
+      typeof this.colors.bgColor !== "object" 
+    ) {
+      return "";
+    }
+
+    const gradients = this.colors.bgColor.slice(1);
+    return typeof this.colors.bgColor === "object"
+      ? `
+        <defs>
+          <linearGradient
+            id="gradient"
+            gradientTransform="rotate(${this.colors.bgColor[0]})"
+            gradientUnits="userSpaceOnUse"
+          >
+            ${gradients.map((grad, index) => {
+              let offset = (index * 100) / (gradients.length - 1);
+              return `<stop offset="${offset}%" stop-color="#${grad}" />`;
+            })}
+          </linearGradient>
+        </defs>
+        `
+      : "";
+  }
+
   renderParallaxBackground() {
+    if (this.colors.bgColor !== "transparent") {
+      return "";
+    }
+
     const maskId = `mask-${Math.random().toString(36).substring(7)}`;
 
     const starGroups = Array.from({ length: 3 }, (_, i) => {
@@ -900,7 +935,9 @@ class Card {
           ${this.animations === false ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }` : ""}
         </style>
 
+        ${this.renderGradient()}
         ${this.renderParallaxBackground()}
+
         
         <rect
           data-testid="card-bg"
@@ -910,7 +947,11 @@ class Card {
           height="99%"
           stroke="white"
           width="${this.width - 1}"
-          fill="transparent"
+          fill="${
+            typeof this.colors.bgColor === "object"
+              ? "url(#gradient)"
+              : this.colors.bgColor
+          }"
           stroke-opacity="${this.hideBorder ? 0 : 1}"
         />
 

src/common/utils.js

@@ -204,6 +204,7 @@ const isValidGradient = (colors) => {
  * @returns {string | string[]} The gradient or color.
  */
 const fallbackColor = (color, fallbackColor) => {
+  if(color === "transparent") return "transparent";
   let gradient = null;
 
   let colors = color ? color.split(",") : [];
@@ -268,7 +269,6 @@ const getCardColors = ({
   title_color,
   text_color,
   icon_color,
-  bg_color,
   border_color,
   ring_color,
   theme,
@@ -300,8 +300,10 @@ const getCardColors = ({
     text_color || selectedTheme.text_color,
     "#" + defaultTheme.text_color,
   );
+
+
   const bgColor = fallbackColor(
-    bg_color || selectedTheme.bg_color,
+    selectedTheme.bg_color,
     "#" + defaultTheme.bg_color,
   );
 
@@ -358,25 +360,6 @@ const UPSTREAM_API_ERRORS = [
  * @returns {string} The SVG markup.
  */
 const renderError = (message, secondaryMessage = "", options = {}) => {
-  const {
-    title_color,
-    text_color,
-    bg_color,
-    border_color,
-    theme = "snow",
-  } = options;
-
-  // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, bgColor, borderColor } = getCardColors({
-    title_color,
-    text_color,
-    icon_color: "",
-    bg_color,
-    border_color,
-    ring_color: "",
-    theme,
-  });
-
   return `
     <svg width="${ERROR_CARD_LENGTH}"  height="120" viewBox="0 0 ${ERROR_CARD_LENGTH} 120" fill="gray" xmlns="http://www.w3.org/2000/svg">
     <style>

themes/index.js

@@ -466,37 +466,37 @@ export const themes = {
     title_color: "ffffff",
     icon_color: "ffffff",
     text_color: "ffffff",
-    bg_color: "ffffff",
+    bg_color: "transparent",
     border_color: "ffffff",
   },
   desert: {
     title_color: "ffffff",
     icon_color: "ffffff",
     text_color: "ffffff",
-    bg_color: "ffffff",
+    bg_color: "transparent",
     border_color: "ffffff",
   },
   city: {
     title_color: "ffffff",
     icon_color: "ffffff",
     text_color: "ffffff",
-    bg_color: "ffffff",
+    bg_color: "transparent",
     border_color: "ffffff",
   },
   forest: {
     title_color: "ffffff",
     icon_color: "ffffff",
     text_color: "ffffff",
-    bg_color: "ffffff",
+    bg_color: "transparent",
     border_color: "ffffff",
   },
   forest_winter: {
     title_color: "ffffff",
     icon_color: "ffffff",
     text_color: "ffffff",
-    bg_color: "ffffff",
+    bg_color: "transparent",
     border_color: "ffffff",
-  }
+  },
 };
 
 export default themes;