Skip to content

Commit 77e5fcc

Browse files
lowlighterlowlighter
committed
Minor style changes, add new dashboard for server nodes
1 parent d76b7e2 commit 77e5fcc

File tree

7 files changed

+534
-19
lines changed

7 files changed

+534
-19
lines changed

‎action/dist/index.js‎

Lines changed: 15 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "metrics",
3-
"version": "1.3.0",
3+
"version": "1.5.0",
44
"description": "Generate an user's GitHub metrics as SVG image format to embed somewhere else",
55
"main": "index.mjs",
66
"scripts": {

‎src/app.mjs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@
4545
})
4646

4747
//Base routes
48-
app.get("/", (req, res) => res.redirect("https://github.com/lowlighter/metrics"))
48+
app.get("/", (req, res) => res.sendFile(path.resolve("src/html", "index.html")))
49+
app.get("/index.html", (req, res) => res.sendFile(path.resolve("src/html", "index.html")))
50+
app.get("/placeholder.svg", (req, res) => res.sendFile(path.resolve("src/html", "placeholder.svg")))
4951
app.get("/favicon.ico", (req, res) => res.sendStatus(204))
5052

5153
//Metrics

‎src/html/index.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<html>
2+
<head>
3+
<title>📊 GitHub metrics</title>
4+
</head>
5+
<body>
6+
7+
<h1><a href="https://github.com/lowlighter/metrics">GitHub metrics</a></h1>
8+
9+
<label>
10+
<input type="text" name="user" placeholder="Your GitHub username" value="">
11+
</label>
12+
13+
<div id="metrics">
14+
<img class="placeholder" src="/placeholder.svg">
15+
<img class="generated" src="/placeholder.svg">
16+
</div>
17+
18+
<aside>
19+
Embed these metrics on your GitHub profile by adding the markdown below in your <i>README.md</i> at <a id="user-repo" href="#"><span class="user"></span>/<span class="user"></span></a>
20+
<br>
21+
<div class="code">
22+
![<span class="md-alt">GitHub metrics</span>](https://metrics.lecoq.io/my-github-user)
23+
</div>
24+
</aside>
25+
26+
<script>
27+
window.onload = function () {
28+
//User updater
29+
let timeout = null
30+
document.querySelector("input[name=user]").onkeyup = function (event) {
31+
//Retrieve user value
32+
clearTimeout(timeout)
33+
const user = event.target.value
34+
//Display placeholder
35+
document.querySelector("#metrics .placeholder").style.opacity = 1
36+
document.querySelector("#metrics .generated").style.opacity = 0
37+
document.querySelector("aside").style.opacity = 0
38+
//Update github user
39+
document.querySelector(".code").innerText = `![GitHub metrics](https://metrics.lecoq.io/${user})`
40+
document.querySelector("#user-repo").href = `https://github.com/${user}/${user}`
41+
document.querySelectorAll(".user").forEach(node => node.innerText = user)
42+
//Update metrics
43+
if (event.key === "Enter")
44+
metrics(user)
45+
else
46+
timeout = setTimeout(() => metrics(user), 2000)
47+
}
48+
//Metrics updater
49+
let current = null
50+
function metrics(user) {
51+
if (!user.trim().length)
52+
return
53+
if (current !== user) {
54+
current = user
55+
document.querySelector("#metrics .generated").src = `https://metrics.lecoq.io/${user}`
56+
document.querySelector("#metrics .generated").onload = function () {
57+
document.querySelector("#metrics .placeholder").style.opacity = 0
58+
document.querySelector("#metrics .generated").style.opacity = 1
59+
document.querySelector("aside").style.opacity = 1
60+
}
61+
}
62+
}
63+
}
64+
</script>
65+
66+
<style>
67+
body {
68+
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
69+
background-color: #FFFFFF;
70+
color: #1B1F23;
71+
display: flex;
72+
flex-direction: column;
73+
justify-content: center;
74+
align-items: center;
75+
min-height: 100vh;
76+
width: 100vw;
77+
padding: 0;
78+
margin: 0;
79+
}
80+
a, a:hover, a:visited {
81+
color: #0366D6;
82+
text-decoration: none;
83+
font-style: normal;
84+
outline: none;
85+
}
86+
a:hover {
87+
color: #79B8FF;
88+
transition: color .4s;
89+
cursor: pointer;
90+
}
91+
input {
92+
border-radius: .5rem;
93+
padding: .5rem 1rem;
94+
outline: none;
95+
border: 1px solid #E1E4E8;
96+
background-color: #FAFBFC;
97+
color: #1B1F23;
98+
font-size: 1.2rem;
99+
text-align: center;
100+
margin: 0 0 1.5rem;
101+
}
102+
input:focus {
103+
outline: none;
104+
}
105+
#metrics {
106+
position: relative;
107+
max-width: 100%;
108+
width: 480px;
109+
height: 516px;
110+
}
111+
#metrics img {
112+
position: absolute;
113+
top: 0;
114+
left: 0;
115+
width: 100%;
116+
transition: opacity .4s;
117+
}
118+
aside {
119+
opacity: 0;
120+
padding: .25rem;
121+
transition: opacity .4s;
122+
}
123+
.code {
124+
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
125+
padding: 1rem;
126+
margin: .5rem 0;
127+
border-radius: .5rem;
128+
background-color: #FAFBFC;
129+
}
130+
.code .md-alt {
131+
color: #6F42C1;
132+
}
133+
</style>
134+
135+
</body>
136+
</html>

0 commit comments

Comments
 (0)