[Docs Site] Surface tags and which pages use them in style guide (#20598)

* [Docs Site] Surface tags and which pages use them in style guide

* link from components

Author: KianNH

src/components/TagsUsage.astro

@@ -0,0 +1,40 @@
+---
+import { getCollection } from "astro:content";
+import AnchorHeading from "./AnchorHeading.astro";
+import Details from "./Details.astro";
+
+const entries = await getCollection("docs", (e) => Boolean(e.data.tags));
+
+const byTag: Record<string, string[]> = {};
+
+for (const entry of entries) {
+	for (const tag of entry.data.tags!) {
+		byTag[tag] ??= [];
+		byTag[tag].push(entry.id);
+	}
+}
+---
+
+{
+	Object.entries(byTag)
+		.sort()
+		.map(([tag, pages]) => (
+			<>
+				<AnchorHeading depth={3} title={tag} />
+				<p>
+					<code>{tag}</code> is used on <code>{pages.length}</code> pages.
+				</p>
+				<Details header={`Pages tagged with ${tag}`}>
+					<ul>
+						{pages.map((path) => (
+							<li>
+								<a href={`/${path}/`} target="_blank">
+									{path}
+								</a>
+							</li>
+						))}
+					</ul>
+				</Details>
+			</>
+		))
+}

src/components/index.ts

@@ -51,6 +51,7 @@ export { default as ResourcesBySelector } from "./ResourcesBySelector.astro";
 export { default as RuleID } from "./RuleID.astro";
 export { default as SpotlightAuthorDetails } from "./SpotlightAuthorDetails.astro";
 export { default as Stream } from "./Stream.astro";
+export { default as TagsUsage } from "./TagsUsage.astro";
 export { default as TroubleshootingList } from "./TroubleshootingList.astro";
 export { default as TunnelCalculator } from "./TunnelCalculator.astro";
 export { default as Type } from "./Type.astro";

src/content/docs/style-guide/components/external-resources.mdx

@@ -40,6 +40,8 @@ The type of resources to show, apps or videos.
 
 Filter resources down to those where the `tags` property contains any of these strings.
 
+To see a list of the available tags, and which pages are associated with them, refer to [this list](/style-guide/frontmatter/tags/).
+
 ### `products`
 
 **type:** `string[]`

src/content/docs/style-guide/components/products-by-tag.mdx

@@ -4,6 +4,8 @@ styleGuide:
   component: ProductsByTag
 ---
 
+To see a list of the available tags, and which pages are associated with them, refer to [this list](/style-guide/frontmatter/tags/).
+
 ```mdx live
 import { ProductsByTag } from "~/components";
 

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

@@ -29,6 +29,8 @@ import { ResourcesBySelector } from "~/components";
 
 	An array of `tags` values to filter by.
 
+	To see a list of the available tags, and which pages are associated with them, refer to [this list](/style-guide/frontmatter/tags/).
+
 - `products` <Type text="string[]" /> <MetaInfo text="optional" />
 
 	An array of `products` values to filter by.

src/content/docs/style-guide/frontmatter/tags.mdx

@@ -0,0 +1,22 @@
+---
+title: Tags
+---
+
+import { TagsUsage } from "~/components";
+
+Tags are currently used to filter content in the [`ExternalResources`](/style-guide/components/external-resources/), [`ProductsByTag`](/style-guide/components/products-by-tag/) and the [`ResourcesBySelector`](/style-guide/components/resources-by-selector/) components.
+
+## Examples
+
+```mdx
+---
+title: Example
+tags:
+  - foo
+  - bar
+---
+```
+
+## Tags
+
+<TagsUsage />