[Docs Site] Add ComponentUsage component

Author: KianNH

src/components/ComponentUsage.astro

@@ -0,0 +1,41 @@
+---
+import { z } from "astro:schema";
+import { getComponentsUsage } from "~/util/components";
+import Details from "./Details.astro";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	component: z.string(),
+});
+
+const { component } = props.parse(Astro.props);
+
+const usage = await getComponentsUsage(component);
+---
+
+<>
+	<p>
+		<code>{component}</code> is used <code>{usage.count}</code> times on{" "}
+		<code>{usage.pages.size}</code> pages.
+	</p>
+	<Details header={`Pages which use ${component}`}>
+		<ul>
+			{
+				[...usage.pages].map((path) => (
+					<li>
+						<a
+							href={
+								"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
+								path
+							}
+							target="_blank"
+						>
+							{path}
+						</a>
+					</li>
+				))
+			}
+		</ul>
+	</Details>
+</>

src/components/ComponentsUsage.astro

@@ -1,7 +1,7 @@
 ---
 import { getComponentsUsage } from "~/util/components";
 import AnchorHeading from "./AnchorHeading.astro";
-import Details from "./Details.astro";
+import ComponentUsage from "./ComponentUsage.astro";
 
 const components = await getComponentsUsage();
 
@@ -11,30 +11,10 @@ const alphabetical = Object.entries(components).sort(([a], [b]) =>
 ---
 
 {
-	alphabetical.map(([component, usage]) => (
+	alphabetical.map(([component]) => (
 		<>
 			<AnchorHeading depth={2} title={component} />
-			<p>
-				<code>{component}</code> is used <code>{usage.count}</code> times on{" "}
-				<code>{usage.pages.size}</code> pages.
-			</p>
-			<Details header={`Pages which use ${component}`}>
-				<ul>
-					{[...usage.pages].map((path) => (
-						<li>
-							<a
-								href={
-									"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
-									path
-								}
-								target="_blank"
-							>
-								{path}
-							</a>
-						</li>
-					))}
-				</ul>
-			</Details>
+			<ComponentUsage component={component} />
 		</>
 	))
 }

src/components/index.ts

@@ -9,6 +9,7 @@ export { default as APIRequest } from "./APIRequest.astro";
 export { default as AvailableNotifications } from "./AvailableNotifications.astro";
 export { default as CompatibilityFlag } from "./CompatibilityFlag.astro";
 export { default as CompatibilityFlags } from "./CompatibilityFlags.astro";
+export { default as ComponentUsage } from "./ComponentUsage.astro";
 export { default as ComponentsUsage } from "./ComponentsUsage.astro";
 export { default as CopyPageButton } from "./CopyPageButton.tsx";
 export { default as CURL } from "./CURL.astro";

src/components/overrides/PageTitle.astro

@@ -5,11 +5,11 @@ import { marked } from "marked";
 import { Breadcrumbs } from "astro-breadcrumbs";
 import "astro-breadcrumbs/breadcrumbs.css";
 
-import { Aside } from "@astrojs/starlight/components";
 import Description from "~/components/Description.astro";
 import SpotlightAuthorDetails from "~/components/SpotlightAuthorDetails.astro";
 import LastReviewed from "~/components/LastReviewed.astro";
 import CopyPageButton from "~/components/CopyPageButton.tsx";
+import ComponentUsage from "~/components/ComponentUsage.astro";
 
 import { getEntry } from "astro:content";
 
@@ -122,13 +122,9 @@ const hideBreadcrumbs = Astro.locals.starlightRoute.hideBreadcrumbs;
 
 {
 	component && (
-		<Aside>
-			To see a list of pages this component is used on, please visit the{" "}
-			<a href={`/style-guide/components/usage/#${component.toLowerCase()}`}>
-				usage page
-			</a>
-			.
-		</Aside>
+			<div class="sl-markdown-content">
+				<ComponentUsage component={component} />
+			</div>
 	)
 }
 

src/util/components.ts

@@ -9,9 +9,15 @@ import {
 } from "mdast-util-mdx";
 import { visit } from "unist-util-visit";
 
-let usages: Record<string, { count: number; pages: Set<string> }>;
+type Usage = { count: number; pages: Set<string> };
 
-export const getComponentsUsage = async () => {
+let usages: Record<string, Usage>;
+
+export function getComponentsUsage(): Promise<Record<string, Usage>>;
+export function getComponentsUsage(component: string): Promise<Usage>;
+export async function getComponentsUsage(
+	component?: string,
+): Promise<Usage | Record<string, Usage>> {
 	if (!usages) {
 		usages = {};
 
@@ -48,5 +54,9 @@ export const getComponentsUsage = async () => {
 		}
 	}
 
+	if (component) {
+		return usages[component] || { count: 0, pages: new Set() };
+	}
+
 	return usages;
-};
+}