docs: migrate to alpine

adrian-ub · Oct 29, 2024 · 8a5a4c4 · 8a5a4c4
1 parent d287c22
commit 8a5a4c4
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 126 deletions.
diff --git a/docs/src/components/CopyButton.astro b/docs/src/components/CopyButton.astro
@@ -0,0 +1,71 @@
+---
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
+
+export interface Props {
+  class: string
+  value: string
+}
+
+const { value, class: className } = Astro.props
+---
+
+<button
+  class={cn(
+    buttonVariants({
+      variant: 'ghost',
+      size: 'icon',
+      class: cn(
+        'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3',
+        className,
+      ),
+    }),
+  )}
+  x-data={`{
+  copyText: \`${value.replace(/`/g, '\\`')}\`,
+  copyNotification: false,
+  copyToClipboard() {
+    navigator.clipboard.writeText(this.copyText);
+    this.copyNotification = true;
+    let that = this;
+    setTimeout(function(){
+        that.copyNotification = false;
+    }, 2000);}
+  }`}
+  @click="copyToClipboard();"
+>
+  <span class="sr-only">Copy</span>
+
+  <svg
+    x-show="!copyNotification"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-clipboard"
+  >
+    <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
+    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+  </svg>
+
+  <svg
+    x-show="copyNotification"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-check"
+  >
+    <path d="M20 6 9 17l-5-5"></path>
+  </svg>
+</button>
diff --git a/docs/src/components/CopyNpmButton.astro b/docs/src/components/CopyNpmButton.astro
@@ -0,0 +1,116 @@
+---
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
+
+export interface Props {
+  commands: {
+    __npmCommand__: string
+    __pnpmCommand__: string
+    __yarnCommand__: string
+    __bunCommand__: string
+  }
+  class: string
+}
+
+const { class: className, commands } = Astro.props
+---
+
+<div
+  x-data={`{
+  dropdownOpen: false,
+  copyNotification: false,
+  commands: ${JSON.stringify(commands)},
+  copyToClipboard(copyText) {
+    this.dropdownOpen = false;
+    navigator.clipboard.writeText(copyText);
+    this.copyNotification = true;
+    let that = this;
+    setTimeout(function(){
+        that.copyNotification = false;
+    }, 2000);}
+ }`}
+>
+  <button
+    @click="dropdownOpen=true"
+    class={cn(
+      buttonVariants({
+        variant: 'ghost',
+        size: 'icon',
+        class: cn(
+          'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3',
+          className,
+        ),
+      }),
+    )}
+  >
+    <span class="sr-only">Copy</span>
+
+    <svg
+      x-show="!copyNotification"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-clipboard"
+    >
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+    </svg>
+
+    <svg
+      x-show="copyNotification"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-check"
+    >
+      <path d="M20 6 9 17l-5-5"></path>
+    </svg>
+  </button>
+
+  <div
+    x-show="dropdownOpen"
+    @click.away="dropdownOpen=false"
+    x-transition:enter="ease-out duration-200"
+    x-transition:enter-start="-translate-y-2"
+    x-transition:enter-end="translate-y-0"
+    class="absolute top-0 z-50 mt-12 -translate-x-4 right-0 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+    x-cloak
+  >
+    <div
+      class="relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
+      @click="copyToClipboard(commands.__npmCommand__)"
+    >
+      npm
+    </div>
+    <div
+      class="relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
+      @click="copyToClipboard(commands.__yarnCommand__)"
+    >
+      yarn
+    </div>
+    <div
+      class="relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
+      @click="copyToClipboard(commands.__pnpmCommand__)"
+    >
+      pnpm
+    </div>
+    <div
+      class="relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
+      @click="copyToClipboard(commands.__bunCommand__)"
+    >
+      bun
+    </div>
+  </div>
+</div>
diff --git a/docs/src/components/component-preview/ComponentPreview.astro b/docs/src/components/component-preview/ComponentPreview.astro
@@ -5,7 +5,7 @@ import process from 'node:process'
 import { cn } from '@/lib/utils'
 import { styles } from '@/registry/registry-styles'
 
-import { CopyButton } from '../copy-button'
+import CopyButton from '../CopyButton.astro'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs'
 
@@ -61,7 +61,7 @@ const components = await Promise.all(
             <SelectContent label={style.label} value={style.name}>
               {pathCode ? (
                 <div>
-                  <CopyButton client:load {...{ rawString: code, withMeta: false }} />
+                  <CopyButton value={code ?? ''} class={cn('absolute right-4 top-4')} />
                   <ComponentPeviewComponent client:visible {...{ nameExample: name, styleName: style.name }} />
                 </div>
               ) : (

diff --git a/docs/src/components/component-preview/ComponentSource.astro b/docs/src/components/component-preview/ComponentSource.astro
@@ -5,9 +5,11 @@ import process from 'node:process'
 import { styles } from '@/registry/registry-styles'
 import { ui } from '@/registry/registry-ui'
 import { Code as CodeAstro } from 'astro/components'
-import { CopyButton } from '../copy-button'
+
+import CopyButton from '../CopyButton.astro'
 
 import { Select, SelectContent, syncKey } from './select'
+import { cn } from '@/lib/utils'
 
 export interface Props {
   name: string
@@ -58,7 +60,7 @@ const allComponents = componentUi?.files?.flatMap((file) => {
               theme="github-dark"
               class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-zinc-950 py-4 dark:!bg-zinc-900 px-4"
             />
-            <CopyButton client:load {...{ rawString: code, withMeta: false }} />
+            <CopyButton value={code} class={cn('absolute right-4 top-4')} />
           </div>
         ) : (
           <p>Not found</p>

diff --git a/docs/src/components/component-preview/RawCode.astro b/docs/src/components/component-preview/RawCode.astro
@@ -1,7 +1,8 @@
 ---
 import { Code as CodeAstro } from 'astro/components'
 
-import { CopyButton } from '../copy-button'
+import CopyButton from '../CopyButton.astro'
+import { cn } from '@/lib/utils'
 
 export interface Props {
   code: string
@@ -17,5 +18,5 @@ const { code } = Astro.props
     theme="github-dark"
     class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-zinc-950 py-4 dark:!bg-zinc-900 px-4"
   />
-  <CopyButton client:load {...{ rawString: code, withMeta: false }} />
+  <CopyButton value={code} class={cn('absolute right-4 top-4')} />
 </div>
diff --git a/docs/src/components/copy-button.ts b/docs/src/components/copy-button.ts
diff --git a/docs/src/components/mdx/pre.astro b/docs/src/components/mdx/pre.astro
@@ -1,6 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
-import { CopyButton, CopyNpmCommandButtonComponent } from '../copy-button'
+import CopyNpmButton from '../CopyNpmButton.astro'
+import CopyButton from '../CopyButton.astro'
 
 type Props = {
   __rawString__: string
@@ -30,31 +31,20 @@ const {
 
 {
   __rawString__ && !__npmCommand__ ? (
-    <CopyButton
-      {...{
-        rawString: __rawString__,
-        withMeta: __withMeta__,
-        class: cn('absolute right-4 top-4', __withMeta__ && 'top-16'),
-      }}
-      client:visible
-    />
+    <CopyButton value={__rawString__} class={cn('absolute right-4 top-4', __withMeta__ && 'top-16')} />
   ) : null
 }
 
 {
   __npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ ? (
-    <CopyNpmCommandButtonComponent
-      {...{
-        commands: {
-          __npmCommand__,
-          __yarnCommand__,
-          __pnpmCommand__,
-          __bunCommand__,
-        },
-        withMeta: __withMeta__,
-        class: cn('absolute right-4 top-4', __withMeta__ && 'top-16'),
+    <CopyNpmButton
+      commands={{
+        __npmCommand__,
+        __yarnCommand__,
+        __pnpmCommand__,
+        __bunCommand__,
       }}
-      client:visible
+      class={cn('absolute right-4 top-4', __withMeta__ && 'top-16')}
     />
   ) : null
 }