info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-13 20:54:16 +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 <span
class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300' class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
></span> ></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'> <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
{formattedDate} {formattedDate}
</span> </span>
<span class='truncate text-base font-medium'> <span class='truncate text-base font-medium text-balance'>
{changelog.frontmatter.title} {changelog.frontmatter.title}
</span> </span>
</div> </div>
<div class='rounded-xl border bg-white p-6'> <div class='rounded-xl border bg-white p-6'>
{frontmatter.images && ( {frontmatter.images && (
<div class='mb-5 -mx-6'> <div class='mb-5 hidden sm:block -mx-6'>
<ChangelogImages images={frontmatter.images} client:load /> <ChangelogImages images={frontmatter.images} client:load />
</div> </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" /> <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> <span className='bg-black py-0.5 rounded px-1'>{title}</span>
</div> </div>
</div> </div>

20
src/pages/changelog.astro
View File

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