rename prop

Author: KianNH

src/components/ResourcesBySelector.astro

@@ -11,10 +11,12 @@ const props = z.object({
 	types: z.string().array(),
 	products: z.string().array().optional(),
 	directory: z.string().optional(),
-	filters: z.custom<Frontmatter>().array().optional(),
+	filterables: z.custom<Frontmatter>().array().optional(),
 });
 
-const { tags, types, products, directory, filters } = props.parse(Astro.props);
+const { tags, types, products, directory, filterables } = props.parse(
+	Astro.props,
+);
 
 const resources = await getCollection("docs", ({ id, data }) => {
 	return (
@@ -27,9 +29,9 @@ const resources = await getCollection("docs", ({ id, data }) => {
 
 const facets = resources.reduce(
 	(acc, page) => {
-		if (!filters) return acc;
+		if (!filterables) return acc;
 
-		for (const filter of filters) {
+		for (const filter of filterables) {
 			const val = page.data[filter];
 			if (val) {
 				if (Array.isArray(val) && val.every((v) => typeof v === "string")) {
@@ -49,6 +51,6 @@ const facets = resources.reduce(
 <ResourcesBySelectorReact
 	resources={resources}
 	facets={facets}
-	filters={filters}
+	filters={filterables}
 	client:load
 />

src/content/docs/style-guide/components/resources-by-selector.mdx

@@ -16,7 +16,7 @@ import { ResourcesBySelector } from "~/components";
 <ResourcesBySelector
 	directory="workers/examples/"
 	types={["example"]}
-	filters={["languages", "tags"]}
+	filterables={["languages", "tags"]}
 />
 ```
 
@@ -26,9 +26,9 @@ import { ResourcesBySelector } from "~/components";
 
   The directory to search for resources in, relative to `src/content/docs/`. For example, for Workers tutorials, `directory="workers/tutorials/"`.
 
-- `filters` <Type text="string[]" />
+- `filterables` <Type text="string[]" />
 
-  An array of frontmatter properties to filter by. For example, `filters={["languages", "tags"]}`.
+  An array of frontmatter properties to show in the frontend filter dropdown. For example, `filterables={["languages", "tags"]}` will allow users to filter based on each pages `languages` and `tags` frontmatter.
 
 - `types` <Type text="string[]" />