Merge pull request #1697 from solidjs/docs/fix-copy-to-clipboard

add copy to clipboard button to code snippet

.github/workflows/typecheck.yml

@@ -8,20 +8,31 @@ on:
       - release-*
     tags-ignore:
       - v*
-    paths-ignore:
-      - "docs/**"
-      - "docs.root.tsx"
-      - "components/**"
-      - "**/README.md"
-  pull_request:
-    paths-ignore:
-      - "docs/**"
-      - "**/*.md"
 
 jobs:
+  filter-changes:
+    runs-on: ubuntu-latest
+    outputs:
+      should_skip: ${{ steps.changes.outputs.landing_page }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Get changed files
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            landing_page:
+              - 'docs/**'
+              - "docs.root.tsx"
+              - "components/**"
+              - "**/README.md"
   typecheck:
     name: "👀 Typecheck"
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.changed_files != 0)
+    needs: filter-changes
+    if: needs.filter-changes.outputs.should_skip != 'true'
 
     runs-on: ubuntu-latest
 

docs/src/components/clipboard-button.tsx

@@ -0,0 +1,36 @@
+import { createSignal, Show } from "solid-js";
+import { ClipboardIcon } from "./icons/clipboard-icon";
+
+interface CopyToClipboardProps {
+  class?: string;
+  manager: string;
+  command: string;
+}
+
+export function CopyToClipboard(props: CopyToClipboardProps) {
+  const copyText = () => `${props.manager} ${props.command}`;
+
+  const [isCopied, setIsCopied] = createSignal(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(copyText());
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <button
+      class={props.class}
+      onClick={copyToClipboard}
+      aria-label={isCopied ? "Copied!" : "Copy to clipboard"}
+    >
+      <Show when={isCopied()} fallback={<ClipboardIcon class="h-4 w-4" />}>
+        ✔︎
+      </Show>
+    </button>
+  );
+}

docs/src/components/code-snippet.tsx

@@ -1,9 +1,6 @@
 import { Tabs } from "@kobalte/core/tabs";
 import { createResource, Suspense } from "solid-js";
-// import { YarnIcon } from "./icons/yarn-icon";
-// import { NpmIcon } from "./icons/npm-icon";
-// import { PnpmIcon } from "./icons/pnpm-icon";
-
+import { CopyToClipboard } from "./clipboard-button";
 const getSolidStartVersion = async () => {
   "use server";
 
@@ -66,7 +63,7 @@ export function CodeSnippet() {
   );
 }
 
-function TabContent(props: { manager: string, command: string }) {
+function TabContent(props: { manager: string; command: string }) {
   return (
     <Tabs.Content
       value={props.manager}
@@ -86,8 +83,14 @@ function TabContent(props: { manager: string, command: string }) {
           aria-hidden="true"
           class="hidden dark:block absolute inset-0 bg-gradient-to-tr from-blue-300 rounded-md via-blue-300/70 to-blue-300 opacity-5 pointer-events-none"
         />
-        <span class="dark:text-cyan-200 text-cyan-600">{props.manager}</span> {' '+props.command}
+        <span class="dark:text-cyan-200 text-cyan-600">{props.manager}</span> {" " + props.command}
       </pre>
+
+      <CopyToClipboard
+        class="absolute right-4 top-3"
+        manager={props.manager}
+        command={props.command}
+      />
     </Tabs.Content>
   );
 }

docs/src/components/icons/clipboard-icon.tsx

@@ -0,0 +1,17 @@
+export function ClipboardIcon(props: { class?: string }) {
+  return (
+    <svg
+      class={props.class || "w-4 h-4"}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}