Skip to content

Commit fa70ef0

Browse files
DenverCoder1github-actions[bot]
DenverCoder1
and
github-actions[bot]
authored
refactor: formatted inline css, separated stroke, fill (#355)
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 9e1d8aa commit fa70ef0

File tree

7 files changed

+71
-387
lines changed

7 files changed

+71
-387
lines changed

‎src/card.php

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ function generateCard(array $stats, array $params = null): string
252252
$longestStreakRange = splitLines($longestStreakRange, 28, 0);
253253

254254
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
255-
style='isolation:isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='{$direction}'>
255+
style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='{$direction}'>
256256
<style>
257257
@keyframes currstreak {
258258
0% { font-size: 3px; opacity: 0.2; }
@@ -274,86 +274,86 @@ function generateCard(array $stats, array $params = null): string
274274
</mask>
275275
</defs>
276276
<g clip-path='url(#outer_rectangle)'>
277-
<g style='isolation:isolate'>
277+
<g style='isolation: isolate'>
278278
<rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='494' height='194'/>
279279
</g>
280-
<g style='isolation:isolate'>
280+
<g style='isolation: isolate'>
281281
<line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
282282
<line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
283283
</g>
284-
<g style='isolation:isolate'>
284+
<g style='isolation: isolate'>
285285
<!-- Total Contributions Big Number -->
286286
<g transform='translate(1,48)'>
287-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["sideNums"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.6s;'>
287+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideNums"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 700; font-size: 28px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
288288
{$totalContributions}
289289
</text>
290290
</g>
291291
292292
<!-- Total Contributions Label -->
293293
<g transform='translate(1,84)'>
294-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.7s;'>
294+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 400; font-size: 14px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>
295295
{$totalContributionsText}
296296
</text>
297297
</g>
298298
299299
<!-- total contributions range -->
300300
<g transform='translate(1,114)'>
301-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.8s;'>
301+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 400; font-size: 12px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>
302302
{$totalContributionsRange}
303303
</text>
304304
</g>
305305
</g>
306-
<g style='isolation:isolate'>
306+
<g style='isolation: isolate'>
307307
<!-- Current Streak Big Number -->
308308
<g transform='translate(166,48)'>
309-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["currStreakNum"]};stroke:none;animation: currstreak 0.6s linear forwards;'>
309+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["currStreakNum"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 700; font-size: 28px; font-style: normal; animation: currstreak 0.6s linear forwards'>
310310
{$currentStreak}
311311
</text>
312312
</g>
313313
314314
<!-- Current Streak Label -->
315315
<g transform='translate(166,108)'>
316-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:14px;font-style:normal;fill:{$theme["currStreakLabel"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
316+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["currStreakLabel"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 700; font-size: 14px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
317317
{$currentStreakText}
318318
</text>
319319
</g>
320320
321321
<!-- Current Streak Range -->
322322
<g transform='translate(166,145)'>
323-
<text x='81.5' y='21' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
323+
<text x='81.5' y='21' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 400; font-size: 12px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
324324
{$currentStreakRange}
325325
</text>
326326
</g>
327327
328328
<!-- ring around number -->
329329
<g mask='url(#mask_out_ring_behind_fire)'>
330-
<circle cx='247.5' cy='71' r='40' style='fill:none;stroke:{$theme["ring"]};stroke-width:5;opacity: 0; animation: fadein 0.5s linear forwards 0.4s;'></circle>
330+
<circle cx='247.5' cy='71' r='40' fill='none' stroke='{$theme["ring"]}' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>
331331
</g>
332332
<!-- fire icon -->
333-
<g style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s; stroke-opacity: 0;'>
334-
<path d=' M 235.5 19.5 L 259.5 19.5 L 259.5 43.5 L 235.5 43.5 L 235.5 19.5 Z ' fill='none' stroke-opacity='0'/>
333+
<g stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
334+
<path d=' M 235.5 19.5 L 259.5 19.5 L 259.5 43.5 L 235.5 43.5 L 235.5 19.5 Z ' fill='none'/>
335335
<path d=' M 249 20.17 C 249 20.17 249.74 22.82 249.74 24.97 C 249.74 27.03 248.39 28.7 246.33 28.7 C 244.26 28.7 242.7 27.03 242.7 24.97 L 242.73 24.61 C 240.71 27.01 239.5 30.12 239.5 33.5 C 239.5 37.92 243.08 41.5 247.5 41.5 C 251.92 41.5 255.5 37.92 255.5 33.5 C 255.5 28.11 252.91 23.3 249 20.17 Z M 247.21 38.5 C 245.43 38.5 243.99 37.1 243.99 35.36 C 243.99 33.74 245.04 32.6 246.8 32.24 C 248.57 31.88 250.4 31.03 251.42 29.66 C 251.81 30.95 252.01 32.31 252.01 33.7 C 252.01 36.35 249.86 38.5 247.21 38.5 Z ' fill='{$theme["fire"]}' stroke-opacity='0'/>
336336
</g>
337337
338338
</g>
339-
<g style='isolation:isolate'>
339+
<g style='isolation: isolate'>
340340
<!-- Longest Streak Big Number -->
341341
<g transform='translate(331,48)'>
342-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["sideNums"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 1.2s;'>
342+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideNums"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 700; font-size: 28px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>
343343
{$longestStreak}
344344
</text>
345345
</g>
346346
347347
<!-- Longest Streak Label -->
348348
<g transform='translate(331,84)'>
349-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.3s;'>
349+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 400; font-size: 14px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>
350350
{$longestStreakText}
351351
</text>
352352
</g>
353353
354354
<!-- Longest Streak Range -->
355355
<g transform='translate(331,114)'>
356-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.4s;'>
356+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 400; font-size: 12px; font-style: normal; opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>
357357
{$longestStreakRange}
358358
</text>
359359
</g>
@@ -381,7 +381,7 @@ function generateErrorCard(string $message, array $params = null): string
381381
// read border_radius parameter, default to 4.5 if not set
382382
$borderRadius = $params["border_radius"] ?? "4.5";
383383

384-
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 495 195' width='495px' height='195px'>
384+
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px'>
385385
<style>
386386
a {
387387
fill: {$theme["dates"]};
@@ -393,13 +393,13 @@ function generateErrorCard(string $message, array $params = null): string
393393
</clipPath>
394394
</defs>
395395
<g clip-path='url(#outer_rectangle)'>
396-
<g style='isolation:isolate'>
396+
<g style='isolation: isolate'>
397397
<rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='494' height='194'/>
398398
</g>
399-
<g style='isolation:isolate'>
399+
<g style='isolation: isolate'>
400400
<!-- Error Label -->
401401
<g transform='translate(166,108)'>
402-
<text x='81.5' y='50' dy='0.25em' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none;'>
402+
<text x='81.5' y='50' dy='0.25em' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' style='font-family: \"Segoe UI\", Ubuntu, sans-serif; font-weight: 400; font-size: 14px; font-style: normal'>
403403
{$message}
404404
</text>
405405
</g>
@@ -413,10 +413,10 @@ function generateErrorCard(string $message, array $params = null): string
413413
</defs>
414414
<!-- Sad face -->
415415
<g>
416-
<path style='fill:{$theme["fire"]};' d='M248,35.8c-25.2,0-45.7,20.5-45.7,45.7s20.5,45.8,45.7,45.8s45.7-20.5,45.7-45.7S273.2,35.8,248,35.8z M248,122.3c-11.2,0-21.4-4.5-28.8-11.9c-2.9-2.9-5.4-6.3-7.4-10c-3-5.7-4.6-12.1-4.6-18.9c0-22.5,18.3-40.8,40.8-40.8 c10.7,0,20.4,4.1,27.7,10.9c3.8,3.5,6.9,7.7,9.1,12.4c2.6,5.3,4,11.3,4,17.6C288.8,104.1,270.5,122.3,248,122.3z'/>
417-
<path style='fill:{$theme["fire"]};' d='M252.8,93.8c5.4,1.1,10.3,4.2,13.7,8.6l3.9-3c-4.1-5.3-10-9-16.6-10.4c-10.6-2.2-21.7,1.9-28.3,10.4l3.9,3 C234.9,95.3,244.1,91.9,252.8,93.8z'/>
418-
<circle style='fill:{$theme["fire"]};' cx='232.8' cy='71.3' r='4.9'/>
419-
<circle style='fill:{$theme["fire"]};' cx='263.4' cy='71.3' r='4.9'/>
416+
<path fill='{$theme["fire"]}' d='M248,35.8c-25.2,0-45.7,20.5-45.7,45.7s20.5,45.8,45.7,45.8s45.7-20.5,45.7-45.7S273.2,35.8,248,35.8z M248,122.3c-11.2,0-21.4-4.5-28.8-11.9c-2.9-2.9-5.4-6.3-7.4-10c-3-5.7-4.6-12.1-4.6-18.9c0-22.5,18.3-40.8,40.8-40.8 c10.7,0,20.4,4.1,27.7,10.9c3.8,3.5,6.9,7.7,9.1,12.4c2.6,5.3,4,11.3,4,17.6C288.8,104.1,270.5,122.3,248,122.3z'/>
417+
<path fill='{$theme["fire"]}' d='M252.8,93.8c5.4,1.1,10.3,4.2,13.7,8.6l3.9-3c-4.1-5.3-10-9-16.6-10.4c-10.6-2.2-21.7,1.9-28.3,10.4l3.9,3 C234.9,95.3,244.1,91.9,252.8,93.8z'/>
418+
<circle fill='{$theme["fire"]}' cx='232.8' cy='71.3' r='4.9'/>
419+
<circle fill='{$theme["fire"]}' cx='263.4' cy='71.3' r='4.9'/>
420420
</g>
421421
</g>
422422
</g>
@@ -439,8 +439,8 @@ function convertSvgToPng(string $svg): string
439439
// remove style and animations
440440
$svg = preg_replace("/(<style>\X*?<\/style>)/m", "", $svg);
441441
$svg = preg_replace("/(opacity: 0;)/m", "opacity: 1;", $svg);
442-
$svg = preg_replace("/(animation: fadein.*?;)/m", "opacity: 1;", $svg);
443-
$svg = preg_replace("/(animation: currstreak.*?;)/m", "font-size: 28px;", $svg);
442+
$svg = preg_replace("/(animation: fadein[^;'\"]+)/m", "opacity: 1;", $svg);
443+
$svg = preg_replace("/(animation: currstreak[^;'\"]+)/m", "font-size: 28px;", $svg);
444444
$svg = preg_replace("/<a \X*?>(\X*?)<\/a>/m", '\1', $svg);
445445

446446
// save svg to random file

‎tests/RenderTest.php

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,9 @@ public function testDateFormatRender(): void
6969
$this->testParams["date_format"] = "[Y-]m-d";
7070
// Check that the card is rendered as expected
7171
$render = generateCard($this->testStats, $this->testParams);
72-
$expected = file_get_contents("tests/expected/test_date_card.svg");
73-
$this->assertEquals($expected, $render);
72+
$this->assertStringContainsString("2016-08-10 - Present", $render);
73+
$this->assertStringContainsString("2019-03-28 - 04-12", $render);
74+
$this->assertStringContainsString("2016-12-19 - 2016-03-14", $render);
7475
}
7576

7677
/**
@@ -81,8 +82,15 @@ public function testLocaleRenderDateFormat(): void
8182
$this->testParams["locale"] = "ja";
8283
// Check that the card is rendered as expected
8384
$render = generateCard($this->testStats, $this->testParams);
84-
$expected = file_get_contents("tests/expected/test_locale_ja_card.svg");
85-
$this->assertEquals($expected, $render);
85+
$this->assertStringContainsString("2,048", $render);
86+
$this->assertStringContainsString("総ｺﾝﾄﾘﾋﾞｭｰｼｮﾝ数", $render);
87+
$this->assertStringContainsString("2016.8.10 - 今", $render);
88+
$this->assertStringContainsString("16", $render);
89+
$this->assertStringContainsString("現在のストリーク", $render);
90+
$this->assertStringContainsString("2019.3.28 - 2019.4.12", $render);
91+
$this->assertStringContainsString("86", $render);
92+
$this->assertStringContainsString("最長のストリーク", $render);
93+
$this->assertStringContainsString("2016.12.19 - 2016.3.14", $render);
8694
}
8795

8896
/**
@@ -93,8 +101,11 @@ public function testBorderRadius(): void
93101
$this->testParams["border_radius"] = "16";
94102
// Check that the card is rendered as expected
95103
$render = generateCard($this->testStats, $this->testParams);
96-
$expected = file_get_contents("tests/expected/test_border_radius_card.svg");
97-
$this->assertEquals($expected, $render);
104+
$this->assertStringContainsString("<rect width='495' height='195' rx='16'/>", $render);
105+
$this->assertStringContainsString(
106+
"<rect stroke='#111111' fill='#000000' rx='16' x='0.5' y='0.5' width='494' height='194'/>",
107+
$render
108+
);
98109
}
99110

100111
/**

0 commit comments

Comments
 (0)