copy to clipboard script for astro blog https://twitter.com/ParasocialFix/status/1617942906328985600

Post.astro

<template id="copy-button"><CopyButton /></template>
<script>
  // https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
  if (navigator.clipboard) {
    let copyButton = document.querySelector("#copy-button") as HTMLTemplateElement;
    let blocks = document.querySelectorAll("pre.astro-code");
    blocks.forEach(block => {
      let button = document.createElement("button");
      const icon = copyButton.content.cloneNode(true);
      button.appendChild(icon);
      button.className =
        "flex items-center justify-center absolute top-2 right-2 h-8 w-8 bg-white rounded-lg fog:box-shadow-s text-black hover:text-dusk";
      button.style.animationIterationCount = "1";
      button.addEventListener("click", () => {
        const effects = ["animate-bounce"];
        if (button.classList.contains(effects[0])) return;
        button.classList.add(...effects);
        navigator.clipboard.writeText(block.textContent);
        setTimeout(() => {
          button.classList.remove(...effects);
        }, 1300);
      });
      block.appendChild(button);
    });
  }
</script>