docs(releases): display multiple pulls per day

docs/components/releases/ReleasesItem.vue

@@ -6,16 +6,18 @@
     <NuxtLink v-if="date.release" :to="`https://github.com/nuxt/ui/releases/tag/${date.release.name}`" target="_blank" class="text-gray-900 dark:text-white font-bold text-3xl mt-2 group hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
       {{ date.release.name }}
     </NuxtLink>
-    <div v-else-if="date.pull" class="text-sm/6 break-all mt-2">
-      <NuxtLink :to="`https://github.com/${date.pull.user.login}`" target="_blank" class="text-gray-900 dark:text-white transition-colors inline-flex items-center gap-1 rounded-full bg-gray-100/50 dark:bg-gray-800/50 dark:hover:bg-gray-800 p-0.5 pr-1 ring-1 ring-gray-300 dark:ring-gray-700 text-xs font-medium flex-shrink-0 align-middle mr-1">
-        <UAvatar :src="`https://github.com/${date.pull.user.login}.png`" size="3xs" />
+    <div v-else-if="date.pulls?.length" class="mt-2 space-y-1">
+      <div v-for="(pull, index) in date.pulls" :key="index" class="text-sm/6 break-all lg:break-words">
+        <NuxtLink :to="`https://github.com/${pull.user.login}`" target="_blank" class="text-gray-900 dark:text-white transition-colors inline-flex items-center gap-1 rounded-full bg-gray-100/50 dark:bg-gray-800/50 dark:hover:bg-gray-800 p-0.5 pr-1 ring-1 ring-gray-300 dark:ring-gray-700 text-xs font-medium flex-shrink-0 align-middle">
+          <UAvatar :src="`https://github.com/${pull.user.login}.png`" size="3xs" />
 
-        {{ date.pull.user.login }}
-      </NuxtLink>
+          {{ pull.user.login }}
+        </NuxtLink>
 
-      pushed <NuxtLink :to="date.pull.html_url" target="_blank" class="font-medium text-gray-900 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
-        #{{ date.pull.number }} {{ date.pull.title }}
-      </NuxtLink>
+        pushed <NuxtLink :to="pull.html_url" target="_blank" class="font-medium text-gray-900 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
+          #{{ pull.number }} {{ pull.title }}
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
@@ -29,14 +31,14 @@ defineProps<{
     release?: {
       name: string
     }
-    pull?: {
+    pulls?: {
       number: number
       title: string
       html_url: string
       user: {
         login: string
       }
-    }
+    }[]
   }
 }>()
 
@@ -47,6 +49,6 @@ useIntersectionObserver(target, ([{ isIntersecting }]) => {
   targetIsVisible.value = isIntersecting
 }, {
   threshold: 1,
-  rootMargin: '0px 0px -68px 0px'
+  rootMargin: '-68px 0px -68px 0px'
 })
 </script>

docs/pages/releases.vue

@@ -16,7 +16,7 @@
           <div v-for="(date, index) in dates" :key="index" class="relative py-3 min-h-[24px] flex items-center justify-center">
             <div class="h-full w-0.5 bg-gray-200 dark:bg-gray-800 absolute top-0 inset-x-[50%] -ml-[1px] flex-shrink-0" />
 
-            <template v-if="date.release || date.pull || isToday(date.day)">
+            <template v-if="date.release || date.pulls?.length || isToday(date.day)">
               <div class="flex items-start gap-8 relative w-[50%]" :class="index % 2 === 0 ? 'translate-x-[50%] -ml-2' : '-translate-x-[50%] ml-2 flex-row-reverse'">
                 <div class="h-[8px] w-[8px] bg-gray-400 dark:bg-gray-400 rounded-full z-[1] mt-2 ring-2 ring-gray-300 dark:ring-gray-600 flex-shrink-0" />
 
@@ -48,13 +48,10 @@ const dates = computed(() => {
   const days = eachDayOfInterval({ start: new Date(first.published_at), end: new Date() })
 
   return days.reverse().map(day => {
-    const release = releases.value.find(release => isSameDay(new Date(release.published_at), day))
-    const pull = pulls.value.find(pull => isSameDay(new Date(pull.merged_at), day))
-
     return {
       day,
-      release,
-      pull
+      release: releases.value.find(release => isSameDay(new Date(release.published_at), day)),
+      pulls: pulls.value.filter(pull => isSameDay(new Date(pull.merged_at), day))
     }
   })
 })