offload to search

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/historical/[page].astro

@@ -104,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>
 
@@ -118,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")) {
@@ -144,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]"),
@@ -170,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);
@@ -191,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>