Merge remote-tracking branch 'origin/main' into feature/docs-custom-badges-inputs

Author: ghostdevv

app/components/Package/ExternalLinks.vue

@@ -23,15 +23,6 @@ const homepageUrl = computed(() => {
   return homepage
 })
 
-const fundingUrl = computed(() => {
-  let funding = displayVersion.value?.funding
-  if (Array.isArray(funding)) funding = funding[0]
-
-  if (!funding) return null
-
-  return typeof funding === 'string' ? funding : funding.url
-})
-
 const PROVIDER_ICONS: Record<string, IconClass> = {
   github: 'i-simple-icons:github',
   gitlab: 'i-simple-icons:gitlab',
@@ -97,10 +88,5 @@ const repoProviderIcon = computed((): IconClass => {
         {{ $t('package.links.jsr') }}
       </LinkBase>
     </li>
-    <li v-if="fundingUrl">
-      <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
-        {{ $t('package.links.fund') }}
-      </LinkBase>
-    </li>
   </ul>
 </template>

app/components/Package/Header.vue

@@ -241,6 +241,15 @@ const likeAction = async () => {
     isLikeActionPending.value = false
   }
 }
+
+const fundingUrl = computed(() => {
+  let funding = props.displayVersion?.funding
+  if (Array.isArray(funding)) funding = funding[0]
+
+  if (!funding) return null
+
+  return typeof funding === 'string' ? funding : funding.url
+})
 </script>
 
 <template>
@@ -312,6 +321,15 @@ const likeAction = async () => {
             </span>
           </ButtonBase>
         </TooltipApp>
+
+        <LinkBase
+          variant="button-secondary"
+          v-if="fundingUrl"
+          :to="fundingUrl"
+          classicon="i-lucide:handshake text-accent"
+        >
+          <span class="max-sm:sr-only">{{ $t('package.links.fund') }}</span>
+        </LinkBase>
       </div>
     </div>
   </header>

app/components/Package/Skeleton.vue

@@ -2,24 +2,24 @@
 
 <template>
   <!-- Package header — matches area-header in [...name].vue -->
-  <header class="bg-[--bg] pt-5 pb-1 w-full container">
-    <div class="min-w-0">
-      <!-- Package name -->
-      <div class="min-w-0 flex items-center gap-2 justify-between">
-        <h1 class="font-mono text-2xl sm:text-3xl font-medium">
-          <SkeletonInline class="block! h-9 w-48" />
-        </h1>
-        <div class="flex gap-1">
-          <!-- Compare placeholder -->
-          <SkeletonBlock class="w-9 md:w-40 h-9 rounded self-baseline" />
-          <!-- Likes button placeholder -->
-          <SkeletonBlock class="w-14 h-9 rounded self-baseline" />
-        </div>
+  <header class="bg-bg pt-6 pb-2 pb-1 w-full container">
+    <!-- Package name -->
+    <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
+      <h1 class="font-mono text-2xl sm:text-3xl font-medium">
+        <SkeletonInline class="block! h-9 w-48" />
+      </h1>
+      <div class="flex gap-2 flex-wrap items-stretch">
+        <!-- Compare placeholder -->
+        <SkeletonBlock class="w-9 md:w-36 h-9 rounded" />
+        <!-- Likes button placeholder -->
+        <SkeletonBlock class="w-14 h-9 rounded" />
+        <!-- Fund link placeholder -->
+        <SkeletonBlock class="w-22 h-9 rounded self-baseline" />
       </div>
     </div>
   </header>
 
-  <div class="sticky top-14 z-1 pt-3 bg-bg border-b border-border w-full">
+  <div class="w-full bg-bg sticky top-14 z-10 border-b border-border pt-2">
     <div class="w-full container flex flex-col md:flex-row-reverse flex-wrap gap-2 justify-between">
       <!-- Version -->
       <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
@@ -176,7 +176,7 @@
     <!-- Sidebar — matches area-sidebar in [...name].vue -->
     <div class="area-sidebar">
       <div
-        class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
+        class="space-y-6 sm:space-y-8 min-w-0 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
       >
         <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->