DirectoryListing tag filter

Author: GregBrimble

src/components/DirectoryListing.astro

@@ -15,9 +15,10 @@ const props = z.object({
 	descriptions: z.boolean().default(false),
 	folder: z.string().optional(),
 	maxDepth: z.number().default(1),
+	tag: z.string().optional(),
 });
 
-let { descriptions, folder, maxDepth } = props.parse(Astro.props);
+let { descriptions, folder, maxDepth, tag } = props.parse(Astro.props);
 
 if (!folder) folder = Astro.params.slug!;
 
@@ -34,7 +35,11 @@ function getChildren(parentPath: string, depth: number) {
 	return allPages.filter((page) => {
 		const pagePath = page.id;
 		const pageDepth = pagePath.split("/").length;
-		return pageDepth === depth && pagePath.startsWith(parentPath);
+		return (
+			pageDepth === depth &&
+			pagePath.startsWith(parentPath) &&
+			(tag ? page.data.tags?.includes(tag) : true)
+		);
 	});
 }
 

src/content/docs/style-guide/components/directory-listing.mdx

@@ -53,6 +53,12 @@ When enabled, shows the [frontmatter `description`](/style-guide/frontmatter/) f
 
 Controls how many levels of nested pages to display. A value of `1` shows only direct children, while higher values will show deeper nesting levels.
 
+### `tag`
+
+**type:** `string`
+
+Optionally, filter the listing to only pages with a specific tag.
+
 ## Associated content types
 
 - [Navigation](/style-guide/documentation-content-strategy/content-types/navigation/)