docs(releases): improve page

This commit is contained in:
Benjamin Canac
2023-11-21 23:02:35 +01:00
parent 37fdf224c0
commit 9df9b9a2df
2 changed files with 21 additions and 25 deletions

View File

@@ -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">