experimenting with custom copy button

HYP3R00T · Aug 1, 2024 · 0458187 · 0458187
1 parent f5a75a6
commit 0458187
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 2 deletions.
diff --git a/config.ts b/config.ts
@@ -114,7 +114,7 @@ export const Socials: SocialObjects = [
     name: "Discord",
     href: "https://discord.gg/tWZRBhaPhd",
     linkTitle: `${SITE.title} on Discord`,
-    active: true,
+    active: false,
   },
   {
     name: "GitLab",

diff --git a/src/components/core/Copy.tsx b/src/components/core/Copy.tsx
@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Clipboard } from "lucide-react"; // Import icon from lucide-react
+
+export function Copy() {
+  useEffect(() => {
+    function attachCopyButtons() {
+      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 =
+          "copy-code absolute right-3 -top-3 rounded bg-skin-card px-2 py-1 text-xs leading-4 text-skin-base font-medium";
+        copyButton.innerHTML = copyButtonLabel;
+        codeBlock.setAttribute("tabindex", "0");
+        codeBlock.appendChild(copyButton);
+
+        // wrap code block with relative parent element
+        codeBlock?.parentNode?.insertBefore(wrapper, codeBlock);
+        wrapper.appendChild(codeBlock);
+
+        copyButton.addEventListener("click", async () => {
+          await copyCode(codeBlock, copyButton);
+        });
+      }
+
+      async function copyCode(
+        block: HTMLPreElement,
+        button: HTMLButtonElement,
+      ) {
+        let code = block.querySelector("code");
+        let text = code?.innerText;
+
+        await navigator.clipboard.writeText(text ?? "");
+
+        // visual feedback that task is completed
+        button.innerText = "Copied";
+
+        setTimeout(() => {
+          button.innerText = copyButtonLabel;
+        }, 700);
+      }
+    }
+
+    attachCopyButtons();
+  }, []); // Empty dependency array ensures this runs once after the initial render
+
+  return null; // This component does not render any UI itself
+}
diff --git a/src/components/core/Footer.astro b/src/components/core/Footer.astro
@@ -15,7 +15,7 @@ const { class: className } = Astro.props;
       class="text-center text-sm leading-loose text-muted-foreground md:text-left"
     >
       Built by <a
-        href="https://github.com/HYP3R00T"
+        href="https://hyperoot.dev"
         target="_blank"
         rel="noreferrer"
         class="font-medium underline underline-offset-4">HYP3R00T</a

diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
@@ -14,6 +14,8 @@ import { menu, capitalizeFirstLetter } from "@/lib/utils";
 
 import { LOCALE, SITE, docconfig } from "config";
 
+// import { Copy } from "@/components/core/Copy";
+
 const {
   title,
   author,
@@ -41,6 +43,7 @@ const {
   <body
     class=`font-sans ${hide_toc && hide_sidenav && max_width ? "" : "bg-card"}`
   >
+    <!-- <Copy client:only="react" /> -->
     <div class="flex flex-col min-h-screen">
       <Header class="border-b bg-background" />
       <main class="flex flex-1 flex-col md:flex-row container">