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

Commit 753f91f

Browse files
zmh-programzmh-program
committed
0.20
1 parent 68409d9 commit 753f91f

4 files changed

Lines changed: 150 additions & 24 deletions

File tree

‎index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ app.get('/user/:user/', async function (req, res) {
2424
return;
2525
}
2626
res.type('svg');
27-
res.render('user', await stats.getAccount(username));
27+
res.render('user', await stats.getAccount(username, req.query));
2828
});
2929

3030
app.get('/repo/:user/:repo/', async function (req, res) {
@@ -34,7 +34,7 @@ app.get('/repo/:user/:repo/', async function (req, res) {
3434
return;
3535
}
3636
res.type('svg');
37-
res.render('repo', await stats.getRepository(username, repo));
37+
res.render('repo', await stats.getRepository(username, repo, req.query));
3838
});
3939

4040

‎stats.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -620,9 +620,10 @@ function langHandler(langs) {
620620
}
621621
});
622622
}
623-
async function getAccount(username) {
623+
async function getAccount(username, query={}) {
624624
const response = await cache.requestWithCache(`/users/${username}`);
625625
return {
626+
dark : !! query.dark,
626627
username: username,
627628
followers: decConvert(response['followers']),
628629
repos: response['public_repos'],
@@ -634,10 +635,11 @@ async function getAccount(username) {
634635
};
635636
}
636637

637-
async function getRepository(username, repo) {
638+
async function getRepository(username, repo, query={}) {
638639
// get releases (700ms): (await cache.requestWithCache(`/repos/${username}/${repo}/releases`)).length
639640
const info = await cache.requestWithCache(`/repos/${username}/${repo}`);
640641
return {
642+
dark : !! query.dark,
641643
username: username,
642644
repo: repo,
643645
size: storeConvert(info['size'], 1),

‎views/repo.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
}
8686
}
8787
</style>
88-
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="659" fill="#fffefe" stroke-opacity="1"/>
88+
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="659" fill="<%- dark ? "#e4e2e2" : "#000" %>" stroke-opacity="1"/>
8989
<g data-testid="card-title" transform="translate(40, 35)"><g transform="translate(0, 0)"><circle class="repo-color" cx="-10" cy="-5" r="5" fill="<%- color %>"/><text x="0" y="0" class="header" data-testid="header"><a href="https://github.com/<%- username %>/<%- repo %>/"><%- username %> / <%- repo %></a></text></g></g>
9090
<g data-testid="main-card-info" transform="translate(0, 55)"><svg x="0" y="0">
9191
<g transform="translate(0, 0)">

‎views/user.ejs‎

Lines changed: 143 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,145 @@
1-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="20" role="img" aria-label="404: badge not found">
2-
<title>404: badge not found</title>
3-
<linearGradient id="s" x2="0" y2="100%">
4-
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
5-
<stop offset="1" stop-opacity=".1"/>
6-
</linearGradient>
7-
<clipPath id="r">
8-
<rect width="132" height="20" rx="3" fill="#fff"/>
9-
</clipPath>
10-
<g clip-path="url(#r)">
11-
<rect width="31" height="20" fill="#555"/>
12-
<rect x="31" width="101" height="20" fill="#e05d44"/>
13-
<rect width="132" height="20" fill="url(#s)"/>
14-
</g>
15-
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
16-
<text aria-hidden="true" x="165" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">404</text>
17-
<text x="165" y="140" transform="scale(.1)" fill="#fff" textLength="210">404</text>
18-
<text aria-hidden="true" x="805" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="910">badge not found</text>
19-
<text x="805" y="140" transform="scale(.1)" fill="#fff" textLength="910">badge not found</text>
1+
<% const left = Math.ceil(langs.length / 2); const height = 195 + (left > 4 ? (left - 4) * 20 : 0) %>
2+
<svg width="450" height="195" viewBox="0 0 660 <%- height + 1 %>" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
3+
<title id="titleId"><%- username %>'s Code Stats</title>
4+
<desc id="descId">User Code Statistics</desc>
5+
<style>
6+
.oct-icon {
7+
display: block;
8+
fill: #8b849e;
9+
}
10+
.header {
11+
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
12+
fill: #2f80ed;
13+
animation: fadeInAnimation 0.8s ease-in-out forwards;
14+
}
15+
@supports(-moz-appearance: auto) {
16+
.header { font-size: 15.5px; }
17+
}
18+
.stat {
19+
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
20+
}
21+
@supports(-moz-appearance: auto) {
22+
.stat { font-size:12px; }
23+
}
24+
.stagger {
25+
opacity: 0;
26+
animation: fadeInAnimation 0.3s ease-in-out forwards;
27+
}
28+
.bold { font-weight: 700 }
29+
.icon {
30+
fill: #4c71f2;
31+
display: none;
32+
}
33+
@keyframes growWidthAnimation {
34+
from {
35+
width: 0;
36+
}
37+
to {
38+
width: 100%;
39+
}
40+
}
41+
.lang-name {
42+
font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
43+
fill: #434d58;
44+
}
45+
.stagger {
46+
opacity: 0;
47+
animation: fadeInAnimation 0.3s ease-in-out forwards;
48+
}
49+
#rect-mask rect{
50+
animation: fadeInAnimation 1s ease-in-out forwards;
51+
}
52+
53+
@keyframes scaleInAnimation {
54+
from {
55+
transform: translate(-5px, 5px) scale(0);
56+
}
57+
to {
58+
transform: translate(-5px, 5px) scale(1);
59+
}
60+
}
61+
@keyframes rankAnimation {
62+
from {
63+
stroke-dashoffset: 251.32741228718345;
64+
}
65+
to {
66+
stroke-dashoffset: 125.45405959298056;
67+
}
68+
}
69+
@keyframes scaleInAnimation {
70+
from {
71+
transform: translate(-5px, 5px) scale(0);
72+
}
73+
to {
74+
transform: translate(-5px, 5px) scale(1);
75+
}
76+
}
77+
@keyframes fadeInAnimation {
78+
from {
79+
opacity: 0;
80+
}
81+
to {
82+
opacity: 1;
83+
}
84+
}
85+
</style>
86+
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="659" fill="<%- dark ? "#e4e2e2" : "#000" %>" stroke-opacity="1"/>
87+
<g data-testid="card-title" transform="translate(40, 35)"><g transform="translate(0, 0)"><text x="0" y="0" class="header" data-testid="header"><a href="https://github.com/<%- username %>/"><%- username %></a></text></g></g>
88+
<g data-testid="main-card-info" transform="translate(0, 55)"><svg x="0" y="0">
89+
<g transform="translate(0, 0)">
90+
<g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
91+
<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">
92+
<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"/>
93+
</svg>
94+
<text class="stat bold" y="12.5">Followers:</text>
95+
<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">
96+
<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>
97+
</svg>
98+
<text class="stat bold" x="192.01" y="12.5" data-testid="stars"><%- followers %></text>
99+
</g>
100+
</g><g transform="translate(0, 25)">
101+
<g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
102+
<text class="stat bold" y="12.5">Repos:</text>
103+
<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">
104+
<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>
105+
</svg>
106+
<text class="stat bold" x="192.01" y="12.5" data-testid="forks"><%- repos %></text>
107+
</g>
108+
</g>
109+
</svg></g>
110+
<line x1="290" y1="40" x2="290" y2="186" stroke="#eeecec"></line>
111+
<g xmlns="http://www.w3.org/2000/svg" transform="translate(300, 55)" data-testid="main-card-progress">
112+
113+
<svg data-testid="lang-items" x="25">
114+
<mask id="rect-mask">
115+
<rect x="0" y="0" width="300" height="8" fill="white" rx="5"/>
116+
</mask>
117+
118+
<% langs.forEach(function(lang){ %>
119+
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="<%- lang.cursor * 300 %>" y="0" width="<%- lang.ratio * 300 %>" height="8" fill="<%- lang.color %>"/>
120+
<% }); %>
121+
<g transform="translate(0, 25)">
122+
<g transform="translate(0, 0)">
123+
<% langs.splice(0, left).forEach(function (lang, idx) { %>
124+
<g transform="translate(0, <%- idx * 25 %>)">
125+
<g class="stagger" style="animation-delay: <%- 450 + (idx * 150) %>ms">
126+
<circle cx="5" cy="6" r="5" fill="<%- lang.color %>"/>
127+
<text data-testid="lang-name" x="15" y="10" class="lang-name"><%- lang.text %></text>
128+
</g>
129+
</g>
130+
<% });%>
131+
</g>
132+
<g transform="translate(150, 0)">
133+
<% langs.splice(0, left).forEach(function (lang, idx) { %>
134+
<g transform="translate(0, <%- idx * 25 %>)">
135+
<g class="stagger" style="animation-delay: <%- 450 + (idx * 150) %>ms">
136+
<circle cx="5" cy="6" r="5" fill="<%- lang.color %>"/>
137+
<text data-testid="lang-name" x="15" y="10" class="lang-name"><%- lang.text %></text>
138+
</g>
139+
</g>
140+
<% });%>
141+
</g>
142+
</g>
143+
</svg>
20144
</g>
21145
</svg>

0 commit comments

Comments
 (0)