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">