[Docs Site] Limit /changelog/ to 5 entries per product (#23975)

* [Docs Site] Limit /changelog/ to 5 entries per product

* pagination

* offload to search

* Up # of default in view

---------

Co-authored-by: kodster28 <[email protected]>

Author: KianNH

src/components/changelog/ProductSelect.tsx

@@ -65,6 +65,22 @@ export default function ProductSelect({ products, groups }: Props) {
 			select.value = option.value;
 			select.dispatchEvent(event);
 		}
+
+		const search = document.querySelector<HTMLAnchorElement>(
+			"#changelog-search-button",
+		);
+
+		if (search) {
+			if (
+				options
+					.find((opt) => opt.label === "Products")
+					?.options?.includes(option)
+			) {
+				search.href = `/search/?contentType=Changelog+entry&product=${encodeURIComponent(option.label)}`;
+			} else {
+				search.href = `/search/?contentType=Changelog+entry`;
+			}
+		}
 	};
 
 	return (

src/pages/changelog/index.astro

@@ -13,10 +13,28 @@ import { productsByGroup } from "~/util/products";
 
 import { render } from "astro:content";
 
-const notes = await getChangelogs({
+let notes = await getChangelogs({
 	filter: (entry) => !entry.data.hidden,
 });
 
+const seen = new Map<string, number>();
+
+notes = notes.flatMap((note) => {
+	const products = note.data.products.map((product) => product.id);
+
+	for (const product of products) {
+		const previous = seen.get(product) || 0;
+
+		seen.set(product, previous + 1);
+
+		if (previous >= 5) {
+			return [];
+		}
+	}
+
+	return note;
+});
+
 const props = {
 	frontmatter: {
 		title: "Changelogs",
@@ -48,7 +66,7 @@ const props = {
 
 			return (
 				<div
-					class:list={["mt-0! sm:flex", { "hidden!": idx >= 10 }]}
+					class:list={["mt-0! sm:flex", { "hidden!": idx >= 50 }]}
 					data-products={JSON.stringify(
 						productIds.concat(
 							productGroups.map((group) =>
@@ -86,12 +104,13 @@ const props = {
 		})
 	}
 	<div class="flex items-center justify-center">
-		<button
-			id="changelogs-next-button"
-			class="bg-cl1-brand-orange text-cl1-black h-12 cursor-pointer rounded-sm px-6 font-medium"
+		<a
+			id="changelog-search-button"
+			href="/search/?contentType=Changelog+entry"
+			class="bg-cl1-brand-orange text-cl1-black mr-2 flex h-12 items-center justify-center rounded-sm px-6 font-medium no-underline"
 		>
-			Load more items
-		</button>
+			Search for historical entries
+		</a>
 	</div>
 </StarlightPage>
 
@@ -100,10 +119,6 @@ const props = {
 		"#changelogs-next-filter",
 	);
 
-	const button = document.querySelector<HTMLButtonElement>(
-		"#changelogs-next-button",
-	);
-
 	const url = new URL(window.location.href);
 
 	if (filter && url.searchParams.has("product")) {
@@ -126,21 +141,6 @@ const props = {
 		return products.includes(value);
 	}
 
-	button?.addEventListener("click", () => {
-		const hidden = [
-			...document.querySelectorAll<HTMLElement>("[data-products]"),
-		]
-			.filter(
-				(e) =>
-					e.classList.contains("hidden!") && filterByProduct(e, filter!.value),
-			)
-			.slice(0, 10);
-
-		hidden.forEach((e) => e.classList.remove("hidden!"));
-
-		hideButton();
-	});
-
 	function updateFilter() {
 		const entries = [
 			...document.querySelectorAll<HTMLElement>("[data-products]"),
@@ -152,7 +152,7 @@ const props = {
 
 		const filtered = entries
 			.filter((e) => filterByProduct(e, value))
-			.slice(0, 10);
+			.slice(0, 5);
 
 		for (const entry of entries) {
 			const show = filtered.includes(entry);
@@ -173,27 +173,6 @@ const props = {
 		}
 
 		history.replaceState(null, "", url.href);
-
-		hideButton();
-	}
-
-	function hideButton() {
-		const entries = [
-			...document.querySelectorAll<HTMLDivElement>("[data-products]"),
-		];
-
-		if (entries.length === 0) return;
-
-		const filtered = entries.filter((p) => filterByProduct(p, filter!.value));
-
-		const visible = filtered.filter((p) => !p.classList.contains("hidden!"));
-		const hidden = filtered.length - visible.length;
-
-		if (hidden > 0) {
-			button!.classList.remove("hidden!");
-		} else {
-			button!.classList.add("hidden!");
-		}
 	}
 </script>