From 7b736f48dea775ef520dd8e44278226863b5e221 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Mon, 24 Feb 2025 20:03:57 +0000
Subject: [PATCH 1/2] [Docs Site] Add "show more" button to changelogs

---
 src/pages/changelog/index.astro | 127 +++++++++++++++++++++++++++++---
 1 file changed, 116 insertions(+), 11 deletions(-)

diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro
index af65fd74238eff7..dba1a0e881c2ac9 100644
--- a/src/pages/changelog/index.astro
+++ b/src/pages/changelog/index.astro
@@ -27,7 +27,7 @@ const props = {
 <StarlightPage {...props}>
 	<Header notes={notes} />
 	{
-		notes.map(async (entry) => {
+		notes.map(async (entry, idx) => {
 			const date = format(entry.data.date, "MMM dd, yyyy");
 
 			const productIds = JSON.stringify(
@@ -37,7 +37,11 @@ const props = {
 			const { Content } = await render(entry);
 
 			return (
-				<div class="!mt-0 sm:flex" data-products={productIds}>
+				<div
+					class="!mt-0 sm:flex"
+					data-products={productIds}
+					style={`display: ${idx >= 10 ? "none" : ""}`}
+				>
 					<time
 						datetime={entry.data.date.toISOString()}
 						class="whitespace-nowrap leading-6 sm:pr-4 sm:text-right"
@@ -68,6 +72,14 @@ const props = {
 			);
 		})
 	}
+	<div class="flex items-center justify-center">
+		<button
+			id="changelogs-next-button"
+			class="h-12 rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
+		>
+			Load more items
+		</button>
+	</div>
 </StarlightPage>
 
 <script>
@@ -76,24 +88,36 @@ const props = {
 	);
 
 	filter?.addEventListener("change", () => {
-		const entries = document.querySelectorAll<HTMLElement>("[data-products]");
+		const entries = [
+			...document.querySelectorAll<HTMLElement>("[data-products]"),
+		];
 
 		if (!entries) return;
 
 		const value = filter.value;
 
-		if (value === "all") {
-			entries.forEach((entry) => (entry.style.display = ""));
+		const filtered = entries
+			.filter((e) => {
+				if (value === "all") {
+					return true;
+				}
 
-			return;
-		}
+				if (!e.dataset.products) {
+					return false;
+				}
 
-		for (const entry of entries) {
-			if (!entry.dataset.products) continue;
+				const products: string[] = JSON.parse(e.dataset.products);
 
-			const products = JSON.parse(entry.dataset.products);
+				if (products.includes(value)) {
+					return true;
+				}
 
-			const show = products.includes(value);
+				return false;
+			})
+			.slice(0, 5);
+
+		for (const entry of entries) {
+			const show = filtered.includes(entry);
 
 			if (show) {
 				entry.style.display = "";
@@ -101,7 +125,88 @@ const props = {
 				entry.style.display = "none";
 			}
 		}
+
+		hideButton();
 	});
+
+	const button = document.querySelector<HTMLButtonElement>(
+		"#changelogs-next-button",
+	);
+
+	button?.addEventListener("click", () => {
+		const entries = [
+			...document.querySelectorAll<HTMLElement>("[data-products]"),
+		];
+
+		if (!entries) return;
+
+		const value = filter!.value;
+
+		const hidden = entries
+			.filter((e) => {
+				if (e.style.display !== "none") {
+					return false;
+				}
+
+				if (value === "all") {
+					return true;
+				}
+
+				if (!e.dataset.products) {
+					return false;
+				}
+
+				const products: string[] = JSON.parse(e.dataset.products);
+
+				if (products.includes(value)) {
+					return true;
+				}
+
+				return false;
+			})
+			.slice(0, 10);
+
+		hidden.forEach((e) => (e.style.display = ""));
+
+		hideButton();
+	});
+
+	function hideButton() {
+		const entries = [
+			...document.querySelectorAll<HTMLDivElement>("[data-products]"),
+		];
+
+		if (entries.length === 0) return;
+
+		const filtered = entries.filter((p) => {
+			const value = filter!.value;
+
+			if (value === "all") {
+				return true;
+			}
+
+			if (!p.dataset.products) {
+				return false;
+			}
+
+			const products: string[] = JSON.parse(p.dataset.products);
+
+			if (!products.includes(value)) {
+				return false;
+			}
+
+			return true;
+		});
+
+		const visible = filtered.filter((p) => p.style.display !== "none");
+		const hidden = filtered.length - visible.length;
+
+		if (hidden >= 10) {
+			button!.style.display = "";
+		} else {
+			button!.style.display = "none";
+		}
+	}
 </script>
 
 <style>

From 5e2743cdea02b5b5bce3fe3e5d625084544cf513 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Tue, 25 Feb 2025 15:30:28 +0000
Subject: [PATCH 2/2] Add cursor-pointer class

---
 src/pages/changelog/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro
index dba1a0e881c2ac9..70f717489bf7b5e 100644
--- a/src/pages/changelog/index.astro
+++ b/src/pages/changelog/index.astro
@@ -75,7 +75,7 @@ const props = {
 	<div class="flex items-center justify-center">
 		<button
 			id="changelogs-next-button"
-			class="h-12 rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
+			class="h-12 cursor-pointer rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
 		>
 			Load more items
 		</button>