Merge branch 'gradient-background-1' of https://github.com/nthnchu/gi…

…thub-readme-stats
ctrlxx · Aug 8, 2020 · 940aa64 · 940aa64
2 parents f4cbac0 + 366cc48
commit 940aa64
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/readme.md b/readme.md
@@ -125,7 +125,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 - `title_color` - Card's title color _(hex color)_
 - `text_color` - Body text color _(hex color)_
 - `icon_color` - Icons color if available _(hex color)_
-- `bg_color` - Card's background color _(hex color)_
+- `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_
 - `theme` - name of the theme, choose from [all available themes](./themes/README.md)
 - `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_
 

diff --git a/src/common/Card.js b/src/common/Card.js
@@ -109,6 +109,13 @@ class Card {
           }
         </style>
 
+        ${typeof this.colors.bgColor == 'object' ? `<defs>
+          <linearGradient id="gradient" gradientTransform="rotate(${this.colors.bgColor[0]})">
+            <stop offset="0%"  stop-color="#${this.colors.bgColor[1]}" />
+            <stop offset="100%" stop-color="#${this.colors.bgColor[2]}" />
+          </linearGradient>
+        </defs>` : ""}
+
         <rect
           data-testid="card-bg"
           x="0.5"
@@ -117,7 +124,7 @@ class Card {
           height="99%"
           stroke="#E4E2E2"
           width="${this.width - 1}"
-          fill="${this.colors.bgColor}"
+          fill="${typeof this.colors.bgColor == 'object' ? "url(#gradient)" : this.colors.bgColor}"
           stroke-opacity="${this.hideBorder ? 0 : 1}"
         />
 

diff --git a/src/common/utils.js b/src/common/utils.js
@@ -61,7 +61,7 @@ function clampValue(number, min, max) {
 }
 
 function fallbackColor(color, fallbackColor) {
-  return (isValidHexColor(color) && `#${color}`) || fallbackColor;
+  return (isValidHexColor(color) && `#${color}`) || (color.includes(',') && isValidHexColor(color.split(',')[1]) && isValidHexColor(color.split(',')[2]) && color.split(',')) || fallbackColor;
 }
 
 function request(data, headers) {

diff --git a/tests/card.test.js b/tests/card.test.js
@@ -133,4 +133,39 @@ describe("Card", () => {
       "#fff"
     );
   });
+  it("should render gradient backgrounds", () => {
+    const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+      title_color: "f00",
+      icon_color: "0f0",
+      text_color: "00f",
+      bg_color: "90,fff,000",
+      theme: "default",
+    });
+    const card = new Card({
+      height: 200,
+      colors: {
+        titleColor,
+        textColor,
+        iconColor,
+        bgColor,
+      },
+    });
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "url(#gradient)"
+    );
+    expect(document.querySelector('defs linearGradient')).toHaveAttribute(
+      "gradientTransform",
+      "rotate(90)"
+    );
+    expect(document.querySelector('defs linearGradient stop:nth-child(1)')).toHaveAttribute(
+      "stop-color",
+      "#fff"
+    );
+    expect(document.querySelector('defs linearGradient stop:nth-child(2)')).toHaveAttribute(
+      "stop-color",
+      "#000"
+    );
+  });
 });