oppi.li
atproto pastebin service: https://plonk.li
add copy button
authored by
Tangled
a00a2f7f
5bb9d4dc
+28
-9
src/public/styles.css
+28
-9
src/public/styles.css
···
5
5
font-style: monospace;
6
6
}
7
7
8
+
@media (prefers-color-scheme: dark) {
9
+
.shiki,
10
+
.shiki span {
11
+
color: var(--shiki-dark) !important;
12
+
background-color: var(--shiki-dark-bg) !important;
13
+
font-style: var(--shiki-dark-font-style) !important;
14
+
font-weight: var(--shiki-dark-font-weight) !important;
15
+
text-decoration: var(--shiki-dark-text-decoration) !important;
16
+
}
17
+
}
18
+
8
19
:root {
9
20
/* Light mode colors */
10
21
--bg-color: white;
···
254
265
color: rgba(115,138,148,.4)
255
266
}
256
267
257
-
@media (prefers-color-scheme: dark) {
258
-
.shiki,
259
-
.shiki span {
260
-
color: var(--shiki-dark) !important;
261
-
background-color: var(--shiki-dark-bg) !important;
262
-
font-style: var(--shiki-dark-font-style) !important;
263
-
font-weight: var(--shiki-dark-font-weight) !important;
264
-
text-decoration: var(--shiki-dark-text-decoration) !important;
265
-
}
268
+
#copy-btn {
269
+
background: none;
270
+
border: none;
271
+
padding: 0;
272
+
color: var(--text-color-muted);
273
+
cursor: pointer;
274
+
text-decoration: none;
275
+
font-family: inherit;
276
+
font-size: inherit;
277
+
}
278
+
279
+
#copy-btn:hover {
280
+
text-decoration: underline;
281
+
}
282
+
283
+
#copy-btn:focus {
284
+
outline: 1px solid var(--accent);
266
285
}
+29
-2
src/views/paste.pug
+29
-2
src/views/paste.pug
···
15
15
| #{timeDifference(now, Date.parse(paste.createdAt))} ago ·
16
16
| #{paste.lang} ·
17
17
| #{paste.code.split('\n').length} loc ·
18
-
a(href=`/r/${paste.shortUrl}`) raw
18
+
a(href=`/r/${paste.shortUrl}`) raw
19
+
| ·
20
+
button#copy-btn(type="button" onclick="copyToClipboard()" data-code=paste.code) copy
21
+
| ·
22
+
| #{comments.length} #{pluralize(comments.length, 'comment')}
19
23
div.highlighted-code !{paste.highlightedCode}
20
24
hr
21
25
···
43
47
a(href="/login") login
44
48
| to post a comment
45
49
46
-
+footer()
50
+
+footer()
51
+
script.
52
+
async function copyToClipboard() {
53
+
const copyBtn = document.getElementById('copy-btn');
54
+
const originalText = copyBtn.textContent;
55
+
56
+
try {
57
+
const code = copyBtn.dataset.code;
58
+
await navigator.clipboard.writeText(code);
59
+
copyBtn.textContent = 'copied!';
60
+
copyBtn.style.color = 'var(--accent)';
61
+
62
+
setTimeout(() => {
63
+
copyBtn.textContent = originalText;
64
+
copyBtn.style.color = '';
65
+
}, 1500);
66
+
} catch (err) {
67
+
console.error('Failed to copy: ', err);
68
+
copyBtn.textContent = 'copy failed';
69
+
setTimeout(() => {
70
+
copyBtn.textContent = originalText;
71
+
}, 1500);
72
+
}
73
+
}