Skip to content

Commit

Permalink
docs(releases): improve page
Browse files Browse the repository at this point in the history
  • Loading branch information
benjamincanac committed Nov 21, 2023
1 parent 37fdf22 commit 9df9b9a
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 25 deletions.
12 changes: 6 additions & 6 deletions docs/components/releases/ReleasesItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@
<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.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">
<ul v-else-if="date.pulls?.length" class="mt-2 space-y-1 text-gray-600 dark:text-gray-300">
<li v-for="pull in date.pulls" :key="pull.id" class="text-sm/6 break-all">
<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" />

{{ pull.user.login }}
</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]">
pushed <NuxtLink :to="pull.html_url" target="_blank" class="font-medium text-gray-700 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
#{{ pull.number }} {{ pull.title }}
</NuxtLink>
</div>
</div>
</li>
</ul>
</div>
</template>

Expand All @@ -32,6 +32,7 @@ defineProps<{
name: string
}
pulls?: {
id: number
number: number
title: string
html_url: string
Expand All @@ -48,7 +49,6 @@ const targetIsVisible = ref(false)
useIntersectionObserver(target, ([{ isIntersecting }]) => {
targetIsVisible.value = isIntersecting
}, {
threshold: 1,
rootMargin: '-68px 0px -68px 0px'
})
</script>
34 changes: 15 additions & 19 deletions docs/pages/releases.vue
Original file line number Diff line number Diff line change
@@ -1,35 +1,31 @@
<template>
<UMain>
<div class="relative px-4 sm:px-6 lg:px-8">
<div class="stars w-screen fixed pointer-events-none inset-x-0 -top-[--header-height] bottom-0 opacity-75">
<div class="h-px w-px rounded-full bg-transparent" />
<div class="h-px w-px rounded-full bg-transparent" />
<div class="h-px w-px rounded-full bg-transparent" />
</div>

<UContainer>
<UPageHero :title="page.title" :description="page.description" :links="page.links" align="center" />
<UPageHero :title="page.title" :description="page.description" :links="page.links" align="center" />

<UPage>
<UPageBody>
<div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-t-full" />
<UPageBody>
<div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-t-full" />

<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" />
<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.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" />
<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" />

<ReleasesItem :date="date" :class="index % 2 === 0 ? '' : 'text-right'" />
</div>
</template>
<ReleasesItem :date="date" :class="index % 2 === 0 ? '' : 'text-right'" />
</div>
</template>
</div>

<div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-b-full" />
</UPageBody>
</UPage>
</UContainer>
</UMain>
<div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-b-full" />
</UPageBody>
</div>
</template>

<script setup lang="ts">
Expand Down

1 comment on commit 9df9b9a

@vercel
Copy link

@vercel vercel bot commented on 9df9b9a Nov 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui-git-dev-nuxt-js.vercel.app
ui-nuxt-js.vercel.app
ui.nuxt.com

Please sign in to comment.