Update UI for changelog page

src/components/Changelog/ChangelogItem.astro

@@ -11,24 +11,27 @@ const { changelog } = Astro.props;
 const { frontmatter } = changelog;
 
 const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
-  'dd LLLL, yyyy',
+  'dd LLL, yyyy',
 );
 ---
 
-<div class='grid gap-4 py-10 sm:grid-cols-4'>
+<div class='relative'>
-  <div class='sticky top-8 col-span-1 mt-1.5 hidden self-start sm:block'>
+  <span class='h-2 w-2 flex-shrink-0 rounded-full bg-gray-300 absolute top-2 -left-6'></span>
-    <span class='text-sm text-gray-600'>{formattedDate}</span>
+
-  </div>
+  <div class='mb-3 flex items-center gap-2'>
-  <div class='col-span-3'>
+    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
-    <h2 class='text-3xl font-bold text-gray-900 sm:mb-4'>
+      {formattedDate}
+    </span>
+    <span class='truncate text-base font-medium'>
       {changelog.frontmatter.title}
-    </h2>
+    </span>
-    <span class='mb-6 mt-3 block text-sm text-gray-600 sm:hidden'
+  </div>
-      >{formattedDate}</span
-    >
 
-    <MarkdownFile class='p-0'>
+  <div class='rounded-xl border bg-white p-6'>
+    <div
+      class='prose prose-h2:text-lg prose-h2:font-medium prose-h2:mt-3 prose-sm prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 prose-ul:bg-gray-100 prose-ul:rounded-lg prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 [&>ul>li]:my-0 [&>ul>li]:mb-1 [&>ul]:mt-3'
+    >
       <changelog.Content />
-    </MarkdownFile>
+    </div>
   </div>
 </div>

src/data/changelogs/leaderboard-page.md

@@ -1,19 +1,25 @@
 ---
-title: 'Leaderboard Page'
+title: 'New Dashboard, Leaderboards and Projects'
-description: 'New leaderbaord page showing the most active users'
+description: 'New leaderboard page showing the most active users'
 seo:
   title: 'Leaderboard Page - roadmap.sh'
   description: ''
 date: 2024-09-13
 ---
 
-![Leaderboard Page](https://assets.roadmap.sh/guest/accordion-rbvpo.png)
+TL;DR: new dashboard, leaderboard page and projects page.
 
-We are introducing a new leaderboard page that will show the most active users on the platform. This will help users to see who is contributing the most to the community and motivate them to participate more.
+- New dashboard for logged-in users
+- New leaderboard page
+- Projects page listing all projects
+- Ability to stop a started project
+- Frontend and backend content improvements
+- Bug fixes
 
-- Top users will be shown based on the number of contributions they have made.
+![Leaderboard Page](https://assets.roadmap.sh/guest/personal-dashboard.png)
-- Users will be able to see their own rank on the leaderboard.
-- Users will be able to see the rank of other users on the leaderboard.
-- Top performers will be highlighted on the leaderboard.
 
-You can check out the leaderboard page [here](/leaderboard).
+We just launched a dedicated dashboard for logged-in users to showing progress, projects, bookmarks and more. You can still access the old homepage by visiting [this page](https://roadmap.sh/home).
+
+We also launched a new [leaderboard page](/leaderboard) showing the most active users, users who completed most projects and more.
+
+There is also a [new projects page](/projects) where you can see all the projects you have been working on. You can also now stop a started project.

src/pages/changelog.astro

@@ -0,0 +1,38 @@
+---
+import SimplePageHeader from '../components/SimplePageHeader.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { getAllChangelogs } from '../lib/changelog';
+import ChangelogItem from '../components/Changelog/ChangelogItem.astro';
+
+const allChangelogs = await getAllChangelogs();
+---
+
+<BaseLayout
+  title='Changelogs'
+  description='Changelogs for the updates and changes in the website'
+  permalink='/changelogs'
+>
+  <div class='bg-gray-100'>
+    <div class='rounded-lg border-b bg-white text-left'>
+      <div class='mx-auto max-w-[500px] pt-12 pb-10 text-center'>
+        <h1 class='mb-3 text-4xl font-semibold'>Changelog</h1>
+        <p>Here is everything we have been shipping recently</p>
+      </div>
+    </div>
+
+    <div class='relative mx-auto max-w-[500px] pb-8 pt-4'>
+      <div class='space-y-6'>
+        <div
+          class='absolute inset-y-0 -left-5 w-px -translate-x-[0.5px] bg-gray-300'
+        >
+        </div>
+
+        {
+          allChangelogs.map((changelog) => (
+            <ChangelogItem changelog={changelog} />
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</BaseLayout>

src/pages/changelogs.astro

@@ -1,29 +0,0 @@
----
-import SimplePageHeader from '../components/SimplePageHeader.astro';
-import BaseLayout from '../layouts/BaseLayout.astro';
-import { getAllChangelogs } from '../lib/changelog';
-import ChangelogItem from '../components/Changelog/ChangelogItem.astro';
-
-const allChangelogs = await getAllChangelogs();
----
-
-<BaseLayout
-  title='Changelogs'
-  description='Changelogs for the updates and changes in the website'
-  permalink='/changelogs'
->
-  <SimplePageHeader
-    title='Changelogs'
-    description='Changelogs for the updates and changes in the website'
-  />
-
-  <div class='bg-gray-100 pb-14 pt-4 sm:pb-16 sm:pt-8'>
-    <div class='container divide-y divide-gray-300'>
-      {
-        allChangelogs.map((changelog) => (
-          <ChangelogItem changelog={changelog} />
-        ))
-      }
-    </div>
-  </div>
-</BaseLayout>