docs: add copy buttons (freshframework#3393)

Author: marvinhagemeister

www/assets/styles.css

@@ -93,3 +93,17 @@ html[data-theme="dark"] ::selection {
   background-size: 1.5em 1.5em;
   background-repeat: no-repeat;
 }
+
+.group:not([data-copied]) .group-not-copied {
+  display: block;
+}
+.group[data-copied] .group-not-copied {
+  display: none;
+}
+
+.group[data-copied] .group-copied {
+  display: block;
+}
+.group:not([data-copied]) .group-copied {
+  display: none;
+}

www/client.ts

@@ -1 +1,27 @@
 import "./assets/styles.css";
+
+document.addEventListener("click", async (ev) => {
+  let el = ev.target as HTMLElement | null;
+  if (el === null) return;
+  if (!(el instanceof HTMLButtonElement)) {
+    el = el.closest("button");
+  }
+  if (el === null) return;
+
+  const code = el.dataset.code;
+  if (!code) return;
+
+  el.dataset.copied = "true";
+
+  setTimeout(() => {
+    delete el.dataset.copied;
+  }, 1000);
+
+  try {
+    await navigator.clipboard.writeText(code);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    // deno-lint-ignore no-console
+    console.error(message || "Copy failed");
+  }
+});

www/components/CopyButton.tsx

@@ -0,0 +1,21 @@
+import * as Icons from "./Icons.tsx";
+
+export function CopyButton(props: { code: string }) {
+  return (
+    <div class="relative my-2 mr-4 sm:mr-6">
+      <button
+        type="button"
+        data-code={props.code}
+        aria-label="Copy to Clipboard"
+        class="rounded-sm p-1.5 border border-foreground-secondary/30 hover:bg-foreground-secondary/70 data-copied:text-green-500 relative group cursor-pointer"
+      >
+        <span class="group-copied">
+          <Icons.Check />
+        </span>
+        <span class="group-not-copied">
+          <Icons.Copy />
+        </span>
+      </button>
+    </div>
+  );
+}

www/components/homepage/Hero.tsx

@@ -1,7 +1,7 @@
-import CopyArea from "../../islands/CopyArea.tsx";
 import { FancyLink } from "../../components/FancyLink.tsx";
 import LemonTop from "../../islands/LemonTop.tsx";
 import LemonBottom from "../../islands/LemonBottom.tsx";
+import { CopyButton } from "../CopyButton.tsx";
 
 export function Hero() {
   return (
@@ -26,3 +26,15 @@ export function Hero() {
     </>
   );
 }
+
+function CopyArea(props: { code: string }) {
+  return (
+    <div class="bg-slate-800 rounded-sm text-green-100 flex items-center min-w-0 overflow-x-auto">
+      <pre class="overflow-x-auto w-full flex-1 px-6 py-4">
+        {props.code}
+      </pre>
+
+      <CopyButton code={props.code} />
+    </div>
+  );
+}

www/islands/CopyArea.tsx

@@ -801,7 +801,8 @@ ol.nested li:before {
 .fenced-code-header {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
-  padding: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   background: var(--color-background-tertiary);
   display: flex;
   align-items: center;
@@ -812,13 +813,15 @@ ol.nested li:before {
   border-top-right-radius: 0 !important;
 }
 .fenced-code-title {
-  display: grid;
+  display: flex;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     "Courier New", monospace;
   font-size: 0.8125rem;
   line-height: 1;
-  grid-auto-flow: column;
+  justify-content: space-between;
   align-items: center;
   gap: 0.625rem;
 }

www/static/markdown.css

@@ -176,14 +176,58 @@ class DefaultRenderer extends Marked.Renderer {
 
     if (title || icon) {
       const image = icon
-        ? `<img src="${icon.src}" alt="${icon.text}" title="${icon.text}">`
+        ? `<img src="${icon.src}" alt="${icon.text}" title="${icon.text}" width="20" height="20">`
         : "";
 
       out += `<div class="fenced-code-header">
-        <span class="fenced-code-title lang-${lang}">
-          ${image}
-          ${title ? escapeHtml(String(title)) : "&nbsp;"}
+        <span class="fenced-code-title lang-${lang} w-full">
+          <span class="flex items-center gap-2">
+            ${image}
+            ${title ? escapeHtml(String(title)) : "&nbsp;"}
+          </span>
         </span>
+        ${
+        icon && icon.text !== "Text"
+          ? `<button
+            type="button"
+            data-code="${escapeHtml(text)}"
+            aria-label="Copy to Clipboard"
+            class="rounded-sm flex items-center justify-center border border-foreground-secondary/30 hover:bg-foreground-secondary/70 data-copied:text-green-300 relative group cursor-pointer w-7 h-7 text-white"
+          >
+            <span class="group-copied">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  stroke-width={3}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+            </span>
+            <span class="group-not-copied">
+              <svg
+                class="h-4 w-4"
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  d="M1.55566 2.7C1.55566 2.03726 2.09292 1.5 2.75566 1.5H8.75566C9.41841 1.5 9.95566 2.03726 9.95566 2.7V5.1H12.3557C13.0184 5.1 13.5557 5.63726 13.5557 6.3V12.3C13.5557 12.9627 13.0184 13.5 12.3557 13.5H6.35566C5.69292 13.5 5.15566 12.9627 5.15566 12.3V9.9H2.75566C2.09292 9.9 1.55566 9.36274 1.55566 8.7V2.7ZM6.35566 9.9V12.3H12.3557V6.3H9.95566V8.7C9.95566 9.36274 9.41841 9.9 8.75566 9.9H6.35566ZM8.75566 8.7V2.7L2.75566 2.7V8.7H8.75566Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </button>`
+          : ""
+      }
       </div>`;
     }