[Docs Site] Create YouTubeVideos component (#21414)

* [Docs Site] Create YouTubeVideos component

* link

* add products filter

Author: KianNH

package-lock.json

@@ -109,6 +109,7 @@
 		"starlight-image-zoom": "0.11.1",
 		"starlight-links-validator": "0.14.3",
 		"starlight-package-managers": "0.10.0",
+		"starlight-showcases": "0.3.0",
 		"strip-markdown": "6.0.0",
 		"svgo": "3.3.2",
 		"tailwindcss": "3.4.17",

package.json

@@ -0,0 +1,31 @@
+---
+import { z } from "astro:schema";
+import { getCollection } from "astro:content";
+import { ShowcaseYouTube } from "starlight-showcases";
+
+const props = z.object({
+	products: z.string().array().default([]),
+});
+
+const { products } = props.parse(Astro.props);
+
+if (products.length === 0) {
+	const [currentSection] = Astro.url.pathname.split("/").filter(Boolean);
+	products.push(currentSection);
+}
+
+const videos = await getCollection("videos", (entry) => {
+	return (
+		entry.data.link.startsWith("https://youtu") &&
+		entry.data.products?.some((v: string) => products.includes(v))
+	);
+});
+
+const entries = videos.map((video) => ({
+	href: video.data.link,
+	title: video.data.id,
+	description: video.data.description,
+}));
+---
+
+<ShowcaseYouTube entries={entries} />

src/components/YouTubeVideos.astro

@@ -64,6 +64,7 @@ export { default as WorkersArchitectureDiagram } from "./WorkersArchitectureDiag
 export { default as WorkersIsolateDiagram } from "./WorkersIsolateDiagram.astro";
 export { default as WorkerStarter } from "./WorkerStarter.astro";
 export { default as YouTube } from "./YouTube.astro";
+export { default as YouTubeVideos } from "./YouTubeVideos.astro";
 
 // Taken from Astro
 export { default as ListCard } from "./astro/ListCard.astro";

src/components/index.ts

@@ -0,0 +1,23 @@
+---
+title: YouTube Videos
+styleGuide:
+  component: YouTubeVideos
+---
+
+## Usage
+
+```mdx live
+import { YouTubeVideos } from "~/components";
+
+<YouTubeVideos products={["Workers"]} />
+```
+
+## `<YouTubeVideos>` Props
+
+### `products`
+
+**type:** `string[]`
+
+An array of products to show associated videos for.
+
+If not specified, the product where the component is used will be used.