[tutorials] Separate out YT videos from tutorials (#22246)

* [tutorials] Separate out YT videos from tutorials

* component cleanup

Author: kodster28

src/components/ListTutorials.astro

@@ -6,9 +6,8 @@ import { process } from "~/util/rehype";
 import rehypeExternalLinks from "~/plugins/rehype/external-links";
 
 type DocsEntry = CollectionEntry<"docs">;
-type VideoEntry = CollectionEntry<"videos">;
 
-const tutorials: Array<DocsEntry | VideoEntry> = [];
+const tutorials: Array<DocsEntry> = [];
 
 const currentSection = Astro.params.slug?.split("/")[0];
 const currentProduct = await getEntry("products", currentSection!);
@@ -20,8 +19,6 @@ if (!currentProduct) {
 }
 
 const productTitle = currentProduct.data.product.title;
-const videoText = "🎥 Video"
-const tutorialText = "📝 Tutorial"
 
 const docs = await getCollection("docs", (entry) => {
 	return (
@@ -38,14 +35,6 @@ const docs = await getCollection("docs", (entry) => {
 
 tutorials.push(...docs);
 
-const videos = await getCollection("videos", (entry) => {
-	return entry.data.products.some(
-		(v: string) => v.toUpperCase() === productTitle.toUpperCase(),
-	);
-});
-
-tutorials.push(...videos);
-
 tutorials.sort((a, b) => Number(b.data.updated) - Number(a.data.updated));
 
 const timeAgo = (date?: Date) => {
@@ -66,13 +55,9 @@ const timeAgo = (date?: Date) => {
 	<tbody>
 		{
 			tutorials.map(async (tutorial) => {
-				const title =
-					tutorial.collection === "docs" ? tutorial.data.title : tutorial.id;
+				const title = tutorial.data.title;
 
-				const href =
-					tutorial.collection === "docs"
-						? `/${tutorial.id}/`
-						: tutorial.data.link;
+				const href = `/${tutorial.id}/`;
 
 				const anchor = await process(`<a href=${href}>${title}</a>`, [
 					rehypeExternalLinks,
@@ -84,7 +69,7 @@ const timeAgo = (date?: Date) => {
 							<Fragment set:html={anchor} />
 						</td>
 						<td>{timeAgo(tutorial.data.updated)}</td>
-						<td>{tutorial.collection === "docs" ? tutorialText : videoText}</td>
+						<td>📝 Tutorial</td>
 						<td>{tutorial.data.difficulty}</td>
 					</tr>
 				);

src/components/YouTubeVideos.astro

@@ -14,13 +14,19 @@ if (products.length === 0) {
 	products.push(currentSection);
 }
 
-const videos = await getCollection("videos", (entry) => {
+let videos = await getCollection("videos", (entry) => {
 	return (
-		entry.data.link.startsWith("https://youtu") &&
-		entry.data.products?.some((v: string) => products.includes(v))
+		entry.data.link.includes("youtu") &&
+		entry.data.products?.some((v: string) =>
+			products.some((p) => v.trim().toLowerCase() === p.trim().toLowerCase()),
+		)
 	);
 });
 
+videos = videos.sort(
+	(a, b) =>
+		new Date(b.data.updated).getTime() - new Date(a.data.updated).getTime(),
+);
 const entries = videos.map((video) => ({
 	href: video.data.link,
 	title: video.data.id,

src/content/docs/ai-gateway/tutorials/index.mdx

@@ -7,8 +7,14 @@ sidebar:
   hideIndex: true
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components";
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with AI Gateway.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["AI Gateway"]} />

src/content/docs/d1/tutorials/index.mdx

@@ -5,11 +5,16 @@ title: Tutorials
 hideChildren: true
 sidebar:
   order: 12
-
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components"
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with D1.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["D1"]} />

src/content/docs/developer-spotlight/tutorials/index.mdx

@@ -5,9 +5,8 @@ title: Tutorials
 hideChildren: true
 sidebar:
   order: 2
-
 ---
 
-import { ListTutorials } from "~/components"
+import { ListTutorials } from "~/components";
 
 <ListTutorials />

src/content/docs/durable-objects/tutorials/index.mdx

@@ -5,10 +5,9 @@ title: Tutorials
 hideChildren: true
 sidebar:
   order: 9
-
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components"
+import { GlossaryTooltip, ListTutorials } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with Durable Objects.
 

src/content/docs/kv/tutorials/index.mdx

@@ -4,11 +4,16 @@ pcx_content_type: navigation
 hideChildren: true
 sidebar:
   order: 4
-
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components"
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with KV.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["KV"]} />

src/content/docs/pages/tutorials/index.mdx

@@ -5,11 +5,16 @@ title: Tutorials
 hideChildren: true
 sidebar:
   order: 7
-
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components"
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with Pages.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["Pages"]} />

src/content/docs/queues/tutorials/index.mdx

@@ -5,9 +5,14 @@ title: Tutorials
 hideChildren: true
 sidebar:
   order: 6
-
 ---
 
-import { ListTutorials } from "~/components"
+import { ListTutorials, YouTubeVideos } from "~/components";
+
+## Docs
 
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["Queues"]} />

src/content/docs/r2/tutorials/index.mdx

@@ -6,8 +6,14 @@ sidebar:
   order: 9
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components";
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with R2.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["R2"]} />