flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
2.0 kB
52 lines
1<script is:inline>
2 document.addEventListener("DOMContentLoaded", () => {
3 let copyButtonLabel = "copy";
4 let codeBlocks = Array.from(document.querySelectorAll("pre"));
5 for (let codeBlock of codeBlocks) {
6 let wrapper = document.createElement("div");
7 wrapper.style.position = "relative";
8
9 let copyButton = document.createElement("button");
10 copyButton.className =
11 "opacity-0 focus:opacity-100 focus:outline-base-600 dark:focus:outline-base-400 group-hover:opacity-100 w-16 transition-opacity duration-500 absolute top-3 right-3 text-xs bg-base-200 dark:bg-base-800 outline outline-base-400 dark:outline-base-800 py-1 px-2 rounded-xl dark:hover:bg-base-700 hover:bg-base-300";
12 copyButton.innerHTML = copyButtonLabel;
13
14 // Add class 'group' to codeBlock
15 codeBlock.classList.add("group");
16
17 codeBlock.setAttribute("tabindex", "0");
18 codeBlock.appendChild(copyButton);
19
20 // Wrap the codeBlock with the wrapper div
21 let parent = codeBlock.parentNode;
22 if (parent) {
23 parent.insertBefore(wrapper, codeBlock);
24 wrapper.appendChild(codeBlock);
25 }
26
27 copyButton.addEventListener("click", async () => {
28 await copyCode(codeBlock, copyButton);
29 });
30 }
31
32 async function copyCode(block, button) {
33 let code = block.querySelector("code");
34 if (!code) return;
35
36 let text = code.innerText;
37
38 await navigator.clipboard.writeText(text);
39
40 let oldLabel = button.innerText;
41 let oldClassName = button.className;
42 button.className =
43 "opacity-100 transition-opacity duration-500 w-16 absolute top-3 right-3 text-xs bg-green-200 dark:bg-green-900 outline outline-green-300 dark:outline-green-700 text-green-800 dark:text-green-300 py-1 px-2 rounded-xl";
44 button.innerText = "copied";
45
46 setTimeout(() => {
47 button.innerText = oldLabel;
48 button.className = oldClassName;
49 }, 2000);
50 }
51 });
52</script>