Skip to content
This repository was archived by the owner on May 11, 2025. It is now read-only.

Commit 35cc688

Browse files
zmh-programzmh-program
committed
0.15
1 parent 04f263b commit 35cc688

1 file changed

Lines changed: 116 additions & 49 deletions

File tree

‎views/repo.ejs‎

Lines changed: 116 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
<svg width="450" height="195" viewBox="0 0 450 195" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
1+
<svg width="450" height="195" viewBox="0 0 640 195" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
22
<title id="titleId"><%- repo %>'s Code Stats</title>
33
<desc id="descId">Repository Code Statistics</desc>
44
<style>
5+
.oct-icon {
6+
display: block;
7+
fill: #8b849e;
8+
}
59
.header {
610
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
711
fill: #2f80ed;
812
animation: fadeInAnimation 0.8s ease-in-out forwards;
913
}
1014
@supports(-moz-appearance: auto) {
11-
/* Selector detects Firefox */
1215
.header { font-size: 15.5px; }
1316
}
1417
.stat {
@@ -21,32 +24,46 @@
2124
opacity: 0;
2225
animation: fadeInAnimation 0.3s ease-in-out forwards;
2326
}
24-
.rank-text {
25-
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
26-
animation: scaleInAnimation 0.3s ease-in-out forwards;
27-
}
28-
.not_bold { font-weight: 400 }
2927
.bold { font-weight: 700 }
3028
.icon {
3129
fill: #4c71f2;
3230
display: none;
3331
}
34-
.rank-circle-rim {
35-
stroke: #2f80ed;
36-
fill: none;
37-
stroke-width: 6;
38-
opacity: 0.2;
39-
}
40-
.rank-circle {
41-
stroke: #2f80ed;
42-
stroke-dasharray: 250;
43-
fill: none;
44-
stroke-width: 6;
45-
stroke-linecap: round;
46-
opacity: 0.8;
47-
transform-origin: -10px 8px;
48-
transform: rotate(-90deg);
49-
animation: rankAnimation 1s forwards ease-in-out;
32+
@keyframes growWidthAnimation {
33+
from {
34+
width: 0;
35+
}
36+
to {
37+
width: 100%;
38+
}
39+
}
40+
.lang-name {
41+
font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
42+
fill: #434d58;
43+
}
44+
.stagger {
45+
opacity: 0;
46+
animation: fadeInAnimation 0.3s ease-in-out forwards;
47+
}
48+
#rect-mask rect{
49+
animation: fadeInAnimation 1s ease-in-out forwards;
50+
}
51+
52+
@keyframes scaleInAnimation {
53+
from {
54+
transform: translate(-5px, 5px) scale(0);
55+
}
56+
to {
57+
transform: translate(-5px, 5px) scale(1);
58+
}
59+
}
60+
@keyframes fadeInAnimation {
61+
from {
62+
opacity: 0;
63+
}
64+
to {
65+
opacity: 1;
66+
}
5067
}
5168
@keyframes rankAnimation {
5269
from {
@@ -72,61 +89,111 @@
7289
opacity: 1;
7390
}
7491
}
75-
76-
7792
</style>
78-
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="449" fill="#fffefe" stroke-opacity="1"/>
79-
<g data-testid="card-title" transform="translate(25, 35)">
80-
<g transform="translate(0, 0)">
81-
<text x="0" y="0" class="header" data-testid="header"><a href="https://github.com/<%- username %>/<%- repo %>/"><%- username %> / <%- repo %></a></text>
82-
</g>
83-
</g>
84-
<g data-testid="main-card-body" transform="translate(0, 55)">
85-
<g data-testid="rank-circle" transform="translate(365, 47.5)">
86-
<circle class="rank-circle-rim" cx="-10" cy="8" r="40"/>
87-
<circle class="rank-circle" cx="-10" cy="8" r="40"/>
88-
<g class="rank-text">
89-
<text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">
90-
A+
91-
</text>
92-
</g>
93-
</g>
94-
<svg x="0" y="0">
93+
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="639" fill="#fffefe" stroke-opacity="1"/>
94+
<g data-testid="card-title" transform="translate(25, 35)"><g transform="translate(0, 0)"><text x="0" y="0" class="header" data-testid="header"><a href="https://github.com/<%- username %>/<%- repo %>/"><%- username %> / <%- repo %></a></text></g></g>
95+
<g data-testid="main-card-body" transform="translate(0, 55)"><svg x="0" y="0">
9596
<g transform="translate(0, 0)">
9697
<g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
9798
<svg xmlns="http://www.w3.org/2000/svg" data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
9899
<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
99100
</svg>
100101
<text class="stat bold" y="12.5">Stars:</text>
101-
<text class="stat bold" x="169.01" y="12.5" data-testid="stars"><%- stars %></text>
102+
<svg x="169.01" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="oct-icon">
103+
<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
104+
</svg>
105+
<text class="stat bold" x="192.01" y="12.5" data-testid="stars"><%- stars %></text>
102106
</g>
103107
</g><g transform="translate(0, 25)">
104108
<g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
105109
<text class="stat bold" y="12.5">Forks:</text>
106-
<text class="stat bold" x="169.01" y="12.5" data-testid="forks"><%- forks %></text>
110+
<svg x="169.01" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="oct-icon">
111+
<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
112+
</svg>
113+
<text class="stat bold" x="192.01" y="12.5" data-testid="forks"><%- forks %></text>
107114
</g>
108115
</g><g transform="translate(0, 50)">
109116
<g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)">
110117
<text class="stat bold" y="12.5">Watchers:</text>
111-
<text class="stat bold" x="169.01" y="12.5" data-testid="watchers"><%- watchers %></text>
118+
<svg class="oct-icon" x="169.01" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true">
119+
<path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path>
120+
</svg>
121+
<text class="stat bold" x="192.01" y="12.5" data-testid="watchers"><%- watchers %></text>
112122
</g>
113123
</g><g transform="translate(0, 75)">
114124
<g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)">
115-
116125
<text class="stat bold" y="12.5">Repo Size:</text>
117-
<text class="stat bold" x="169.01" y="12.5" data-testid="size"><%- size %></text>
126+
<svg class="oct-icon" x="170.01" height="16" width="14" viewBox="0 0 14 16" aria-hidden="true" version="1.1"><path d="M6,15 C2.69,15 0,14.1 0,13 L0,11 C0,10.83 0.09,10.66 0.21,10.5 C0.88,11.36 3.21,12 6,12 C8.79,12 11.12,11.36 11.79,10.5 C11.92,10.66 12,10.83 12,11 L12,13 C12,14.1 9.31,15 6,15 L6,15 Z M6,11 C2.69,11 0,10.1 0,9 L0,7 C0,6.89 0.04,6.79 0.09,6.69 L0.09,6.69 C0.12,6.63 0.16,6.56 0.21,6.5 C0.88,7.36 3.21,8 6,8 C8.79,8 11.12,7.36 11.79,6.5 C11.84,6.56 11.88,6.63 11.91,6.69 L11.91,6.69 C11.96,6.79 12,6.9 12,7 L12,9 C12,10.1 9.31,11 6,11 L6,11 Z M6,7 C2.69,7 0,6.1 0,5 L0,4 L0,3 C0,1.9 2.69,1 6,1 C9.31,1 12,1.9 12,3 L12,4 L12,5 C12,6.1 9.31,7 6,7 L6,7 Z M6,2 C3.79,2 2,2.45 2,3 C2,3.55 3.79,4 6,4 C8.21,4 10,3.55 10,3 C10,2.45 8.21,2 6,2 L6,2 Z" fill-rule="evenodd"></path></svg>
127+
<text class="stat bold" x="189.01" y="12.5" data-testid="size"><%- size %></text>
118128
</g>
119129
</g><g transform="translate(0, 100)">
120130
<g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)">
121131

122132
<text class="stat bold" y="12.5">License:</text>
123-
<svg x="169.01" height="16" width="16" viewBox="0 0 16 16" version="1.1" display="block" fill="#8b849e">
133+
<svg aria-hidden="true" x="169.01" height="16" width="16" viewBox="0 0 16 16" version="1.1" class="oct-icon">
124134
<path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
125135
</svg>
126136
<text class="stat bold" x="189.01" y="12.5" data-testid="license"><%- license %></text>
127137
</g>
128138
</g>
129-
</svg>
139+
</svg></g>
140+
<g xmlns="http://www.w3.org/2000/svg" transform="translate(280, 55)" data-testid="main-card-body">
141+
142+
<svg data-testid="lang-items" x="25">
143+
144+
<mask id="rect-mask">
145+
<rect x="0" y="0" width="300" height="8" fill="white" rx="5"/>
146+
</mask>
147+
148+
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="0" y="0" width="230.36" height="8" fill="#f1e05a"/>
149+
150+
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="230.36" y="0" width="30.53" height="8" fill="#e34c26"/>
130151

152+
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="260.89" y="0" width="29.67" height="8" fill="#3178c6"/>
153+
154+
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="290.56" y="0" width="18.08" height="8" fill="#563d7c"/>
155+
156+
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="298.64" y="0" width="11.370000000000001" height="8" fill="#5686a5"/>
157+
158+
159+
<g transform="translate(0, 25)">
160+
<g transform="translate(0, 0)"><g transform="translate(0, 0)">
161+
<g class="stagger" style="animation-delay: 450ms">
162+
<circle cx="5" cy="6" r="5" fill="#f1e05a"/>
163+
<text data-testid="lang-name" x="15" y="10" class="lang-name">
164+
JavaScript 76.79%
165+
</text>
166+
</g>
167+
</g><g transform="translate(0, 25)">
168+
<g class="stagger" style="animation-delay: 600ms">
169+
<circle cx="5" cy="6" r="5" fill="#e34c26"/>
170+
<text data-testid="lang-name" x="15" y="10" class="lang-name">
171+
HTML 10.18%
172+
</text>
173+
</g>
174+
</g><g transform="translate(0, 50)">
175+
<g class="stagger" style="animation-delay: 750ms">
176+
<circle cx="5" cy="6" r="5" fill="#3178c6"/>
177+
<text data-testid="lang-name" x="15" y="10" class="lang-name">
178+
TypeScript 9.89%
179+
</text>
180+
</g>
181+
</g></g><g transform="translate(150, 0)"><g transform="translate(0, 0)">
182+
<g class="stagger" style="animation-delay: 450ms">
183+
<circle cx="5" cy="6" r="5" fill="#563d7c"/>
184+
<text data-testid="lang-name" x="15" y="10" class="lang-name">
185+
CSS 2.69%
186+
</text>
187+
</g>
188+
</g><g transform="translate(0, 25)">
189+
<g class="stagger" style="animation-delay: 600ms">
190+
<circle cx="5" cy="6" r="5" fill="#5686a5"/>
191+
<text data-testid="lang-name" x="15" y="10" class="lang-name">
192+
GLSL 0.46%
193+
</text>
194+
</g>
195+
</g></g>
196+
</g>
197+
</svg>
131198
</g>
132199
</svg>

0 commit comments

Comments
 (0)