Add copy to clipboard to code blocks

This commit is contained in:
BBaoVanC 2023-01-20 17:14:18 -06:00
parent a26ea62b60
commit 47d6d02186
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
7 changed files with 58 additions and 11 deletions

View File

@ -689,12 +689,23 @@ table.markdown {
background-color: var(--background-1); background-color: var(--background-1);
border-radius: 8px; border-radius: 8px;
} }
.code-block > .code-type { .code-block > .code-header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: var(--background-2); background-color: var(--background-2);
padding: 4px 8px; padding: 4px 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
}
.code-block > .code-header > .code-type {
border-top-left-radius: 8px;
font-family: monospace; font-family: monospace;
margin: auto 0;
}
/* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button:hover {
cursor: pointer;
} }
.code-block > .highlight { .code-block > .highlight {
margin: 8px 4px; margin: 8px 4px;

View File

@ -1,8 +0,0 @@
const backToTop = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
}

30
assets/js/bobatheme.js Normal file
View File

@ -0,0 +1,30 @@
// back to top
const backToTop = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
}
// code block copy to clipboard
window.onload = () => {
document.querySelectorAll(".code-block").forEach(codeBlock => {
const button = codeBlock.querySelector(".code-header > .code-copy-button");
// TODO: maybe get this from HTMLElement.innerText on the actual code block content element
// but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset)
const rawCode = codeBlock.querySelector("pre.code-raw").innerText;
const originalCopyText = button.innerHTML;
button.onclick = event => {
navigator.clipboard.writeText(rawCode);
console.log(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something
event.target.innerHTML = "Copied!";
setTimeout(() => {
event.target.innerHTML = originalCopyText;
}, 3000);
}
});
}

View File

@ -14,6 +14,9 @@ latest_posts:
see_also: see_also:
other: "SEE ALSO:" other: "SEE ALSO:"
copy_to_clipboard:
other: "Copy"
# Meta items # Meta items
long_date: long_date:

View File

@ -14,6 +14,9 @@ latest_posts:
see_also: see_also:
other: "Véase también:" other: "Véase también:"
copy_to_clipboard:
other: "Copiar"
# Meta items # Meta items
long_date: long_date:

View File

@ -1,5 +1,13 @@
<div class="code-block"> <div class="code-block">
<div class="code-type">{{ .Type }}</div> <div class="code-header">
<span class="code-type">{{ .Type }}</span>
<a class="code-copy-button">
{{ i18n "copy_to_clipboard" }}
</a>
</div>
{{/* a div.highlight is already created by highlight function */}} {{/* a div.highlight is already created by highlight function */}}
{{ highlight .Inner .Type }} {{ highlight .Inner .Type }}
{{/* for copy to clipboard */}}
<pre class="code-raw" style="display: none;">{{ .Inner }}</pre>
</div> </div>

View File

@ -13,7 +13,7 @@
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }} {{ end }}
{{ with resources.Get "js/back-to-top.js" | fingerprint "sha512" }} {{ with resources.Get "js/bobatheme.js" | fingerprint "sha512" }}
<script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script> <script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }} {{ end }}
{{ with resources.Get "js/share-event.js" | fingerprint "sha512" }} {{ with resources.Get "js/share-event.js" | fingerprint "sha512" }}