[Docs Site] Create DashButton component

Author: KianNH

src/components/AvailableDashRoutes.astro

@@ -0,0 +1,16 @@
+---
+import { Code } from "@astrojs/starlight/components";
+import Routes from "~/content/dash-routes/index.json";
+---
+
+<ul>
+	{
+		Routes.map((route) => (
+			<li>
+				<strong>{(route.parent ?? []).concat(route.name).join(" > ")}</strong>
+				<br />
+				<Code lang="mdx" code={`<DashButton url="${route.deeplink}" />`} />
+			</li>
+		))
+	}
+</ul>

src/components/DashButton.astro

@@ -0,0 +1,25 @@
+---
+import { z } from "astro:schema";
+import { LinkButton } from "@astrojs/starlight/components";
+import Routes from "~/content/dash-routes/index.json";
+
+const props = z
+	.object({
+		url: z.string(),
+	})
+	.strict();
+
+const { url } = props.parse(Astro.props);
+
+const route = Routes.find((route) => route.deeplink === url);
+
+if (!route) {
+	throw new Error(`[DashButton] No route found for ${url}`);
+}
+
+const { name } = route;
+
+const { href } = new URL(route.deeplink, "https://dash.cloudflare.com");
+---
+
+<LinkButton href={href}>Go to {name}</LinkButton>

src/components/index.ts

@@ -14,6 +14,7 @@ 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";
+export { default as DashButton } from "./DashButton.astro";
 export { default as Description } from "./Description.astro";
 export { default as Details } from "./Details.astro";
 export { default as DirectoryListing } from "./DirectoryListing.astro";