wip

Author: KianNH

src/content/release-notes/2024/11/27/stuff-and-things.mdx

@@ -7,11 +7,13 @@ products:
 tags: changed
 ---
 
-## Foo
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+##### Foo
 
 Aenean lectus sapien, sollicitudin eget condimentum quis, vehicula sed risus. Maecenas consectetur nisi nec nisi sagittis lacinia.
 
-## Bar
+##### Bar
 
 :::note
 Phasellus non sagittis urna.

src/pages/release-notes/index.astro

@@ -6,78 +6,55 @@ import { format } from "date-fns";
 
 const notes = await getCollection("release-notes");
 
-const months = Object.entries(
-	Object.groupBy(notes, (note) => note.id.split("/").slice(0, 2).join("/")),
-);
-
 const days = Object.entries(
 	Object.groupBy(notes, (note) => note.id.split("/").slice(0, 3).join("/")),
 );
-
-const sidebar = [
-	{
-		label: "release-notes",
-		items: [
-			{
-				label: "Latest releases",
-				link: "/release-notes/",
-			},
-			...months.map(([date, entries]) => {
-			return {
-				label: format(date, "MMMM yyyy"),
-				items: entries
-					?.sort()
-					.reverse()
-					.map((entry) => {
-						const date = entry.id.split("/").slice(0, 3).join("/");
-						const formatted = format(date, "MMMM dd");
-
-						return {
-							label: `${formatted} - ${entry.data.title}`,
-							link: `/release-notes/${entry.slug}/`,
-						};
-					}),
-			};
-		})
-	]
-	},
-];
 ---
 
 <StarlightPage
-	frontmatter={{ title: "Release notes", tableOfContents: false }}
-	sidebar={sidebar}
+	frontmatter={{ title: "Release notes", tableOfContents: false, template: "splash" }}
+	hideTitle={true}
 	hideBreadcrumbs={true}
 >
-	<LinkButton href="/release-notes/rss.xml" icon="rss" style={{ padding: "0.4375rem 1.125rem" }}>RSS</LinkButton>
-	<div class="grid grid-cols-[10%_90%]">
+	<div class="flex mb-20">
+		<div class="flex flex-col">
+			<h1>Changelog</h1>
+			<p>New updates and improvements at Cloudflare.</p>
+		</div>
+	</div>
+	<!-- <LinkButton href="/release-notes/rss.xml" icon="rss" style={{ padding: "0.4375rem 1.125rem" }}>RSS</LinkButton> -->
+	<div class="grid grid-cols-[10%_90%] justify-self-center">
 		{
 			days.sort().reverse().map(([date, entries]) => {
 				const formatted = format(date, "MMMM dd");
 
 				return (
 					<div class="!mt-0">
-						<p class="text-xs">{formatted}</p>
+						<strong class="text-xs">{formatted}</strong>
+						<p class="text-xs">12:00PM</p>
 					</div>
 					<Steps>
-						<ol class="!mt-0">
+						<ol class="!mt-0 max-w-3xl">
 							{
-								entries?.map((entry) => (
-									<li>
-										<a href={`/release-notes/${entry.slug}/`}>
-											<strong>
-												{entry.data.title}
-											</strong>
-										</a>
-										<p>{entry.data.description}</p>
-										<div class="flex gap-2 items-center">
+								entries?.map(async (entry) => {
+									const { Content } = await entry.render();
+
+									return (
+										<li>
+											<a href={`/release-notes/${entry.slug}/`} class="no-underline hover:underline">
+												<h3 class="text-[var(--sl-color-text)]">
+													{entry.data.title}
+												</h3>
+											</a>
 											<span class="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
-												{entry.data.tags}
+													{entry.data.products.join(", ")}
 											</span>
-											<p class="text-xs">{entry.data.products.join(", ")}</p>
-										</div>
-									</li>
-								))
+											<p>
+												<Content />
+											</p>
+										</li>
+									)
+								})
 							}
 						</ol>
 					</Steps>
@@ -91,4 +68,8 @@ const sidebar = [
 .sl-steps > li::before {
 	content: "";
 }
+
+:root {
+	--sl-content-width: 70rem !important;
+}
 </style>