cloudflare-docs/src/pages/products.astro

---
import { getCollection, type CollectionEntry } from "astro:content";
// @ts-expect-error virtual module
import iconCollection from "virtual:astro-icon";
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import { getIconData, iconToSVG } from "@iconify/utils";
import ProductCatalog from "~/components/ProductCatalog";
import type { ProductData } from "~/components/ProductCatalog";
import type { StarlightPageProps } from "@astrojs/starlight/props";

let products: CollectionEntry<"products">[] = await getCollection(
	"products",
	(entry: CollectionEntry<"products">) => {
		return entry.data.product?.show ?? true;
	},
);

let productData: ProductData[] = products.map((product) => {
	const iconData = getIconData(iconCollection.local, product.id);
	let icon = undefined;
	if (iconData) {
		icon = iconToSVG(iconData);
	}

	return {
		...product,
		icon,
		groups: [
			product.data.product.group,
			...(product.data.product.additional_groups || []),
		].filter((val) => Boolean(val)),
	};
});

const props = {
	frontmatter: {
		title: "Products",
		description:
			"API reference, how-to guides, tutorials, example code, and more.",
		template: "splash",
	},
	hideBreadcrumbs: true,
} as StarlightPageProps;
---

<StarlightPage {...props}>
	<ProductCatalog products={productData} client:load />
</StarlightPage>

<style>
	html:not([data-has-sidebar]) {
		--sl-content-width: 75rem;
	}
</style>