This is my personal website
feat: add dashboard stats ✨
+103
-3
+8
main.tsx
+8
main.tsx
···
5
5
import { footer } from "./src/footer.tsx";
6
6
import { bio } from "./src/bio.tsx";
7
7
import { header } from "./src/header.tsx";
8
+
import { dashboard } from "./src/stats/dashboard.tsx";
9
+
import { recentWork } from "./src/stats/recent_work.tsx";
10
+
import { contributions } from "./src/stats/contributions.tsx";
8
11
9
12
const handler = (_req: Request) =>
10
13
html({
···
18
21
{bio()}
19
22
<br />
20
23
<br />
24
+
{dashboard()}
25
+
<div class="dashboard">
26
+
<div style="flex: 1; margin-right: 20px;">{recentWork()}</div>
27
+
<div style="flex: 1">{contributions()}</div>
28
+
</div>
21
29
{footer()}
22
30
</div>
23
31
</body>
+22
src/stats/contributions.tsx
+22
src/stats/contributions.tsx
···
1
+
/** @jsx h */
2
+
import { h } from "../../deps.ts";
3
+
4
+
export function contributions() {
5
+
return (
6
+
<a
7
+
href="https://next.ossinsight.io/widgets/official/analyze-user-contribution-time-distribution?user_id=15877106&period=all_times"
8
+
target="_blank"
9
+
style="display: block"
10
+
align="center"
11
+
>
12
+
<picture>
13
+
<img
14
+
alt="Contribution Time Distribution of @tsirysndr"
15
+
src="https://next.ossinsight.io/widgets/official/analyze-user-contribution-time-distribution/thumbnail.png?user_id=15877106&period=all_times&image_size=auto&color_scheme=dark"
16
+
style="width: 100%; "
17
+
height="164px"
18
+
/>
19
+
</picture>
20
+
</a>
21
+
);
22
+
}
+33
src/stats/dashboard.tsx
+33
src/stats/dashboard.tsx
···
1
+
/** @jsx h */
2
+
import { h } from "../../deps.ts";
3
+
4
+
export function dashboard() {
5
+
return (
6
+
<div>
7
+
<a
8
+
href="https://next.ossinsight.io/widgets/official/compose-user-dashboard-stats?user_id=15877106"
9
+
target="_blank"
10
+
style="display: block"
11
+
align="center"
12
+
>
13
+
<picture>
14
+
<img
15
+
alt="Dashboard stats of @tsirysndr"
16
+
src="https://next.ossinsight.io/widgets/official/compose-user-dashboard-stats/thumbnail.png?user_id=15877106&image_size=auto&color_scheme=dark"
17
+
style="width: 100%;margin-bottom: 20px;"
18
+
height="auto"
19
+
/>
20
+
</picture>
21
+
</a>
22
+
<a href="https://ossinsight.io/analyze/tsirysndr">
23
+
<picture>
24
+
<img
25
+
src="https://github-readme-activity-graph.vercel.app/graph?username=tsirysndr&theme=react-light&hide_border=true&hide_title=false&area=true&custom_title=Total%20contribution%20graph%20in%20all%20repo"
26
+
style="width: 100%; margin-bottom: 20px;"
27
+
alt="activity graph"
28
+
/>
29
+
</picture>
30
+
</a>
31
+
</div>
32
+
);
33
+
}
+22
src/stats/recent_work.tsx
+22
src/stats/recent_work.tsx
···
1
+
/** @jsx h */
2
+
import { h } from "../../deps.ts";
3
+
4
+
export function recentWork() {
5
+
return (
6
+
<a
7
+
href="https://next.ossinsight.io/widgets/official/compose-currently-working-on?user_id=15877106&activity_type=all"
8
+
target="_blank"
9
+
style="display: block"
10
+
align="center"
11
+
>
12
+
<picture>
13
+
<img
14
+
alt="@tsirysndr's Recent Work - Last 28 days"
15
+
src="https://next.ossinsight.io/widgets/official/compose-currently-working-on/thumbnail.png?user_id=15877106&activity_type=all&image_size=auto&color_scheme=dark"
16
+
style="width: 100%;"
17
+
height="auto"
18
+
/>
19
+
</picture>
20
+
</a>
21
+
);
22
+
}
+17
-2
src/styles.ts
+17
-2
src/styles.ts
···
2
2
"html, body { margin: 0; height: 100%; }",
3
3
`body {
4
4
font-family: "Outfit", sans-serif;
5
-
background: #040435;
5
+
background: #1f1e28;
6
6
color: #fff;
7
7
display: flex;
8
8
flex-direction: column;
9
9
font-size: 19px;
10
10
}`,
11
11
`a {
12
-
color: #12ff7d;
12
+
color: #1effc3;
13
13
text-decoration: none;
14
14
}`,
15
15
`
···
47
47
opacity: 0;
48
48
}
49
49
}
50
+
`,
51
+
`
52
+
.dashboard {
53
+
display: flex;
54
+
flex-direction: row;
55
+
margin-bottom: 100px;
56
+
}
57
+
@media (max-width: 768px) {
58
+
.dashboard {
59
+
display: flex;
60
+
flex-direction: column;
61
+
margin-bottom: 100px;
62
+
}
63
+
}
64
+
50
65
`,
51
66
];