diff --git a/src/public/styles.css b/src/public/styles.css index 61d3019..32407f3 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -5,6 +5,17 @@ font-style: monospace; } +@media (prefers-color-scheme: dark) { + .shiki, + .shiki span { + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; + } +} + :root { /* Light mode colors */ --bg-color: white; @@ -254,13 +265,21 @@ code .line::before { color: rgba(115,138,148,.4) } -@media (prefers-color-scheme: dark) { - .shiki, - .shiki span { - color: var(--shiki-dark) !important; - background-color: var(--shiki-dark-bg) !important; - font-style: var(--shiki-dark-font-style) !important; - font-weight: var(--shiki-dark-font-weight) !important; - text-decoration: var(--shiki-dark-text-decoration) !important; - } +#copy-btn { + background: none; + border: none; + padding: 0; + color: var(--text-color-muted); + cursor: pointer; + text-decoration: none; + font-family: inherit; + font-size: inherit; +} + +#copy-btn:hover { + text-decoration: underline; +} + +#copy-btn:focus { + outline: 1px solid var(--accent); } \ No newline at end of file diff --git a/src/views/paste.pug b/src/views/paste.pug index aca4c07..f343674 100644 --- a/src/views/paste.pug +++ b/src/views/paste.pug @@ -15,7 +15,11 @@ html | #{timeDifference(now, Date.parse(paste.createdAt))} ago · | #{paste.lang} · | #{paste.code.split('\n').length} loc · - a(href=`/r/${paste.shortUrl}`) raw + a(href=`/r/${paste.shortUrl}`) raw + |  ·  + button#copy-btn(type="button" onclick="copyToClipboard()" data-code=paste.code) copy + |  · + | #{comments.length} #{pluralize(comments.length, 'comment')} div.highlighted-code !{paste.highlightedCode} hr @@ -43,4 +47,27 @@ html a(href="/login") login | to post a comment - +footer() \ No newline at end of file + +footer() + script. + async function copyToClipboard() { + const copyBtn = document.getElementById('copy-btn'); + const originalText = copyBtn.textContent; + + try { + const code = copyBtn.dataset.code; + await navigator.clipboard.writeText(code); + copyBtn.textContent = 'copied!'; + copyBtn.style.color = 'var(--accent)'; + + setTimeout(() => { + copyBtn.textContent = originalText; + copyBtn.style.color = ''; + }, 1500); + } catch (err) { + console.error('Failed to copy: ', err); + copyBtn.textContent = 'copy failed'; + setTimeout(() => { + copyBtn.textContent = originalText; + }, 1500); + } + } \ No newline at end of file