[Docs Site] Add page links in ComponentsUsage (#23606)

Author: KianNH

src/components/ComponentUsage.astro

@@ -1,6 +1,8 @@
 ---
 import { z } from "astro:schema";
 import { getComponentsUsage } from "~/util/components";
+import { slug } from "github-slugger";
+
 import Details from "./Details.astro";
 
 type Props = z.infer<typeof props>;
@@ -20,21 +22,69 @@ const usage = await getComponentsUsage(component);
 		<code>{usage.pages.size}</code> pages.
 	</p>
 	<Details header={`Pages which use ${component}`}>
+		<p><strong>Pages</strong></p>
+		<ul>
+			{
+				[...usage.pages]
+					.filter((path) => path.startsWith("src/content/docs/"))
+					.sort()
+					.map((path) => {
+						const slugified =
+							"/" +
+							path
+								.replace("src/content/docs/", "")
+								.replace(".mdx", "")
+								.split("/")
+								.map((segment) => slug(segment))
+								.join("/") +
+							"/";
+
+						return (
+							<li>
+								<a
+									href={"https://developers.cloudflare.com" + slugified}
+									target="_blank"
+								>
+									{slugified}
+								</a>
+								<span>
+									-
+									<a
+										href={
+											"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
+											path
+										}
+										target="_blank"
+									>
+										Source
+									</a>
+								</span>
+							</li>
+						);
+					})
+			}
+		</ul>
+		<p><strong>Partials</strong></p>
 		<ul>
 			{
-				[...usage.pages].map((path) => (
-					<li>
-						<a
-							href={
-								"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
-								path
-							}
-							target="_blank"
-						>
-							{path}
-						</a>
-					</li>
-				))
+				[...usage.pages]
+					.filter((path) => path.startsWith("src/content/partials/"))
+					.sort()
+					.map((path) => {
+						return (
+							<li>
+								<a
+									href={
+										"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
+										path
+									}
+									target="_blank"
+								>
+									{path}
+								</a>
+							</li>
+						);
+					})
 			}
 		</ul>
 	</Details>