v5: Revenge of the JavaScript 🦸 (#711)

Hugo ➡️ Next.js

components/clipboard/CopyButton.module.scss

@@ -0,0 +1,23 @@
+.copy_button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75em;
+  color: var(--text);
+  background-color: var(--background-inner);
+  border: 1px solid var(--kinda-light);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--link);
+  }
+
+  .octicon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .octicon-check {
+    color: var(--success);
+  }
+}

components/clipboard/CopyButton.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import copy from "copy-to-clipboard";
+import trimNewlines from "trim-newlines";
+
+// react components:
+import { CopyIcon, CheckIcon } from "@primer/octicons-react";
+
+import styles from "./CopyButton.module.scss";
+
+type Props = {
+  content: string;
+  timeout?: number;
+};
+
+export default function CopyButton({ content, timeout = 2000 }: Props) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (e) => {
+    // stop browser from navigating away from page (this shouldn't happen anyways)
+    e.preventDefault();
+    // prevent unintentional double-clicks by unfocusing button
+    e.target.blur();
+
+    // trim any surrounding whitespace from target block's content and send it to the clipboard
+    const didCopy = copy(trimNewlines(content));
+
+    // indicate success
+    setCopied(didCopy);
+  };
+
+  useEffect(() => {
+    // reset everything after given ms (defaults to 2 seconds)
+    if (copied) {
+      const id = setTimeout(() => {
+        setCopied(false);
+      }, timeout);
+
+      return () => clearTimeout(id);
+    }
+
+    return () => {};
+  }, [timeout, copied]);
+
+  return (
+    <button
+      className={styles.copy_button}
+      title="Copy to clipboard"
+      aria-label="Copy to clipboard"
+      onClick={handleCopy}
+      disabled={copied}
+    >
+      {copied ? (
+        <CheckIcon size={16} className={`${styles.octicon} ${styles["octicon-check"]}`} />
+      ) : (
+        <CopyIcon size={16} className={styles.octicon} />
+      )}
+    </button>
+  );
+}