[Docs Site] Add file prop to Stream component

Author: KianNH

src/components/Stream.astro

@@ -3,6 +3,7 @@ import { z } from "astro:schema";
 import { Badge } from "@astrojs/starlight/components";
 import parse from "parse-duration";
 import Details from "./Details.astro";
+import { reference, getEntry } from "astro:content";
 
 type Props = z.input<typeof props>;
 
@@ -15,10 +16,51 @@ const props = z
 		showMoreVideos: z.boolean().default(false),
 		expandChapters: z.boolean().default(false),
 	})
-	.strict();
+	.strict()
+	.or(
+		z
+			.object({
+				file: reference("stream"),
+				showMoreVideos: z.boolean().default(false),
+				expandChapters: z.boolean().default(false),
+			})
+			.strict(),
+	);
+
+const input = props.parse(Astro.props);
+
+let id;
+let title;
+let thumbnail;
+let chapters;
+const { showMoreVideos, expandChapters } = input;
+
+if ("id" in input) {
+	id = input.id;
+	title = input.title;
+	thumbnail = input.thumbnail;
+	chapters = input.chapters;
+} else {
+	const { file } = input;
+
+	const entry = await getEntry(file);
+
+	if (!entry) {
+		throw new Error(`[Stream] Could not find "${file}"`);
+	}
+
+	id = entry.data.id;
+	title = entry.data.title;
+	chapters = entry.data.chapters;
 
-const { id, title, thumbnail, chapters, showMoreVideos, expandChapters } =
-	props.parse(Astro.props);
+	if (entry.data.thumbnail) {
+		if ("url" in entry.data.thumbnail) {
+			thumbnail = entry.data.thumbnail.url;
+		} else {
+			thumbnail = entry.data.thumbnail.timestamp;
+		}
+	}
+}
 
 const BASE_URL = `https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/`;
 

src/content/docs/style-guide/components/stream.mdx

@@ -7,39 +7,43 @@ styleGuide:
 ## Import
 
 ```mdx
-import { Stream } from "~/components"
+import { Stream } from "~/components";
 ```
 
 ## Usage
 
-import { Stream } from "~/components"
+import { Stream } from "~/components";
 
 <Stream
-    id="0f5d548ef3f606e6833b78e0193847c4"
-    title="Connect and secure from any network to anywhere"
-		thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Connect-and-secure-from-any-network-to-anywhere.jpg"
-		chapters={{
-			"Chapter 1": "30s",
-			"Chapter 2": "1m30s",
-			"Chapter 3": "3m15s",
-			"Chapter 4": "3m25s",
-			"Chapter 5": "3m35s",
-		}}
+	id="0f5d548ef3f606e6833b78e0193847c4"
+	title="Connect and secure from any network to anywhere"
+	thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Connect-and-secure-from-any-network-to-anywhere.jpg"
+	chapters={{
+		"Chapter 1": "30s",
+		"Chapter 2": "1m30s",
+		"Chapter 3": "3m15s",
+		"Chapter 4": "3m25s",
+		"Chapter 5": "3m35s",
+	}}
 />
 
+<Stream file="warp-1-basics" />
+
 ```mdx
 <Stream
-    id="0f5d548ef3f606e6833b78e0193847c4"
-    title="Connect and secure from any network to anywhere"
-		thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Connect-and-secure-from-any-network-to-anywhere.jpg"
-		chapters={{
-			"Chapter 1": "30s",
-			"Chapter 2": "1m30s",
-			"Chapter 3": "3m15s",
-			"Chapter 4": "3m25s",
-			"Chapter 5": "3m35s",
-		}}
+	id="0f5d548ef3f606e6833b78e0193847c4"
+	title="Connect and secure from any network to anywhere"
+	thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Connect-and-secure-from-any-network-to-anywhere.jpg"
+	chapters={{
+		"Chapter 1": "30s",
+		"Chapter 2": "1m30s",
+		"Chapter 3": "3m15s",
+		"Chapter 4": "3m25s",
+		"Chapter 5": "3m35s",
+	}}
 />
+
+<Stream file="warp-1-basics" />
 ```
 
 ## `<Stream>` Props
@@ -86,4 +90,10 @@ If `chapters` is present, is passed through to the `open` property of the [Detai
 
 **default:** `true`
 
-Whether to show the "Watch more videos on our Developer Channel" link below the video.
+Whether to show the "Watch more videos on our Developer Channel" link below the video.
+
+### `file`
+
+**type:** `string`
+
+If `file` is provided, the `id`, `title`,` thumbnail` and `chapters` properties cannot be used and are instead retrieved from the YAML file in the [`stream`](https://github.com/cloudflare/cloudflare-docs/tree/production/src/content/stream) collection.