wip

Author: KianNH

src/content/release-notes/2024/11/13/other-stuff.mdx

@@ -5,6 +5,7 @@ products:
   - Access
   - WARP
 tags: feature
+date: 2024-11-13T21:00:00
 ---
 
 import { Details } from "~/components";

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

@@ -5,6 +5,7 @@ products:
   - Workers
   - KV
 tags: changed
+date: 2024-11-27T11:00:00Z
 ---
 
 ![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)

src/pages/release-notes/[...slug].astro

@@ -3,7 +3,8 @@ import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import type { GetStaticPaths } from "astro";
 import { getCollection } from "astro:content";
 import { format } from "date-fns";
-import { StarlightIcon } from "~/components";
+import { Image } from "astro:assets";
+import HeroImage from "~/assets/images/release-notes/hero.svg";
 
 export const getStaticPaths = (async () => {
 	const notes = await getCollection("release-notes");
@@ -20,8 +21,6 @@ export const getStaticPaths = (async () => {
 	});
 }) satisfies GetStaticPaths;
 
-const notes = await getCollection("release-notes");
-
 const { note } = Astro.props;
 
 const { Content, headings } = await note.render();
@@ -36,25 +35,26 @@ const { Content, headings } = await note.render();
 	hideTitle={true}
 	hideBreadcrumbs={true}
 >
-	<div class="flex mb-20">
-		<div class="flex flex-col">
-			<h1>Changelog</h1>
-			<p>
-				New updates and improvements at Cloudflare.
-				<span>
-					<a href="/release-notes/feed.rss"> Subscribe to RSS </a>
-				</span>
-			</p>
-			<p>
-				<StarlightIcon
-					name="left-arrow"
-					class="align-middle !inline text-accent"
-				/>
-				<a href="/release-notes/" class="no-underline">Back to all posts</a>
-			</p>
+	<div class="w-full justify-self-center flex mb-20">
+		<div class="flex justify-between w-full">
+			<div class="flex flex-col">
+				<h1>Changelog</h1>
+				<p>
+					New updates and improvements at Cloudflare.
+					<span>
+						<a href="/release-notes/feed.rss"> Subscribe to RSS </a>
+					</span>
+				</p>
+				<p>
+					<a href="/release-notes/" class="no-underline">← Back to all posts</a>
+				</p>
+			</div>
+			<div>
+				<Image src={HeroImage} alt="hero image" height="175" />
+			</div>
 		</div>
 	</div>
-	<div class="max-w-3xl w-full justify-self-center">
+	<div class="w-full justify-self-center">
 		<h2>{note.data.title}</h2>
 		<div>
 			<strong
@@ -73,3 +73,9 @@ const { Content, headings } = await note.render();
 		</div>
 	</div>
 </StarlightPage>
+
+<style>
+	:root {
+		--sl-content-width: 55rem !important;
+	}
+</style>

src/pages/release-notes/index.astro

@@ -1,8 +1,10 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { getCollection } from "astro:content";
-import { StarlightIcon, Steps } from "~/components";
+import { Steps } from "~/components";
 import { format } from "date-fns";
+import { Image } from "astro:assets";
+import HeroImage from "~/assets/images/release-notes/hero.svg";
 
 const notes = await getCollection("release-notes");
 
@@ -16,19 +18,25 @@ const days = Object.entries(
 	hideTitle={true}
 	hideBreadcrumbs={true}
 >
-	<div class="flex mb-20">
+<div class="w-full justify-self-center flex mb-20">
+	<div class="flex justify-between w-full">
 		<div class="flex flex-col">
 			<h1>Changelog</h1>
 			<p>
 				New updates and improvements at Cloudflare.
 				<span>
-					<a href="/release-notes/feed.rss">
-						Subscribe to RSS
-					</a>
+					<a href="/release-notes/feed.rss"> Subscribe to RSS </a>
 				</span>
 			</p>
+			<p>
+				<a href="/release-notes/" class="no-underline">← Back to all posts</a>
+			</p>
+		</div>
+		<div class="!mt-0">
+			<Image src={HeroImage} alt="hero image" height="175" />
 		</div>
 	</div>
+</div>
 	<div class="grid grid-cols-[10%_90%] justify-self-center">
 		{
 			days.sort().reverse().map(([date, entries]) => {
@@ -79,6 +87,10 @@ const days = Object.entries(
 </StarlightPage>
 
 <style>
+:root {
+	--sl-content-width: 55rem !important;
+}
+
 .sl-steps > li::before {
 	content: "•";
 	font-size: calc(var(--bullet-size) * 2);

src/schemas/release-notes.ts

@@ -3,6 +3,7 @@ import { z } from "astro:schema";
 export const releaseNotesSchema = z.object({
 	title: z.string(),
 	description: z.string(),
+	date: z.coerce.date(),
 	products: z.string().array(),
 	tags: z.enum(["feature", "changed", "improvement"]),
 });