info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-01 06:50:26 +02:00
Code Issues Releases Wiki Activity

Changelog page design

Browse Source
This commit is contained in:
Kamran Ahmed
2024-09-23 15:54:06 +01:00
parent 53e87095ef
commit 61816ab1e3
3 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Changelog/ChangelogItem.astro
View File

@@ -15,23 +15,23 @@ const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
);
---
<div class='relative'>
<div class='relative mb-6'>
<span
class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
></span>
<div class='mb-3 flex items-center gap-2'>
<div class='mb-3 flex flex-col sm:flex-row items-start sm:items-center gap-0.5 sm:gap-2'>
<span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
{formattedDate}
</span>
<span class='truncate text-base font-medium'>
<span class='truncate text-base font-medium text-balance'>
{changelog.frontmatter.title}
</span>
</div>
<div class='rounded-xl border bg-white p-6'>
{frontmatter.images && (
<div class='mb-5 -mx-6'>
<div class='mb-5 hidden sm:block -mx-6'>
<ChangelogImages images={frontmatter.images} client:load />
</div>
)}

2
src/components/ChangelogImages.tsx
View File

@@ -65,7 +65,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
/>
<span className="absolute group-hover:opacity-0 inset-0 bg-gradient-to-b from-transparent to-black/40" />
<div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100">
<div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100 cursor-pointer">
<span className='bg-black py-0.5 rounded px-1'>{title}</span>
</div>
</div>

36
src/pages/changelog.astro
View File

@@ -14,26 +14,30 @@ const allChangelogs = await getAllChangelogs();
noIndex={true}
>
<div class='bg-gray-100 px-4'>
<div class='border-b bg-white text-left -mx-4'>
<div class='mx-auto max-w-[500px] py-5 sm:pb-10 sm:pt-12 text-left px-4 sm:text-center'>
<h1 class='mb-0.5 sm:mb-3 text-2xl sm:text-4xl font-semibold'>Changelog</h1>
<p>We are constantly improving and updating roadmap.sh</p>
<div class='-mx-4 border-b bg-white text-left'>
<div
class='mx-auto max-w-[500px] px-4 py-5 text-left sm:pb-10 sm:pt-12 sm:text-center'
>
<h1 class='mb-0.5 text-2xl font-semibold sm:mb-3 sm:text-4xl'>
Changelog
</h1>
<p class='text-balance text-sm sm:text-base'>
We are constantly improving and updating roadmap.sh
</p>
</div>
</div>
<div class='relative mx-auto max-w-[600px] pb-8 pt-4'>
<div class='space-y-6'>
<div
class='absolute sm:block hidden inset-y-0 -left-5 w-px -translate-x-[0.5px] bg-gray-300'
>
</div>
{
allChangelogs.map((changelog) => (
<ChangelogItem changelog={changelog} />
))
}
<div class='relative mx-auto max-w-[600px] pb-8 pt-8'>
<div
class='absolute inset-y-0 -left-5 hidden w-px -translate-x-[0.5px] bg-gray-300 sm:block'
>
</div>
{
allChangelogs.map((changelog) => (
<ChangelogItem changelog={changelog} />
))
}
</div>
</div>
</BaseLayout>