From 57b8d98070f6cde8693816e4baef0bcc56d74777 Mon Sep 17 00:00:00 2001
From: Kian <kian@kian.org.uk>
Date: Tue, 24 Sep 2024 15:29:51 +0100
Subject: [PATCH] [Docs Site] Add components for type highlighting (#17056)

---
 src/components/MetaInfo.astro                 | 15 +++++++++
 src/components/Type.astro                     | 26 ++++++++++++++++
 src/components/index.ts                       |  2 ++
 .../components/type-highlighting.mdx          | 31 +++++++++++++++++++
 4 files changed, 74 insertions(+)
 create mode 100644 src/components/MetaInfo.astro
 create mode 100644 src/components/Type.astro
 create mode 100644 src/content/docs/style-guide/components/type-highlighting.mdx

diff --git a/src/components/MetaInfo.astro b/src/components/MetaInfo.astro
new file mode 100644
index 000000000000000..d302876d77b893a
--- /dev/null
+++ b/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>
diff --git a/src/components/Type.astro b/src/components/Type.astro
new file mode 100644
index 000000000000000..1f18743c5f0b0ad
--- /dev/null
+++ b/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",
+	}}
+/>
diff --git a/src/components/index.ts b/src/components/index.ts
index fd6987b1d7ca018..17ac7887f0ee3c9 100644
--- a/src/components/index.ts
+++ b/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";
diff --git a/src/content/docs/style-guide/components/type-highlighting.mdx b/src/content/docs/style-guide/components/type-highlighting.mdx
new file mode 100644
index 000000000000000..8626e875b64675a
--- /dev/null
+++ b/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.
+```
\ No newline at end of file