[DO] Add "get started" video series

astro.config.mjs

@@ -141,7 +141,6 @@ export default defineConfig({
 				PageSidebar: "./src/components/overrides/PageSidebar.astro",
 				SiteTitle: "./src/components/overrides/SiteTitle.astro",
 				PageTitle: "./src/components/overrides/PageTitle.astro",
-				Pagination: "./src/components/overrides/Pagination.astro",
 				SocialIcons: "./src/components/overrides/SocialIcons.astro",
 				SkipLink: "./src/components/overrides/SkipLink.astro",
 			},
@@ -155,6 +154,7 @@ export default defineConfig({
 				"./src/table.css",
 				"./src/tailwind.css",
 			],
+			pagination: false,
 			plugins: runLinkCheck
 				? [
 						starlightLinksValidator({

src/content/docs/durable-objects/get-started/index.mdx

@@ -0,0 +1,12 @@
+---
+pcx_content_type: navigation
+title: Get started
+sidebar:
+  order: 2
+  group:
+    hideIndex: true
+---
+
+import { DirectoryListing } from "~/components";
+
+<DirectoryListing />

src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx

@@ -0,0 +1,29 @@
+---
+pcx_content_type: video
+title: Building the App Frontend and UI
+sidebar:
+  order: 6
+prev: true
+next: true
+tableOfContents: false
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="efc08fd03da0dfebd2e4402af519acb5"
+	videoTitle="Building the App Frontend and UI"
+	thumbnailStartTime="2.5s"
+/>
+
+Now, we're moving to the frontend. In this video, we'll set up the frontend starter code (the starter code is located in the Veet GitHub repository), connect to Durable Objects using a call room ID, and display a local video preview.
+
+Useful links:
+
+- [GitHub code](https://github.com/megaconfidence/veet)
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx

@@ -0,0 +1,32 @@
+---
+pcx_content_type: video
+title: Deploy your Video Call app
+sidebar:
+  order: 8
+prev: true
+tableOfContents: false
+next:
+  link: /durable-objects/examples/
+  label: View more examples
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="aaa652e0e05bc09ac35451d9cbd4b341"
+	videoTitle="Deploy your Video Call app"
+	thumbnailStartTime="2.5s"
+/>
+
+We're almost done with the project, and in this video, we'll add the finishing touches. Learn how to handle call disconnections, wire up essential media controls like muting/unmuting and video toggling, and integrate a TURN server to ensure reliable connections even behind firewalls. By the end of this video, your app will be fully functional and ready for deployment.
+
+Useful links:
+
+- [GitHub code](https://github.com/megaconfidence/veet)
+- [TURN service](/calls/turn/)
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx

@@ -0,0 +1,29 @@
+---
+pcx_content_type: video
+title: What are Durable Objects?
+sidebar:
+  order: 3
+prev: true
+next: true
+tableOfContents: false
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="fe3a2f97642951e692e86b3af36a4251"
+	videoTitle="What are Durable Objects?"
+	thumbnailStartTime="2.5s"
+/>
+
+In this video, we will show how Durable Objects work and start building a video call app together.
+
+Useful links:
+
+- [Sign up](https://dash.cloudflare.com/sign-up) for a Cloudflare account
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started/video-series/index.mdx

@@ -0,0 +1,15 @@
+---
+pcx_content_type: navigation
+title: Video series
+sidebar:
+  order: 2
+next: true
+---
+
+import { DirectoryListing, Stream } from "~/components";
+
+Building stateful apps on a serverless architecture has been difficult until Cloudflare's Durable Objects - a powerful API that enables you to easily build stateful serverless apps on Workers. In this series of videos, we will show how Durable Objects work and start building a video call app together.
+
+To get started, [create an account](https://dash.cloudflare.com/sign-up) on Cloudflare today for free.
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />

src/content/docs/durable-objects/get-started/video-series/intro.mdx

@@ -0,0 +1,29 @@
+---
+pcx_content_type: navigation
+title: Introduction
+sidebar:
+  order: 2
+prev: true
+next: true
+tableOfContents: false
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="558cdd841276a1aba1426af6293d6d15"
+	videoTitle="Introduction to Durable Objects"
+	thumbnailStartTime="2.5s"
+/>
+
+In this episode, we will present an overview of the final project, discuss its underlying architecture, and access resources to set up the project locally.
+
+Useful links:
+
+- [GitHub code](https://github.com/megaconfidence/veet)
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx

@@ -0,0 +1,29 @@
+---
+pcx_content_type: video
+title: Make and Answer WebRTC calls
+sidebar:
+  order: 7
+prev: true
+next: true
+tableOfContents: false
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="3b3a88940d3b1c635dbb6df0516218ab"
+	videoTitle="Make and Answer WebRTC calls"
+	thumbnailStartTime="2.5s"
+/>
+
+In this video, we'll build on the frontend we set up earlier by adding functionality for making and answering WebRTC video calls. You'll learn how to create peer-to-peer connections, handle ICE candidates, and seamlessly send and receive video streams between users.
+
+Useful links:
+
+- [GitHub code](https://github.com/megaconfidence/veet)
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx

@@ -0,0 +1,29 @@
+---
+pcx_content_type: video
+title: Real-time messaging with WebSockets
+sidebar:
+  order: 5
+prev: true
+next: true
+tableOfContents: false
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="a02e5f9e58999d96c3ec9dbb0efb9707"
+	videoTitle="Real-time messaging with WebSockets"
+	thumbnailStartTime="2.5s"
+/>
+
+Now, we'll take it a step further by enabling our server to receive and broadcast messages. In this video, you'll learn how to route and broadcast incoming messages from WebSocket connections and implement error handling such as closed WebSocket connections. By the end, you will have completed the backend for our video call app.
+
+Useful links:
+
+- [GitHub code](https://github.com/megaconfidence/veet)
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx

@@ -0,0 +1,31 @@
+---
+pcx_content_type: video
+title: Create a Serverless Websocket 'Backend'
+sidebar:
+  order: 4
+prev: true
+next: true
+tableOfContents: false
+---
+
+import { Details, DirectoryListing, Stream } from "~/components";
+
+<Stream
+	videoId="86c64a50e0ea53dadd1ea1194bdeda92"
+	videoTitle="Create a Serverless Websocket 'Backend'"
+	thumbnailStartTime="2.5s"
+/>
+
+In this video, we'll create a WebSocket backend using serverless technology, making the process simpler than ever before. You'll learn how to create your first Durable Object, set up a WebSocket server to coordinate connections, and keep track of connected clients.
+
+Useful links:
+
+- [CLI command](/pages/get-started/c3/) for creating new Workers and Pages projects
+- [Hopscotch.io](https://hoppscotch.io/) for local WebSocket testing
+- [GitHub code](https://github.com/megaconfidence/veet)
+
+<Details header="Video series" >
+
+<DirectoryListing folder="durable-objects/get-started/video-series" />
+
+</Details>

src/content/docs/durable-objects/get-started.mdx → src/content/docs/durable-objects/get-started/walkthrough.mdx

@@ -1,8 +1,8 @@
 ---
-title: Get started
+title: Walkthrough
 pcx_content_type: get-started
 sidebar:
-  order: 2
+  order: 1
 ---
 
 import { Render, TabItem, Tabs, PackageManagers } from "~/components";

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

@@ -8,6 +8,7 @@ import { Stream } from "~/components"
 <Stream
     videoId="3c46281a9b2b84ee6776a53f87580c45"
     videoTitle="Explore Workers AI Models Using a Jupyter Notebook"
+		thumbnailStartTime="2.5s"
 />
 ```
 
@@ -18,4 +19,5 @@ import { Stream } from "~/components"
 <Stream
     videoId="3c46281a9b2b84ee6776a53f87580c45"
     videoTitle="Explore Workers AI Models Using a Jupyter Notebook"
+		thumbnailStartTime="2.5s"
 />

src/schemas/base.ts

@@ -32,6 +32,7 @@ export const baseSchema = z.object({
 			z.literal("example"),
 			z.literal("learning-unit"),
 			z.literal("design-guide"),
+			z.literal("video"),
 		])
 		.catch((ctx) => ctx.input)
 		.optional()