[Docs Site] Various changelog improvements (#19362)

* [Docs Site] Various changelog improvements

* open rss feed link in new tab

Author: KianNH

src/components/ProductChangelog.astro

@@ -65,6 +65,15 @@ if (!changelogs) {
 }
 ---
 
+{
+	page.data.pcx_content_type === "changelog" && (
+		<p>
+			<a href={`/${page.slug}/index.xml`} target="_blank">
+				Subscribe to RSS
+			</a>
+		</p>
+	)
+}
 {
 	changelogs.map(([date, entries]) => (
 		<div data-date={date}>
@@ -104,16 +113,18 @@ if (!changelogs) {
 				} else {
 					description = marked.parse(entry.description as string);
 					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>
+						<>
+							<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>
+						</>
 					);
 				}
 			})}

src/pages/changelog/index.astro

@@ -4,6 +4,7 @@ import { Aside } from "~/components";
 import { marked } from "marked";
 import { format } from "date-fns";
 import { getChangelogs } from "~/util/changelogs";
+import { getEntry } from "astro:content";
 
 const { products, productAreas, changelogs } = await getChangelogs();
 ---
@@ -52,42 +53,43 @@ const { products, productAreas, changelogs } = await getChangelogs();
 					<h4 class="text-nowrap">{format(date, "do MMMM yyyy")}</h4>
 				</div>
 				<div class="!mt-0">
-					{entries?.map((entry) => (
-						<div
-							data-product={entry.product.toLowerCase()}
-							data-productArea={entry.productAreaName.toLowerCase()}
-						>
-							<h3>
-								<a href={entry.link}>{entry.product}</a>
-							</h3>
-							{["WAF", "DDoS protection"].includes(entry.product) && (
-								<p
-									set:html={marked.parse(
-										entry.scheduled
-											? "**" +
-													"Scheduled changes for " +
-													(entry.date ?? "") +
-													"**"
-											: "**" + (entry.date ?? "") + "**",
-									)}
-								/>
-							)}
-							{entry.title && (
-								<p set:html={marked.parse("**" + (entry.title ?? "") + "**")} />
-							)}
-							{["WAF", "DDoS protection"].includes(entry.product) ? (
-								<p
-									set:html={marked.parse(
-										"For more details, refer to the [changelog page](" +
-											entry.link +
-											").",
-									)}
-								/>
-							) : (
-								<p set:html={marked.parse(entry.description ?? "")} />
-							)}
-						</div>
-					))}
+					{entries?.map(async (entry) => {
+						let title = entry.title;
+						let description = entry.description || "";
+
+						if (entry.individual_page) {
+							const page = await getEntry(
+								"docs",
+								entry.individual_page.slice(1, -1),
+							);
+
+							if (!page) {
+								throw new Error(
+									`[Changelog] Unable to load page ${entry.individual_page}.`,
+								);
+							}
+
+							title = `${entry.product} - ${page.data.title}`;
+							description = `For more details, refer to the dedicated page for [${title}](${entry.individual_page}).`;
+						}
+
+						return (
+							<div
+								data-product={entry.product.toLowerCase()}
+								data-productArea={entry.productAreaName.toLowerCase()}
+							>
+								<h3>
+									<a href={entry.productLink}>{entry.product}</a>
+								</h3>
+								{title && (
+									<p>
+										<strong>{title}</strong>
+									</p>
+								)}
+								<Fragment set:html={marked.parse(description)} />
+							</div>
+						);
+					})}
 				</div>
 			</div>
 		))

src/util/changelogs.ts

@@ -61,7 +61,7 @@ export async function getWranglerChangelog(): Promise<
 	CollectionEntry<"changelogs">
 > {
 	const response = await fetch(
-		"https://api.github.com/repos/cloudflare/workers-sdk/releases",
+		"https://api.github.com/repos/cloudflare/workers-sdk/releases?per_page=100",
 	);
 
 	if (!response.ok) {