From 265fbb3acdd0a6eafb18c4272a552d785ae432f9 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Wed, 21 May 2025 10:51:13 +0100
Subject: [PATCH 1/2] [Docs Site] Remove Container API usage from changelog

---
 astro.config.ts                      |  2 ++
 src/pages/changelog/index.astro      | 13 +++++--------
 src/plugins/rehype/shift-headings.ts | 10 +++++++++-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 587850969b97047..24d082ee04f3c63 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -16,6 +16,7 @@ import rehypeMermaid from "./src/plugins/rehype/mermaid.ts";
 import rehypeAutolinkHeadings from "./src/plugins/rehype/autolink-headings.ts";
 import rehypeExternalLinks from "./src/plugins/rehype/external-links.ts";
 import rehypeHeadingSlugs from "./src/plugins/rehype/heading-slugs.ts";
+import rehypeShiftHeadings from "./src/plugins/rehype/shift-headings.ts";
 
 async function autogenSections() {
 	const sections = (
@@ -67,6 +68,7 @@ export default defineConfig({
 			rehypeAutolinkHeadings,
 			// @ts-expect-error plugins types are outdated but functional
 			rehypeTitleFigure,
+			rehypeShiftHeadings,
 		],
 	},
 	image: {
diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro
index 5fb753b2c1b54e8..02435372132ce5e 100644
--- a/src/pages/changelog/index.astro
+++ b/src/pages/changelog/index.astro
@@ -10,10 +10,8 @@ import { Steps } from "~/components";
 import { format } from "date-fns";
 import { getChangelogs } from "~/util/changelog";
 import { productsByGroup } from "~/util/products";
-import { entryToString } from "~/util/container";
-import { process } from "~/util/rehype";
 
-import rehypeShiftHeadings from "~/plugins/rehype/shift-headings.ts";
+import { render } from "astro:content";
 
 const notes = await getChangelogs({
 	filter: (entry) => !entry.data.hidden,
@@ -45,8 +43,7 @@ const props = {
 				.map((group) => group[0])
 				.sort();
 
-			const html = await entryToString(entry, Astro.locals);
-			const processed = await process(html, [[rehypeShiftHeadings]]);
+			const { Content } = await render(entry);
 
 			return (
 				<div
@@ -62,7 +59,7 @@ const props = {
 				>
 					<time
 						datetime={entry.data.date.toISOString()}
-						class="whitespace-nowrap text-xs font-bold leading-6 sm:pr-4 sm:text-right"
+						class="text-xs leading-6 font-bold whitespace-nowrap sm:pr-4 sm:text-right"
 					>
 						{date}
 					</time>
@@ -80,7 +77,7 @@ const props = {
 									</h3>
 									<ProductPills products={entry.data.products} />
 								</div>
-								<p set:html={processed} />
+								<Content />
 							</li>
 						</ol>
 					</Steps>
@@ -91,7 +88,7 @@ const props = {
 	<div class="flex items-center justify-center">
 		<button
 			id="changelogs-next-button"
-			class="h-12 cursor-pointer rounded-sm bg-cl1-brand-orange px-6 font-medium text-cl1-black"
+			class="bg-cl1-brand-orange text-cl1-black h-12 cursor-pointer rounded-sm px-6 font-medium"
 		>
 			Load more items
 		</button>
diff --git a/src/plugins/rehype/shift-headings.ts b/src/plugins/rehype/shift-headings.ts
index 9010d2ec82d204e..d26e53f9a6b0d2c 100644
--- a/src/plugins/rehype/shift-headings.ts
+++ b/src/plugins/rehype/shift-headings.ts
@@ -3,8 +3,16 @@ import { visit } from "unist-util-visit";
 import type { Root, Element } from "hast";
 
 export default function () {
-	return function (tree: Root) {
+	return function (tree: Root, file: any) {
 		visit(tree, "element", function (element) {
+			if (
+				!file.history.find((path: string) =>
+					path.includes("/src/content/changelog/"),
+				)
+			) {
+				return;
+			}
+
 			const classNames = (element.properties.className as string[]) ?? [];
 
 			if (classNames.includes("heading-wrapper")) {

From 75f7f4349f095ec17dbde880744e1b5d5a36f77f Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Wed, 21 May 2025 12:09:11 +0100
Subject: [PATCH 2/2] dont use style prop

---
 src/pages/changelog/index.astro | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro
index 02435372132ce5e..92fe9e50a73ec9c 100644
--- a/src/pages/changelog/index.astro
+++ b/src/pages/changelog/index.astro
@@ -47,7 +47,7 @@ const props = {
 
 			return (
 				<div
-					class="mt-0! sm:flex"
+					class:list={["mt-0! sm:flex", { "hidden!": idx >= 10 }]}
 					data-products={JSON.stringify(
 						productIds.concat(
 							productGroups.map((group) =>
@@ -55,7 +55,6 @@ const props = {
 							),
 						),
 					)}
-					style={`display: ${idx >= 10 ? "none" : ""}`}
 				>
 					<time
 						datetime={entry.data.date.toISOString()}
@@ -131,11 +130,12 @@ const props = {
 			...document.querySelectorAll<HTMLElement>("[data-products]"),
 		]
 			.filter(
-				(e) => e.style.display === "none" && filterByProduct(e, filter!.value),
+				(e) =>
+					e.classList.contains("hidden!") && filterByProduct(e, filter!.value),
 			)
 			.slice(0, 10);
 
-		hidden.forEach((e) => (e.style.display = ""));
+		hidden.forEach((e) => e.classList.remove("hidden!"));
 
 		hideButton();
 	});
@@ -157,9 +157,9 @@ const props = {
 			const show = filtered.includes(entry);
 
 			if (show) {
-				entry.style.display = "";
+				entry.classList.remove("hidden!");
 			} else {
-				entry.style.display = "none";
+				entry.classList.add("hidden!");
 			}
 		}
 
@@ -185,13 +185,13 @@ const props = {
 
 		const filtered = entries.filter((p) => filterByProduct(p, filter!.value));
 
-		const visible = filtered.filter((p) => p.style.display !== "none");
+		const visible = filtered.filter((p) => !p.classList.contains("hidden!"));
 		const hidden = filtered.length - visible.length;
 
 		if (hidden > 0) {
-			button!.style.display = "";
+			button!.classList.remove("hidden!");
 		} else {
-			button!.style.display = "none";
+			button!.classList.add("hidden!");
 		}
 	}
 </script>