[Docs Site] Add components for type highlighting (#17056)

Author: KianNH

src/components/MetaInfo.astro

@@ -0,0 +1,15 @@
+---
+import { z } from "astro:schema";
+
+type Props = z.infer<typeof props>;
+
+const props = z
+	.object({
+		text: z.string(),
+	})
+	.strict();
+
+const { text } = props.parse(Astro.props);
+---
+
+<span class="text-xs align-middle">{text}</span>

src/components/Type.astro

@@ -0,0 +1,26 @@
+---
+import { z } from "astro:schema";
+import { Badge } from "@astrojs/starlight/components";
+
+type Props = z.infer<typeof props>;
+
+const props = z
+	.object({
+		text: z.string(),
+	})
+	.strict();
+
+const { text } = props.parse(Astro.props);
+---
+
+<Badge
+	text={text}
+	size="small"
+	style={{
+		color: "var(--sl-text-white)",
+		backgroundColor: "var(--sl-color-gray-6)",
+		borderColor: "var(--sl-color-gray-3)",
+		fontSize: "0.7rem",
+		fontWeight: "bold",
+	}}
+/>

src/components/index.ts

@@ -26,6 +26,7 @@ export { default as LinkTitleCard } from "./LinkTitleCard.astro";
 export { default as ListExamples } from "./ListExamples.astro";
 export { default as ListTutorials } from "./ListTutorials.astro";
 export { default as Markdown } from "./Markdown.astro";
+export { default as MetaInfo } from "./MetaInfo.astro";
 export { default as NetworkMap } from "./NetworkMap.astro";
 export { default as PagesBuildEnvironment } from "./PagesBuildEnvironment.astro";
 export { default as PagesBuildEnvironmentLanguages } from "./PagesBuildEnvironmentLanguages.astro";
@@ -48,6 +49,7 @@ export { default as Stream } from "./Stream.astro";
 export { default as ThreeCardGrid } from "./ThreeCardGrid.astro";
 export { default as TroubleshootingList } from "./TroubleshootingList.astro";
 export { default as TunnelCalculator } from "./TunnelCalculator.astro";
+export { default as Type } from "./Type.astro";
 export { default as WorkersAIModels } from "./WorkersAIModels.astro";
 export { default as WorkersArchitectureDiagram } from "./WorkersArchitectureDiagram.astro";
 export { default as WorkersIsolateDiagram } from "./WorkersIsolateDiagram.astro";

src/content/docs/style-guide/components/type-highlighting.mdx

@@ -0,0 +1,31 @@
+---
+title: Type highlighting
+description: Components for styling type information for CLI/function parameters.
+---
+
+## Type
+
+```mdx live
+import { Type } from "~/components";
+
+<Type text="Promise<T | string | ArrayBuffer>" />
+```
+
+## MetaInfo
+
+```mdx live
+import { MetaInfo } from "~/components";
+
+<MetaInfo text="(default: false) optional" />
+```
+
+## Combined example
+
+```mdx live
+import { Type, MetaInfo } from "~/components";
+
+- `name` <Type text="string" />
+  - The name of your service.
+- `local` <Type text="boolean" /> <MetaInfo text="(default: true) optional" />
+  - If the service should run locally or not.
+```