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

Commit 5e75a5a

Browse files
zmh-programzmh-program
committed
1.16
1 parent ad4870d commit 5e75a5a

5 files changed

Lines changed: 63 additions & 275 deletions

File tree

‎config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ module.exports = {
22
token: process.env.CODE_STATISTIC, // GitHub Access Token (Minimum permissions). Increase QPS of GitHub APIs.
33
expiration: 3600, // expiration second
44
requires: ["*"], // CODE STATISTIC can only be parsed for allowed users. ( * indicates that all users are allowed )
5-
port: 80, // server port
5+
port: 8000, // server port
66
}

‎views/error.ejs‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,6 @@
11
<svg width="450" height="195" viewBox="0 0 660 216" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
2-
<title id="titleId">Error</title>
3-
<desc id="descId">User Code Statistics</desc>
4-
<style>
5-
.header {
6-
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
7-
fill: <%- dark ? "#fff" : "#434d58" %>;
8-
animation: fadeInAnimation 0.8s ease-in-out forwards;
9-
}
10-
@supports(-moz-appearance: auto) {
11-
.header { font-size: 15.5px; }
12-
}
13-
.bold { font-weight: 700 }
14-
#rect-mask rect{
15-
animation: fadeInAnimation 1s ease-in-out forwards;
16-
}
17-
18-
@keyframes fadeInAnimation {
19-
from {
20-
opacity: 0;
21-
}
22-
to {
23-
opacity: 1;
24-
}
25-
}
26-
</style>
2+
<title id="titleId">Error</title><desc id="descId">User Code Statistics</desc>
3+
<style>.header {font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;fill: <%- dark ? "#fff" : "#434d58" %>;animation: fadeInAnimation 0.8s ease-in-out forwards} @supports(appearance: auto) {.header {font-size: 16px}} #rect-mask rect{animation: fadeInAnimation 1s ease-in-out forwards} @keyframes fadeInAnimation {from {opacity:0}to{opacity:1}}</style>
274
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="659" fill="<%- dark ? "#000" : "#fffefe" %>" stroke-opacity="1"/>
285
<g data-testid="card-title" transform="translate(200, 108)"><g transform="translate(0, 0)"><text x="0" y="0" class="header" data-testid="header">Sorry, there is something wrong...</text></g></g>
296
</svg>

‎views/index.ejs‎

Lines changed: 58 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,68 @@
11
<!DOCTYPE html>
22
<html lang="en" class="dark">
3-
<head>
4-
<title>Code Statistic</title>
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/index.css">
7-
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/theme-chalk/base.css">
8-
<style>
9-
html, body {
10-
padding: 0;
11-
margin: 0;
12-
display: flex;
13-
align-items: center;
14-
justify-content: center;
15-
gap: 8px;
16-
width: 100%;
17-
height: 100%;
18-
overflow: auto;
19-
background: #fafcf1;
20-
}
21-
#app {
22-
position: absolute;
23-
top: 8px;
24-
display: flex;
25-
flex-direction: column;
26-
gap: 8px;
27-
margin: 30px;
28-
width: 80%;
29-
min-width: 220px;
30-
max-width: 500px;
31-
}
32-
#generate {
33-
margin: 0 auto;
34-
transform: translateY(20px);
35-
}
36-
#preview {
37-
width: 100%;
38-
}
39-
* {
40-
font-family: Consolas, Nunito, monospace, Serif;
41-
}
42-
</style>
43-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
44-
<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/index.full.js"></script>
45-
</head>
3+
<head><title>Code Statistic</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/index.css"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/theme-chalk/base.css"><style>html, body {padding: 0;margin: 0;display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;height: 100%;overflow: auto;background: #fafcf1;}#app {position: absolute;top: 8px;display: flex;flex-direction: column;gap: 8px;margin: 30px;width: 80%;min-width: 220px;max-width: 500px}#generate {margin: 0 auto;transform: translateY(20px)}#preview {width: 100%}* {font-family: Consolas, Nunito, monospace, Serif}</style><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/index.full.js"></script></head>
464
<body>
475
<div id="app">
48-
<el-card>
49-
<el-form label-width="auto">
50-
<el-form-item label="Username"><el-input v-model="form.username"></el-input></el-form-item>
51-
<el-form-item label="Repo" v-if="isRepo"><el-input v-model="form.repo"></el-input></el-form-item>
52-
<el-form-item label="Type"><el-radio-group v-model="form.type"><el-radio border label="User"></el-radio><el-radio border label="Repo"></el-radio></el-radio-group></el-form-item>
53-
<el-form-item label="Dark Mode"><el-switch v-model="form.dark"></el-switch></el-form-item>
54-
<el-form-item><el-button type="primary" @click="generate" id="generate">Generate</el-button></el-form-item>
55-
</el-form>
56-
</el-card>
57-
<el-card>
58-
<template v-if="! link"><el-empty image-size="80"></el-empty></template>
59-
<template v-else><el-form-item label="Link"><el-input readonly v-model="link"></el-input></el-form-item><img id="preview" :src="link" alt></template>
60-
</el-card>
6+
<el-card>
7+
<el-form label-width="auto">
8+
<el-form-item label="Username"><el-input v-model="form.username"></el-input></el-form-item>
9+
<el-form-item label="Repo" v-if="isRepo"><el-input v-model="form.repo"></el-input></el-form-item>
10+
<el-form-item label="Type"><el-radio-group v-model="form.type"><el-radio-button border label="User"></el-radio-button><el-radio-button border label="Repo"></el-radio-button></el-radio-group></el-form-item>
11+
<el-form-item label="Theme"><el-radio-group v-model="form.theme"><el-radio-button border label="Light"></el-radio-button><el-radio-button border label="Dark"></el-radio-button></el-radio-group></el-form-item>
12+
<el-form-item><el-button type="primary" @click="generate" id="generate">Generate</el-button></el-form-item>
13+
</el-form>
14+
</el-card>
15+
<el-card>
16+
<template v-if="! link"><el-empty image-size="80"></el-empty></template>
17+
<template v-else><el-radio-group @change="refresh" class="type" v-model="form.format"><el-radio-button border label="URL"></el-radio-button><el-radio-button border label="Markdown"></el-radio-button><el-radio-button border label="HTML"></el-radio-button><el-radio-button border label="AsciiDoc"></el-radio-button></el-radio-group><el-input readonly v-model="content"></el-input><img id="preview" :src="link" alt></template>
18+
</el-card>
6119
</div>
6220
<script>
63-
const form = Vue.ref({
64-
username: "",
65-
repo: "",
66-
type: "User",
67-
dark: false,
68-
})
69-
const link = Vue.ref("");
70-
const isRepo = Vue.computed(() => form.value.type !== "User");
71-
const throwWarning = msg => ElementPlus.ElMessage({grouping: true, message: msg, showClose: false, type: "warning"})
72-
Vue.createApp({
73-
data() {
74-
return {
75-
form: form,
76-
link: link,
77-
isRepo: isRepo,
78-
generate: () => {
79-
const username = form.value.username.trim(),
80-
repo = form.value.repo.trim(),
81-
dark = !!form.value.dark;
82-
83-
if (! username) {throwWarning("username is empty."); return }
84-
if (isRepo.value && ! repo) {throwWarning("repo is empty."); return }
85-
link.value = location.origin +
86-
((!isRepo.value) ? `/user/${username}/` : `/repo/${username}/${repo}`) +
87-
(dark ? "?theme=dark" : "");
88-
}
89-
}
21+
const form = Vue.ref({
22+
username: "",
23+
repo: "",
24+
type: "User",
25+
theme: "Light",
26+
format: "URL",
27+
})
28+
const link = Vue.ref("");
29+
const content = Vue.ref("");
30+
const isRepo = Vue.computed(() => form.value.type !== "User");
31+
const throwWarning = msg => ElementPlus.ElMessage({grouping: true, message: msg, showClose: false, type: "warning"});
32+
const refresh = () => {
33+
const username = form.value.username.trim(),
34+
repo = form.value.repo.trim(),
35+
format = form.value.format;
36+
const target = isRepo.value ? `${username}/${repo}` : username
37+
switch (format) {
38+
case "URL": content.value = link.value;break;
39+
case "Markdown": content.value = `[![${target}'s Github Stats](${link.value})](https://github.com/zmh-program/code-statistic)`;break;
40+
case "HTML": content.value = `<a href="https://github.com/zmh-program/code-statistic"><img src="${link.value}" alt="${target}'s Github Stats"></a>`;break;
41+
case "AsciiDoc": content.value = `image:${link.value}[${target}'s Github Stats]`;break;
42+
}
43+
}
44+
Vue.createApp({
45+
data() {
46+
return {
47+
form: form,
48+
link: link,
49+
content: content,
50+
isRepo: isRepo,
51+
refresh: refresh,
52+
generate: () => {
53+
const username = form.value.username.trim(),
54+
repo = form.value.repo.trim(),
55+
dark = form.value.theme === "Dark";
56+
if (! username) {throwWarning("username is empty."); return }
57+
if (isRepo.value && ! repo) {throwWarning("repo is empty."); return }
58+
link.value = location.origin +
59+
((!isRepo.value) ? `/user/${username}/` : `/repo/${username}/${repo}`) +
60+
(dark ? "?theme=dark" : "");
61+
refresh();
9062
}
91-
}).use(ElementPlus).mount('#app');
63+
}
64+
}
65+
}).use(ElementPlus).mount('#app');
9266
</script>
9367
</body>
9468
</html>

‎views/repo.ejs‎

Lines changed: 1 addition & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,7 @@
33
<title id="titleId"><%- repo %>'s Code Stats</title>
44
<desc id="descId">Repository Code Statistics</desc>
55
<style>
6-
.oct-icon {
7-
display: block;
8-
fill: #8b849e;
9-
}
10-
.repo-color {
11-
animation: fadeInAnimation 0.8s ease-in-out forwards;
12-
}
13-
.header {
14-
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
15-
fill: #2f80ed;
16-
animation: fadeInAnimation 0.8s ease-in-out forwards;
17-
}
18-
@supports(-moz-appearance: auto) {
19-
.header { font-size: 15.5px; }
20-
}
21-
.stat {
22-
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif;
23-
fill: <%- dark ? "#fff" : "#434d58" %>;
24-
}
25-
@supports(-moz-appearance: auto) {
26-
.stat { font-size:12px; }
27-
}
28-
.stagger {
29-
opacity: 0;
30-
animation: fadeInAnimation 0.3s ease-in-out forwards;
31-
}
32-
.bold { font-weight: 700 }
33-
.icon {
34-
fill: #4c71f2;
35-
display: none;
36-
}
37-
@keyframes growWidthAnimation {
38-
from {
39-
width: 0;
40-
}
41-
to {
42-
width: 100%;
43-
}
44-
}
45-
.lang-name {
46-
font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
47-
fill: <%- dark ? "#fff" : "#434d58" %>;
48-
}
49-
.stagger {
50-
opacity: 0;
51-
animation: fadeInAnimation 0.3s ease-in-out forwards;
52-
}
53-
#rect-mask rect{
54-
animation: fadeInAnimation 1s ease-in-out forwards;
55-
}
56-
57-
@keyframes scaleInAnimation {
58-
from {
59-
transform: translate(-5px, 5px) scale(0);
60-
}
61-
to {
62-
transform: translate(-5px, 5px) scale(1);
63-
}
64-
}
65-
@keyframes rankAnimation {
66-
from {
67-
stroke-dashoffset: 251.32741228718345;
68-
}
69-
to {
70-
stroke-dashoffset: 125.45405959298056;
71-
}
72-
}
73-
@keyframes scaleInAnimation {
74-
from {
75-
transform: translate(-5px, 5px) scale(0);
76-
}
77-
to {
78-
transform: translate(-5px, 5px) scale(1);
79-
}
80-
}
81-
@keyframes fadeInAnimation {
82-
from {
83-
opacity: 0;
84-
}
85-
to {
86-
opacity: 1;
87-
}
88-
}
6+
.oct-icon{display:block;fill:#8b849e;}.repo-color{animation:fadeInAnimation 0.8s ease-in-out forwards;}.header{font:600 18px 'Segoe UI',Ubuntu,Sans-Serif;fill:#2f80ed;animation:fadeInAnimation 0.8s ease-in-out forwards;}@supports(appearance:auto){.header{font-size:15.5px;}}.stat{font:600 14px 'Segoe UI',Ubuntu,"Helvetica Neue",Sans-Serif;fill:<%- dark ? "#fff":"#434d58" %>;}@supports(appearance:auto){.stat{font-size:12px;}}.stagger{opacity:0;animation:fadeInAnimation 0.3s ease-in-out forwards;}.bold{font-weight:700}.icon{fill:#4c71f2;display:none;}@keyframes growWidthAnimation{from{width:0;}to{width:100%;}}.lang-name{font:400 11px "Segoe UI",Ubuntu,Sans-Serif;fill:<%- dark ? "#fff":"#434d58" %>;}.stagger{opacity:0;animation:fadeInAnimation 0.3s ease-in-out forwards;}#rect-mask rect{animation:fadeInAnimation 1s ease-in-out forwards;}@keyframes scaleInAnimation{from{transform:translate(-5px,5px) scale(0);}to{transform:translate(-5px,5px) scale(1);}}@keyframes rankAnimation{from{stroke-dashoffset:251.32741228718345;}to{stroke-dashoffset:125.45405959298056;}}@keyframes scaleInAnimation{from{transform:translate(-5px,5px) scale(0);}to{transform:translate(-5px,5px) scale(1);}}@keyframes fadeInAnimation{from{opacity:0;}to{opacity:1;}}
897
</style>
908
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="659" fill="<%- dark ? "#000" : "#fffefe" %>" stroke-opacity="1"/>
919
<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>

‎views/user.ejs‎

Lines changed: 1 addition & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,88 +2,7 @@
22
<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">
33
<title id="titleId"><%- username %>'s Code Stats</title>
44
<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;
20-
fill: <%- dark ? "#fff" : "#434d58" %>;
21-
}
22-
@supports(-moz-appearance: auto) {
23-
.stat { font-size:12px; }
24-
}
25-
.stagger {
26-
opacity: 0;
27-
animation: fadeInAnimation 0.3s ease-in-out forwards;
28-
}
29-
.bold { font-weight: 700 }
30-
.icon {
31-
fill: #4c71f2;
32-
display: none;
33-
}
34-
@keyframes growWidthAnimation {
35-
from {
36-
width: 0;
37-
}
38-
to {
39-
width: 100%;
40-
}
41-
}
42-
.lang-name {
43-
font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
44-
fill: <%- dark ? "#fff" : "#434d58" %>;
45-
}
46-
.stagger {
47-
opacity: 0;
48-
animation: fadeInAnimation 0.3s ease-in-out forwards;
49-
}
50-
#rect-mask rect{
51-
animation: fadeInAnimation 1s ease-in-out forwards;
52-
}
53-
54-
@keyframes scaleInAnimation {
55-
from {
56-
transform: translate(-5px, 5px) scale(0);
57-
}
58-
to {
59-
transform: translate(-5px, 5px) scale(1);
60-
}
61-
}
62-
@keyframes rankAnimation {
63-
from {
64-
stroke-dashoffset: 251.32741228718345;
65-
}
66-
to {
67-
stroke-dashoffset: 125.45405959298056;
68-
}
69-
}
70-
@keyframes scaleInAnimation {
71-
from {
72-
transform: translate(-5px, 5px) scale(0);
73-
}
74-
to {
75-
transform: translate(-5px, 5px) scale(1);
76-
}
77-
}
78-
@keyframes fadeInAnimation {
79-
from {
80-
opacity: 0;
81-
}
82-
to {
83-
opacity: 1;
84-
}
85-
}
86-
</style>
5+
<style>.oct-icon{display:block;fill:#8b849e;}.header{font:600 18px 'Segoe UI',Ubuntu,Sans-Serif;fill:#2f80ed;animation:fadeInAnimation 0.8s ease-in-out forwards;}@supports(-moz-appearance:auto){.header{font-size:15.5px;}}.stat{font:600 14px 'Segoe UI',Ubuntu,"Helvetica Neue",Sans-Serif;fill:<%- dark ? "#fff":"#434d58" %>;}@supports(-moz-appearance:auto){.stat{font-size:12px;}}.stagger{opacity:0;animation:fadeInAnimation 0.3s ease-in-out forwards;}.bold{font-weight:700}.icon{fill:#4c71f2;display:none;}@keyframes growWidthAnimation{from{width:0;}to{width:100%;}}.lang-name{font:400 11px "Segoe UI",Ubuntu,Sans-Serif;fill:<%- dark ? "#fff":"#434d58" %>;}.stagger{opacity:0;animation:fadeInAnimation 0.3s ease-in-out forwards;}#rect-mask rect{animation:fadeInAnimation 1s ease-in-out forwards;}@keyframes scaleInAnimation{from{transform:translate(-5px,5px) scale(0);}to{transform:translate(-5px,5px) scale(1);}}@keyframes rankAnimation{from{stroke-dashoffset:251.32741228718345;}to{stroke-dashoffset:125.45405959298056;}}@keyframes scaleInAnimation{from{transform:translate(-5px,5px) scale(0);}to{transform:translate(-5px,5px) scale(1);}}@keyframes fadeInAnimation{from{opacity:0;}to{opacity:1;}}</style>
876
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="659" fill="<%- dark ? "#000" : "#fffefe" %>" stroke-opacity="1"/>
887
<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>
898
<g data-testid="main-card-info" transform="translate(0, 55)"><svg x="0" y="0">

0 commit comments

Comments
 (0)