fix: Apply background gradients on error cards (#498)

DenverCoder1 · Apr 17, 2023 · 8c57908 · 8c57908
1 parent 8949b4c
commit 8c57908
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 31 deletions.
diff --git a/src/card.php b/src/card.php
@@ -151,6 +151,22 @@ function getRequestedTheme(array $params): array
         $theme["border"] = "#0000"; // transparent
     }
 
+    // set background
+    $gradient = "";
+    $backgroundParts = explode(",", $theme["background"] ?? "");
+    if (count($backgroundParts) >= 3) {
+        $theme["background"] = "url(#gradient)";
+        $gradient = "<linearGradient id='gradient' gradientTransform='rotate({$backgroundParts[0]})' gradientUnits='userSpaceOnUse'>";
+        $backgroundColors = array_slice($backgroundParts, 1);
+        $colorCount = count($backgroundColors);
+        for ($index = 0; $index < $colorCount; $index++) {
+            $offset = ($index * 100) / ($colorCount - 1);
+            $gradient .= "<stop offset='{$offset}%' stop-color='#{$backgroundColors[$index]}' />";
+        }
+        $gradient .= "</linearGradient>";
+    }
+    $theme["backgroundGradient"] = $gradient;
+
     return $theme;
 }
 
@@ -353,24 +369,6 @@ function generateCard(array $stats, array $params = null): string
     $currentStreakOffset = $showCurrentStreak ? $columnOffsets[$nextColumnIndex++] : -999;
     $longestStreakOffset = $showLongestStreak ? $columnOffsets[$nextColumnIndex++] : -999;
 
-    // set background
-    $backgroundParts = explode(",", $theme["background"] ?? "");
-    $backgroundIsGradient = count($backgroundParts) >= 3;
-
-    $background = $theme["background"];
-    $gradient = "";
-    if ($backgroundIsGradient) {
-        $background = "url(#gradient)";
-        $gradient = "<defs><linearGradient id='gradient' gradientTransform='rotate({$backgroundParts[0]})' gradientUnits='userSpaceOnUse'>";
-        $backgroundColors = array_slice($backgroundParts, 1);
-        $colorCount = count($backgroundColors);
-        for ($index = 0; $index < $colorCount; $index++) {
-            $offset = ($index * 100) / ($colorCount - 1);
-            $gradient .= "<stop offset='{$offset}%' stop-color='#{$backgroundColors[$index]}' />";
-        }
-        $gradient .= "</linearGradient></defs>";
-    }
-
     // total contributions
     $totalContributions = $numFormatter->format($stats["totalContributions"]);
     $firstContribution = formatDate($stats["firstContribution"], $dateFormat, $localeCode);
@@ -439,7 +437,6 @@ function generateCard(array $stats, array $params = null): string
                 100% { opacity: 1; }
             }
         </style>
-        {$gradient}
         <defs>
             <clipPath id='outer_rectangle'>
                 <rect width='{$cardWidth}' height='195' rx='{$borderRadius}'/>
@@ -448,10 +445,11 @@ function generateCard(array $stats, array $params = null): string
                 <rect width='{$cardWidth}' height='195' fill='white'/>
                 <ellipse id='mask-ellipse' cx='{$currentStreakOffset}' cy='32' rx='13' ry='18' fill='black'/>
             </mask>
+            {$theme["backgroundGradient"]}
         </defs>
         <g clip-path='url(#outer_rectangle)'>
             <g style='isolation: isolate'>
-                <rect stroke='{$theme["border"]}' fill='{$background}' rx='{$borderRadius}' x='0.5' y='0.5' width='{$rectWidth}' height='194'/>
+                <rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='{$rectWidth}' height='194'/>
             </g>
             <g style='isolation: isolate'>
                 <line x1='{$barOffsets[0]}' y1='28' x2='{$barOffsets[0]}' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
@@ -572,6 +570,7 @@ function generateErrorCard(string $message, array $params = null): string
             <clipPath id='outer_rectangle'>
                 <rect width='{$cardWidth}' height='195' rx='{$borderRadius}'/>
             </clipPath>
+            {$theme["backgroundGradient"]}
         </defs>
         <g clip-path='url(#outer_rectangle)'>
             <g style='isolation: isolate'>

diff --git a/tests/OptionsTest.php b/tests/OptionsTest.php
@@ -31,12 +31,9 @@ public function testThemes(): void
         $themes = include "src/themes.php";
         foreach ($themes as $theme => $colors) {
             $actualColors = getRequestedTheme(["theme" => $theme]);
+            unset($actualColors["backgroundGradient"]);
             $this->assertEquals($colors, $actualColors);
         }
-        // test old theme names
-        $this->assertEquals($themes["holi-theme"], getRequestedTheme(["theme" => "holi_theme"]));
-        $this->assertEquals($themes["gruvbox-duo"], getRequestedTheme(["theme" => "gruvbox_duo"]));
-        $this->assertEquals($themes["deepblue"], getRequestedTheme(["theme" => "deepBlue"]));
     }
 
     /**
@@ -48,7 +45,9 @@ public function testFallbackToDefaultTheme(): void
         // request parameters
         $params = ["theme" => "not a theme name"];
         // test that invalid theme name gives default values
-        $this->assertEquals($this->defaultTheme, getRequestedTheme($params));
+        $actual = getRequestedTheme($params);
+        unset($actual["backgroundGradient"]);
+        $this->assertEquals($this->defaultTheme, $actual);
     }
 
     /**
@@ -101,7 +100,9 @@ public function testColorOverrideParameters(): void
             // update parameter in expected result
             $expected = array_merge($expected, [$param => "#f00"]);
             // test color change
-            $this->assertEquals($expected, getRequestedTheme($params));
+            $actual = getRequestedTheme($params);
+            unset($actual["backgroundGradient"]);
+            $this->assertEquals($expected, $actual);
         }
     }
 
@@ -127,7 +128,9 @@ public function testValidColorInputs(): void
             // update parameter in expected result
             $expected = array_merge($expected, ["background" => $output]);
             // test color change
-            $this->assertEquals($expected, getRequestedTheme($params));
+            $actual = getRequestedTheme($params);
+            unset($actual["backgroundGradient"]);
+            $this->assertEquals($expected, $actual);
         }
     }
 
@@ -146,7 +149,9 @@ public function testInvalidColorInputs(): void
             // set request parameter
             $params = ["background" => $input];
             // test that theme is still default
-            $this->assertEquals($this->defaultTheme, getRequestedTheme($params));
+            $actual = getRequestedTheme($params);
+            unset($actual["backgroundGradient"]);
+            $this->assertEquals($this->defaultTheme, $actual);
         }
     }
 

diff --git a/tests/RenderTest.php b/tests/RenderTest.php
@@ -187,7 +187,7 @@ public function testGradientBackground(): void
         $render = generateOutput($this->testStats, $this->testParams)["body"];
         $this->assertStringContainsString("fill='url(#gradient)'", $render);
         $this->assertStringContainsString(
-            "<defs><linearGradient id='gradient' gradientTransform='rotate(45)' gradientUnits='userSpaceOnUse'><stop offset='0%' stop-color='#f00' /><stop offset='100%' stop-color='#e11' /></linearGradient></defs>",
+            "<linearGradient id='gradient' gradientTransform='rotate(45)' gradientUnits='userSpaceOnUse'><stop offset='0%' stop-color='#f00' /><stop offset='100%' stop-color='#e11' /></linearGradient>",
             $render
         );
     }
@@ -201,7 +201,7 @@ public function testGradientBackgroundWithMoreThan2Colors(): void
         $render = generateOutput($this->testStats, $this->testParams)["body"];
         $this->assertStringContainsString("fill='url(#gradient)'", $render);
         $this->assertStringContainsString(
-            "<defs><linearGradient id='gradient' gradientTransform='rotate(-45)' gradientUnits='userSpaceOnUse'><stop offset='0%' stop-color='#f00' /><stop offset='33.333333333333%' stop-color='#4e5' /><stop offset='66.666666666667%' stop-color='#ddd' /><stop offset='100%' stop-color='#fff' /></linearGradient></defs>",
+            "<linearGradient id='gradient' gradientTransform='rotate(-45)' gradientUnits='userSpaceOnUse'><stop offset='0%' stop-color='#f00' /><stop offset='33.333333333333%' stop-color='#4e5' /><stop offset='66.666666666667%' stop-color='#ddd' /><stop offset='100%' stop-color='#fff' /></linearGradient>",
             $render
         );
     }

diff --git a/tests/expected/test_card.svg b/tests/expected/test_card.svg
diff --git a/tests/expected/test_error_card.svg b/tests/expected/test_error_card.svg