add filter

Author: KianNH

src/components/changelogs/Header.astro

@@ -1,8 +1,35 @@
 ---
 import { Image } from "astro:assets";
+import { z } from "astro:schema";
+import { getEntry, reference, type CollectionEntry } from "astro:content";
 
 import { StarlightIcon } from "..";
 import HeroImage from "~/assets/images/release-notes/hero.svg";
+import { releaseNotesSchema } from "~/schemas";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	entries: z.array(z.any()),
+});
+
+const { entries } = props.parse(Astro.props);
+
+async function uniqueProducts(
+	entries: Array<CollectionEntry<"release-notes">>,
+) {
+	const products = entries.flatMap((entry) => entry.data.products ?? []);
+
+	const unique = [...new Set(products)];
+
+	return Promise.all(
+		unique.map(async (product) => {
+			return getEntry(product);
+		}),
+	);
+}
+
+const products = await uniqueProducts(entries);
 ---
 
 <div
@@ -30,6 +57,22 @@ import HeroImage from "~/assets/images/release-notes/hero.svg";
 					</a>
 				</span>
 			</p>
+			<div>
+				<select id="release-notes-filter" class="mt-2 h-8 w-52">
+					<option value="all">All products</option>
+					{
+						products
+							.sort((a, b) => a.id.localeCompare(b.id))
+							.map(async (product) => {
+								return (
+									<option value={product.id}>
+										{product.data.product.title}
+									</option>
+								);
+							})
+					}
+				</select>
+			</div>
 		</div>
 		<div class="!mt-0 hidden sm:block">
 			<Image src={HeroImage} alt="hero image" height="240" />

src/pages/release-notes/index.astro

@@ -1,6 +1,6 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import { getCollection } from "astro:content";
+import { getCollection, type CollectionEntry } from "astro:content";
 
 import Header from "~/components/changelogs/Header.astro";
 import ProductPills from "~/components/changelogs/ProductPills.astro";
@@ -10,9 +10,7 @@ import { format } from "date-fns";
 
 const notes = await getCollection("release-notes");
 
-const days = Object.entries(
-	Object.groupBy(notes, (note) => note.id.split("/").slice(0, 3).join("/")),
-);
+notes.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 ---
 
 <StarlightPage
@@ -24,58 +22,89 @@ const days = Object.entries(
 	hideTitle={true}
 	hideBreadcrumbs={true}
 >
-	<Header />
+	<Header entries={notes} />
 	<div
-		class="max-w-[50rem] justify-self-center px-4 md:grid md:grid-cols-[15%_auto]"
+		class="w-full max-w-[50rem] justify-self-center px-4 md:grid md:grid-cols-[15%_auto]"
 	>
 		{
-			days
-				.sort()
-				.reverse()
-				.map(([date, entries]) => {
-					const formatted = format(date, "MMMM dd");
-
-					return (
-						<>
-							<div class="!mt-0">
-								<p class="md:content-center md:pr-4 md:text-right md:leading-none">
-									<strong class="text-xs">{formatted}</strong>
-									<span class="text-xs">12:00PM</span>
-								</p>
-							</div>
-							<Steps>
-								<ol class="!mt-0">
-									{entries?.map(async (entry) => {
-										const { Content } = await entry.render();
-
-										return (
-											<li>
-												<div>
-													<a
-														href={`/release-notes/${entry.slug}/`}
-														class="no-underline hover:underline"
-													>
-														<h3 class="mb-4 !leading-[28px] text-black">
-															{entry.data.title}
-														</h3>
-													</a>
-													<ProductPills products={entry.data.products} />
-												</div>
-												<p>
-													<Content />
-												</p>
-											</li>
-										);
-									})}
-								</ol>
-							</Steps>
-						</>
-					);
-				})
+			notes.map(async (entry) => {
+				const date = format(entry.data.date, "MMM dd, yyyy");
+				const time = format(entry.data.date, "hh:mm a");
+				const productIds = JSON.stringify(
+					entry.data.products.map((product) => product.id),
+				);
+
+				const { Content } = await entry.render();
+
+				return (
+					<>
+						<div class="!mt-0" data-products={productIds}>
+							<p class="md:content-center md:pr-4 md:text-right md:leading-none">
+								<strong class="text-xs">{date}</strong>
+								<span class="text-xs">{time}</span>
+							</p>
+						</div>
+						<Steps>
+							<ol class="!mt-0" data-products={productIds}>
+								<li>
+									<div>
+										<a
+											href={`/release-notes/${entry.slug}/`}
+											class="no-underline hover:underline"
+										>
+											<h3 class="mb-4 !leading-[28px] text-black">
+												{entry.data.title}
+											</h3>
+										</a>
+										<ProductPills products={entry.data.products} />
+									</div>
+									<p>
+										<Content />
+									</p>
+								</li>
+							</ol>
+						</Steps>
+					</>
+				);
+			})
 		}
 	</div>
 </StarlightPage>
 
+<script>
+	const filter = document.querySelector<HTMLSelectElement>(
+		"#release-notes-filter",
+	);
+
+	filter?.addEventListener("change", () => {
+		const entries = document.querySelectorAll<HTMLElement>("[data-products]");
+
+		if (!entries) return;
+
+		const value = filter.value;
+
+		if (value === "all") {
+			entries.forEach((entry) => (entry.style.display = ""));
+
+			return;
+		}
+
+		for (const entry of entries) {
+			if (!entry.dataset.products) continue;
+
+			const products = JSON.parse(entry.dataset.products);
+
+			const show = products.includes(value);
+
+			if (show) {
+				entry.style.display = "";
+			} else {
+				entry.style.display = "none";
+			}
+		}
+	});
+</script>
+
 <style>
 	:root {
 		--sl-content-width: 100% !important;