1+ <?php
2+ include 'utils.php ' ;
3+
4+ $ dark = isset ($ _GET ['theme ' ]) && $ _GET ['theme ' ] === 'dark ' ;
5+ $ header = $ dark ? "#fff " : "#434d58 " ;
6+ $ background = $ dark ? "#000 " : "#fffefe " ;
7+ $ username = get ('username ' , '' );
8+ $ repo = get ('repo ' , '' );
9+ $ column = max ((int )get ('column ' , '6 ' ), 4 );
10+
11+ $ stats = fetch ("contributor/ $ username/ $ repo " );
12+ if (!$ stats ) {
13+ include 'error.php ' ;
14+ exit ;
15+ }
16+ $ name = "$ username / $ repo " ;
17+ $ number = count ($ stats ['contributors ' ]);
18+ $ height = 100 + (ceil ($ number / $ column ) * 64 );
19+
20+ ob_start ('compress ' );
21+ ?>
22+ <svg width="540" viewBox="0 0 <?php echo 100 + ($ column * 64 ) ?> <?php echo $ height + 1 ?> " fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
23+ <title id="titleId"><?php echo $ name ?> 's Contributors</title>
24+ <desc id="descId">Repository Contributors</desc>
25+ <defs><mask id="circle-mask"><circle cx="25" cy="25" r="25" fill="white" /></mask></defs>
26+ <style>
27+ .circle {
28+ animation: fadeInAnimation 0.8s ease-in-out forwards;
29+ }
30+ .avatar {
31+ animation: fadeInAnimation 0.8s ease-in-out forwards;
32+ border-radius: 50%;
33+ }
34+ .header {
35+ font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
36+ fill: #2f80ed;
37+ animation: fadeInAnimation 0.8s ease-in-out forwards;
38+ }
39+ @supports (appearance: auto) {
40+ .header {
41+ font-size: 16px;
42+ }
43+ }
44+ @keyframes growWidthAnimation {
45+ from {
46+ width: 0;
47+ }
48+ to {
49+ width: 100%;
50+ }
51+ }
52+ #rect-mask rect {
53+ animation: fadeInAnimation 1s ease-in-out forwards;
54+ }
55+ @keyframes fadeInAnimation {
56+ from {
57+ opacity: 0;
58+ }
59+ to {
60+ opacity: 1;
61+ }
62+ }
63+ </style>
64+ <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="99%" fill="<?php echo $ background ?> " stroke-opacity="1"/>
65+ <g data-testid="card-title" transform="translate(40, 35)">
66+ <g transform="translate(0, 0)">
67+ <circle class="circle" cx="-10" cy="-5" r="5" fill="<?php echo $ stats ['color ' ] ?> " />
68+ <text x="0" y="0" class="header" data-testid="header"><?php echo $ name ?> </text>
69+ </g>
70+ </g>
71+ <g xmlns="http://www.w3.org/2000/svg" transform="translate(18, 65)" data-testid="main-card-progress">
72+ <svg data-testid="contributors" x="25">
73+ <mask id="rect-mask"><rect x="0" y="0" width="300" height="8" fill="white" rx="5"/></mask>
74+ <?php foreach ($ stats ['contributors ' ] as $ idx => $ contributor ) { ?>
75+ <g class="avatar" transform="translate(<?php echo ($ idx % $ column ) * 64 ?> , <?php echo (int )($ idx / $ column ) * 64 ?> )">
76+ <image height="50" width="50" href="<?php echo $ contributor ['avatar ' ] ?> " mask="url(#circle-mask)" />
77+ </g>
78+ <?php } ?>
79+ </svg>
80+ </g>
81+ </svg>
82+
83+ <?php
84+ ob_end_flush ();
85+ ?>
0 commit comments