add copy button to builtin docs

crates/docs/src/static/search.js

@@ -65,4 +65,45 @@
     }
   });
 
+  // Select all <samp> elements that are children of <pre> elements
+const codeBlocks = document.querySelectorAll("pre > samp");
+
+// Iterate over each code block
+codeBlocks.forEach((codeBlock) => {
+  // Create a "Copy" button
+  const copyButton = document.createElement("button");
+  copyButton.classList.add("copy-button");
+  copyButton.textContent = "Copy";
+
+  // Add event listener to copy button
+  copyButton.addEventListener("click", () => {
+    const codeText = codeBlock.innerText;
+    navigator.clipboard.writeText(codeText);
+    copyButton.textContent = "Copied!";
+    copyButton.classList.add("copy-button-copied");
+    copyButton.addEventListener("mouseleave", () => {
+        copyButton.textContent = "Copy";
+        copyButton.classList.remove('copy-button-copied');
+    });
+  });
+
+  // Create a container for the copy button and append it to the document
+  const buttonContainer = document.createElement("div");
+  buttonContainer.classList.add("button-container");
+  buttonContainer.appendChild(copyButton);
+  codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
+
+  // Hide the button container by default
+  buttonContainer.style.display = "none";
+
+  // Show the button container on hover
+  codeBlock.parentNode.addEventListener("mouseenter", () => {
+    buttonContainer.style.display = "block";
+  });
+
+  codeBlock.parentNode.addEventListener("mouseleave", () => {
+    buttonContainer.style.display = "none";
+  });
+});
+
 })();

crates/docs/src/static/styles.css

@@ -656,3 +656,28 @@ samp .dim,
 code .dim {
   opacity: 0.55;
 }
+
+pre {
+  position: relative;
+}
+
+.button-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.copy-button {
+  background: none;
+  border: 1px solid var(--magenta);
+  color: var(--magenta);
+  border-radius: 3px;
+  display: inline-block;
+  cursor: pointer;
+  margin: 8px;
+}
+
+.copy-button:hover {
+  border-color: var(--green);
+  color: var(--green);
+}