[tutorials] Separate out YT videos from tutorials

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"]} />

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

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

src/content/docs/workers-ai/guides/tutorials/index.mdx

@@ -6,12 +6,16 @@ sidebar:
   order: 3
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components";
-
-:::note
-[Explore our community-written tutorials contributed through the Developer Spotlight program.](/developer-spotlight/)
-:::
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with Workers AI.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+Also, explore our video resources on Workers AI:
+
+<YouTubeVideos products={["Workers AI"]} />

src/content/docs/workers/examples/index.mdx

@@ -9,10 +9,6 @@ sidebar:
 
 import { GlossaryTooltip, ListExamples } from "~/components";
 
-:::note
-[Explore our community-written tutorials contributed through the Developer Spotlight program.](/developer-spotlight/)
-:::
-
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for Workers.
 
 <ListExamples directory="workers/examples/" filters={["languages", "tags"]} />

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

@@ -7,12 +7,14 @@ sidebar:
   order: 4
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components";
-
-:::note
-[Explore our community-written tutorials contributed through the Developer Spotlight program.](/developer-spotlight/)
-:::
+import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with Workers.
 
+## Docs
+
 <ListTutorials />
+
+## Videos
+
+<YouTubeVideos products={["Workers"]} />

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

@@ -7,12 +7,8 @@ sidebar:
   order: 4
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components";
-
-:::note
-[Explore our community-written tutorials contributed through the Developer Spotlight program.](/developer-spotlight/)
-:::
+import { GlossaryTooltip, YouTubeVideos } from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with Workers.
 
-<ListTutorials />
+<YouTubeVideos products={["Workflows"]} />

src/content/videos/index.yaml

@@ -228,10 +228,10 @@
 - link: https://youtu.be/slS4RBV0SBk
   id: Cloudflare Workflows | Introduction (Part 1 of 3)
   description: In this video, we introduce Cloudflare Workflows, the Newest Developer Platform Primitive at Cloudflare.
-  tags: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV]
+  tags: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV, D1]
   languages: [TypeScript]
   # stream_id:
-  products: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV]
+  products: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV, D1]
   cloudflare: true
   author: craig
   updated: 2024-10-30
@@ -240,10 +240,10 @@
 - link: https://youtu.be/y4PPsvHrQGA
   id: Cloudflare Workflows | Batching and Monitoring Your Durable Execution (Part 2 of 3)
   description: Workflows exposes metrics such as execution, error rates, steps, and total duration!
-  tags: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV]
+  tags: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV, D1]
   languages: [TypeScript]
   # stream_id:
-  products: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV]
+  products: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV, D1]
   cloudflare: true
   author: craig
   updated: 2024-10-30
@@ -252,10 +252,10 @@
 - link: https://youtu.be/L6gR4Yr3UW8
   id: Cloudflare Workflows | Schedule and Sleep For Your Apps (Part 3 of 3)
   description: Cloudflare Workflows allows you to initiate sleep as an explicit step, which can be useful when you want a Workflow to wait, schedule work ahead, or pause until an input or other external state is ready.
-  tags: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV]
+  tags: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV, D1]
   languages: [TypeScript]
   # stream_id:
-  products: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV]
+  products: [Workflows, Workers, Queues, Workers AI, AI Gateway, KV, D1]
   cloudflare: true
   author: craig
   updated: 2024-10-30