[Docs Site] Support individual pages in ProductChangelog component

Author: KianNH

src/components/ProductChangelog.astro

@@ -3,6 +3,7 @@ import { getEntry, type CollectionEntry } from "astro:content";
 import { marked } from "marked";
 import { getChangelogs } from "~/util/changelogs";
 import AnchorHeading from "~/components/AnchorHeading.astro";
+import { entryToString } from "~/util/container";
 
 const page = await getEntry("docs", Astro.params.slug!);
 
@@ -62,18 +63,55 @@ if (!changelogs) {
 {
 	changelogs.map(([date, entries]) => (
 		<div data-date={date}>
-			<AnchorHeading depth={2} title={date} />
-			{(entries ?? []).map((entry) => (
-				<div data-product={entry.product.toLowerCase()}>
-					{page.data.changelog_product_area_name && (
-						<h3 class="!mt-4">
-							<a href={entry.productLink}>{entry.product}</a>
-						</h3>
-					)}
-					{entry.title && <strong>{entry.title}</strong>}
-					<Fragment set:html={marked.parse(entry.description ?? "")} />
-				</div>
-			))}
+			{(entries ?? []).map(async (entry) => {
+				let description;
+				if (entry.individual_page) {
+					const link = entry.individual_page;
+
+					if (!link)
+						throw new Error(
+							`Changelog entry points to individual page but no link is provided`,
+						);
+
+					const page = await getEntry("docs", link.slice(1, -1));
+
+					if (!page)
+						throw new Error(
+							`Changelog entry points to ${link.slice(1, -1)} but unable to find entry with that slug`,
+						);
+
+					description = (await entryToString(page)) ?? page.body;
+
+					return (
+						<div data-product={entry.product.toLowerCase()}>
+							<a href={entry.individual_page} class="no-underline">
+								<strong>{page.data.title}</strong>
+							</a>
+							<p class="text-xs">{entry.date}</p>
+							{page.data.changelog_product_area_name && (
+								<h3 class="!mt-4">
+									<a href={entry.productLink}>{entry.product}</a>
+								</h3>
+							)}
+							{<Fragment set:html={description} />}
+						</div>
+					);
+				} else {
+					description = marked.parse(entry.description);
+					return (
+						<AnchorHeading depth={2} title={date} />
+						<div data-product={entry.product.toLowerCase()}>
+							{page.data.changelog_product_area_name && (
+								<h3 class="!mt-4">
+									<a href={entry.productLink}>{entry.product}</a>
+								</h3>
+							)}
+							{entry.title && <strong>{entry.title}</strong>}
+							{<Fragment set:html={description} />}
+						</div>
+					);
+				}
+			})}
 		</div>
 	))
 }

src/content/changelogs/workers.yaml

@@ -11,7 +11,7 @@ entries:
   - publish_date: "2024-09-19"
     description: |-
       -  Revamped Workers and Pages UI settings to simplify the creation and management of project configurations. For bugs and general feedback, please submit this [form](https://forms.gle/XXqhRGbZmuzninuN9).
-  - publish_date: '2024-09-16'
+  - publish_date: "2024-09-16"
     description: |-
       - Updated v8 to version 12.9.
   - publish_date: "2024-08-19"

src/util/changelogs.ts

@@ -39,6 +39,7 @@ export async function getChangelogs(opts?: {
 				productLink: product.data.productLink,
 				productAreaName: product.data.productArea,
 				productAreaLink: product.data.productAreaLink,
+				individual_page: entry.link,
 			};
 		});
 	});