Merge remote-tracking branch 'origin/main' into feat/likes

Author: danielroe

app/middleware/canonical-redirects.global.ts

@@ -6,7 +6,7 @@
  * - /package/docs/* → /package-docs/*
  * - /docs/* → /package-docs/*
  * - /org/* → /@*
- * - /* → /package/* (Unless its an existing page)
+ * - /* → /package/* (Unless it's an existing page)
  */
 export default defineNuxtRouteMiddleware(to => {
   // Only redirect on client-side to avoid breaking crawlers mid-transition
@@ -38,7 +38,7 @@ export default defineNuxtRouteMiddleware(to => {
   }
 
   // Keep this one last as it will catch everything
-  // /* → /package/* (Unless its an existing page)
+  // /* → /package/* (Unless it's an existing page)
   if (path.startsWith('/') && !path.startsWith('/package/')) {
     const router = useRouter()
     const resolved = router.resolve(path)

app/pages/package/[...package].vue

@@ -496,7 +496,7 @@ defineOgImageComponent('Package', {
               <button
                 type="button"
                 @click="copyPkgName()"
-                class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
+                class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
                 :aria-label="$t('package.copy_name')"
               >
                 <span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />
@@ -1263,6 +1263,33 @@ defineOgImageComponent('Package', {
   min-width: 0;
 }
 
+.copy-button {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  width: 1px;
+  transition:
+    opacity 0.25s 0.1s,
+    translate 0.15s 0.1s,
+    clip 0.01s 0.34s allow-discrete,
+    clip-path 0.01s 0.34s allow-discrete,
+    height 0.01s 0.34s allow-discrete,
+    width 0.01s 0.34s allow-discrete;
+}
+
+.group:hover .copy-button,
+.copy-button:focus-visible {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  overflow: visible;
+  width: auto;
+  transition:
+    opacity 0.15s,
+    translate 0.15s;
+}
+
 @media (hover: none) {
   .copy-button {
     display: none;