Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-docs. quick setup, simple, minimalistic docs for your github project flo-bit.dev/tiny-docs
Something went wrong. Try again.
2.0 kB · 52 lines
Astro
at commit fc61b6a3
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script is:inline> document.addEventListener("DOMContentLoaded", () => { let copyButtonLabel = "copy"; let codeBlocks = Array.from(document.querySelectorAll("pre")); for (let codeBlock of codeBlocks) { let wrapper = document.createElement("div"); wrapper.style.position = "relative";
let copyButton = document.createElement("button"); copyButton.className = "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"; copyButton.innerHTML = copyButtonLabel;
// Add class 'group' to codeBlock codeBlock.classList.add("group");
codeBlock.setAttribute("tabindex", "0"); codeBlock.appendChild(copyButton);
// Wrap the codeBlock with the wrapper div let parent = codeBlock.parentNode; if (parent) { parent.insertBefore(wrapper, codeBlock); wrapper.appendChild(codeBlock); }
copyButton.addEventListener("click", async () => { await copyCode(codeBlock, copyButton); }); }
async function copyCode(block, button) { let code = block.querySelector("code"); if (!code) return;
let text = code.innerText;
await navigator.clipboard.writeText(text);
let oldLabel = button.innerText; let oldClassName = button.className; button.className = "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"; button.innerText = "copied";
setTimeout(() => { button.innerText = oldLabel; button.className = oldClassName; }, 2000); } });</script>