[Docs Site] Add CompatibilityFlag component (#19376)

Author: KianNH

src/components/CompatibilityFlag.astro

@@ -0,0 +1,32 @@
+---
+import { Aside } from "@astrojs/starlight/components";
+import { reference, getEntry } from "astro:content";
+import { z } from "astro:schema";
+
+const props = z.object({
+	flag: reference("compatibility-flags"),
+});
+
+const { flag } = await props.parseAsync(Astro.props);
+
+const { data } = await getEntry("compatibility-flags", flag.slug);
+
+const { enable_flag, enable_date } = data;
+---
+
+<Aside>
+	To use this feature,
+	{
+		enable_date && (
+			<span>
+				<a href="/workers/configuration/compatibility-dates/">
+					define a compatibility date
+				</a>{" "}
+				of <code>{enable_date}</code> or higher, or
+			</span>
+		)
+	} include <code>{enable_flag}</code> in your <a
+		href={`/workers/configuration/compatibility-flags/#setting-compatibility-flags`}
+		>compatibility flags</a
+	>.
+</Aside>

src/components/index.ts

@@ -7,6 +7,7 @@ export { Icon as AstroIcon } from "astro-icon/components";
 // Custom components
 export { default as AnchorHeading } from "./AnchorHeading.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 Description } from "./Description.astro";
 export { default as Details } from "./Details.astro";

src/content/docs/style-guide/components/compatibility-flag.mdx

@@ -0,0 +1,17 @@
+---
+title: Compatibility flag
+---
+
+This component will create an aside with the `enable_date` (if present) and the `enable_flag` of a given flag.
+
+The flag must match the name of a file in the [`compatibility-flags` collection](https://github.com/cloudflare/cloudflare-docs/tree/production/src/content/compatibility-flags), without the file extension.
+
+## Component
+
+```mdx live
+import { CompatibilityFlag } from "~/components";
+
+<CompatibilityFlag flag="global-navigator" />
+
+<CompatibilityFlag flag="nodejs-compat" />
+```