initial commit

src/components/hooks/CreateCopyButtons.astro

@@ -0,0 +1,52 @@
+---
+
+---
+
+<script>
+  setTimeout(() => {
+  // code copy
+  let blocks = document.querySelectorAll("pre");
+  if (blocks.length > 0) {
+    blocks.forEach((block) => {
+      let button = document.createElement("button");
+      button.className = "copy-button";
+      button.innerHTML = `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
+      />
+    </svg>
+    `;
+      button.onclick = () => {
+        let snippet = block.innerText ?? "";
+        navigator.clipboard.writeText(snippet);
+        button.classList.toggle("copied");
+        setTimeout(() => button.classList.remove("copied"), 1000);
+      };
+      block.appendChild(button);
+    });
+  }
+  }, 3001)
+
+  // heading copy
+  let headings = document.getElementsByClassName("heading")
+  if (headings.length > 0) {
+    for (const heading of headings) {
+      let button = heading.querySelector("span")
+      if (button) {
+        button.onclick = () => {
+          let link = window.location.href.split("#")[0];
+          link += `#-${heading.textContent?.slice(10).trimEnd().replaceAll(" ", "-").toLowerCase()}`;
+          navigator.clipboard.writeText(link);
+          heading.classList.toggle("copied")
+          setTimeout(() => heading.classList.remove("copied"), 1000);
+        }
+      }
+    }
+  }
+</script>