Add code copy button
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Isaac Mills 2024-04-23 08:12:30 -04:00
parent 4017705026
commit 47b613cf43
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
3 changed files with 35 additions and 2 deletions

View file

@ -91,6 +91,7 @@
type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="{{base_url}}/js/webflow.js" type="text/javascript"></script> <script src="{{base_url}}/js/webflow.js" type="text/javascript"></script>
<script src="{{base_url}}/js/code_copy.js" type="text/javascript"></script>
</body> </body>
</html> </html>

View file

@ -5,7 +5,7 @@
} }
body { body {
font-family: 'Arimo', sans-serif; font-family: 'Arimo', 'Arial', sans-serif;
} }
code { code {
@ -328,4 +328,4 @@ article>* {
.text-block { .text-block {
font-size: 6vw; font-size: 6vw;
} }
} }

32
templates/js/code_copy.js Normal file
View file

@ -0,0 +1,32 @@
const copyButtonLabel = "Copy Code";
// use a class selector if available
let blocks = document.querySelectorAll("pre");
blocks.forEach((block) => {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let button = document.createElement("button");
button.innerText = copyButtonLabel;
block.appendChild(button);
button.addEventListener("click", async () => {
await copyCode(block);
});
}
});
async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = "Code Copied";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}