[Docs Site] Create YouTubeVideos component

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,16 @@
+---
+import { getCollection } from "astro:content";
+import { ShowcaseYouTube } from "starlight-showcases";
+
+const videos = await getCollection("videos", (entry) => {
+	return entry.data.link.startsWith("https://youtu");
+});
+
+const entries = videos.map((video) => ({
+	href: video.data.link,
+	title: video.data.id,
+	description: video.data.description,
+}));
+---
+
+<ShowcaseYouTube entries={entries} />

src/components/YouTubeVideos.astro

@@ -63,6 +63,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,15 @@
+---
+title: YouTube Videos
+styleGuide:
+  component: YouTubeVideos
+---
+
+```mdx live
+import { YouTubeVideos } from "~/components";
+
+<YouTubeVideos />
+```
+
+## Associated content types
+
+- [Video](/style-guide/documentation-content-strategy/content-types/video/)