website
git clone https://git.pyrossh.dev/website
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
8be9c52
— pyrossh
2026-08-05T21:58:19+05:30
improvements
- assets/client.js +13 -0
- assets/css/repos.css +46 -6
- src/_includes/repo-layout.njk +8 -2
assets/client.js
CHANGED
|
@@ -33,3 +33,16 @@ document.addEventListener("click", (e) => {
|
|
|
33
33
|
if (current) current.classList.remove("active-file");
|
|
34
34
|
link.classList.add("active-file");
|
|
35
35
|
});
|
|
36
|
+
|
|
37
|
+
// Copies the git clone command shown in the repo header (see .clone-cmd in
|
|
38
|
+
// repos.css) and flips the button to a checkmark for a bit as feedback,
|
|
39
|
+
// instead of a tooltip/toast that would need its own positioning logic.
|
|
40
|
+
document.addEventListener("click", (e) => {
|
|
41
|
+
const btn = e.target.closest(".copy-btn");
|
|
42
|
+
if (!btn) return;
|
|
43
|
+
navigator.clipboard.writeText(btn.dataset.clone).then(() => {
|
|
44
|
+
clearTimeout(btn._copyResetTimer);
|
|
45
|
+
btn.classList.add("copied");
|
|
46
|
+
btn._copyResetTimer = setTimeout(() => btn.classList.remove("copied"), 1500);
|
|
47
|
+
});
|
|
48
|
+
});
|
assets/css/repos.css
CHANGED
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
background: var(--color-box-bg);
|
|
31
31
|
color: var(--color-text);
|
|
32
32
|
font-size: 0.95rem;
|
|
33
|
+
padding: 1rem;
|
|
33
34
|
|
|
34
35
|
a {
|
|
35
36
|
color: var(--color-link);
|
|
@@ -69,15 +70,54 @@
|
|
|
69
70
|
font-weight: 500;
|
|
70
71
|
}
|
|
71
72
|
|
|
72
|
-
h3 {
|
|
73
|
+
h3.clone-cmd {
|
|
74
|
+
display: flex;
|
|
73
|
-
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: space-between;
|
|
74
77
|
font-weight: 400;
|
|
75
|
-
|
|
78
|
+
font-size: 0.85rem;
|
|
76
|
-
padding: 0.5rem 0.75rem;
|
|
77
|
-
|
|
79
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
78
|
-
border-radius: 4px;
|
|
79
80
|
overflow-x: auto;
|
|
80
81
|
white-space: pre;
|
|
82
|
+
width: fit-content;
|
|
83
|
+
|
|
84
|
+
.copy-btn {
|
|
85
|
+
flex-shrink: 0;
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
width: 1.6rem;
|
|
90
|
+
height: 1.6rem;
|
|
91
|
+
padding: 0;
|
|
92
|
+
border: none;
|
|
93
|
+
border-radius: 4px;
|
|
94
|
+
background: none;
|
|
95
|
+
color: var(--color-text);
|
|
96
|
+
opacity: 0.6;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
|
|
99
|
+
&:hover {
|
|
100
|
+
opacity: 1;
|
|
101
|
+
background: var(--color-box-bg);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.icon-check {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&.copied {
|
|
109
|
+
opacity: 1;
|
|
110
|
+
color: var(--color-tag);
|
|
111
|
+
|
|
112
|
+
.icon-copy {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.icon-check {
|
|
117
|
+
display: block;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
81
121
|
}
|
|
82
122
|
|
|
83
123
|
.headerExtension h2 {
|
src/_includes/repo-layout.njk
CHANGED
|
@@ -2,10 +2,16 @@
|
|
|
2
2
|
{{ iconSpriteDefs() | safe }}
|
|
3
3
|
<div class="repo">
|
|
4
4
|
<div class="header">
|
|
5
|
-
<h1><
|
|
5
|
+
<h1><span style="view-transition-name:repo-title-{{ title }}">{{ title }}</span></h1>
|
|
6
6
|
<div class="tags">{% for tag in tags %}<span class="tag">#{{ tag }}</span>{% endfor %}</div>
|
|
7
7
|
</div>
|
|
8
|
-
<h3
|
|
8
|
+
<h3 class="clone-cmd">
|
|
9
|
+
<p>git clone <span class="tag">https://git.pyrossh.dev/{{ title }}</span></p>
|
|
10
|
+
<button type="button" class="copy-btn" data-clone="git clone https://git.pyrossh.dev/{{ title }}" aria-label="Copy clone command">
|
|
11
|
+
<svg class="icon-copy" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
12
|
+
<svg class="icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
13
|
+
</button>
|
|
14
|
+
</h3>
|
|
9
15
|
<div class="headerExtension"><h2>{{ desc }}</h2></div>
|
|
10
16
|
<hr />
|
|
11
17
|
<div class="nav">
|