Skip to content

Commit ea1f5aa

Browse files
kodster28hyperlint-ai[bot]
authored and
elithrar
committed
[DO] Add "get started" video series (#16866)
* [TEST] DO video series * Updated with videos and more content * Update style guide * Remove empty pagination override * Disable right side toc * Update to add descriptions and links * Apply suggestions from code review Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> --------- Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>
1 parent c714604 commit ea1f5aa

File tree

14 files changed

+241
-10
lines changed

14 files changed

+241
-10
lines changed

‎astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,6 @@ export default defineConfig({
141141
PageSidebar: "./src/components/overrides/PageSidebar.astro",
142142
SiteTitle: "./src/components/overrides/SiteTitle.astro",
143143
PageTitle: "./src/components/overrides/PageTitle.astro",
144-
Pagination: "./src/components/overrides/Pagination.astro",
145144
SocialIcons: "./src/components/overrides/SocialIcons.astro",
146145
SkipLink: "./src/components/overrides/SkipLink.astro",
147146
},
@@ -155,6 +154,7 @@ export default defineConfig({
155154
"./src/table.css",
156155
"./src/tailwind.css",
157156
],
157+
pagination: false,
158158
plugins: runLinkCheck
159159
? [
160160
starlightLinksValidator({

‎src/components/overrides/Pagination.astro‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Get started
4+
sidebar:
5+
order: 2
6+
group:
7+
hideIndex: true
8+
---
9+
10+
import { DirectoryListing } from "~/components";
11+
12+
<DirectoryListing />

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
pcx_content_type: video
3+
title: Building the App Frontend and UI
4+
sidebar:
5+
order: 6
6+
prev: true
7+
next: true
8+
tableOfContents: false
9+
---
10+
11+
import { Details, DirectoryListing, Stream } from "~/components";
12+
13+
<Stream
14+
videoId="efc08fd03da0dfebd2e4402af519acb5"
15+
videoTitle="Building the App Frontend and UI"
16+
thumbnailStartTime="2.5s"
17+
/>
18+
19+
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.
20+
21+
Useful links:
22+
23+
- [GitHub code](https://github.com/megaconfidence/veet)
24+
25+
<Details header="Video series" >
26+
27+
<DirectoryListing folder="durable-objects/get-started/video-series" />
28+
29+
</Details>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
pcx_content_type: video
3+
title: Deploy your Video Call app
4+
sidebar:
5+
order: 8
6+
prev: true
7+
tableOfContents: false
8+
next:
9+
link: /durable-objects/examples/
10+
label: View more examples
11+
---
12+
13+
import { Details, DirectoryListing, Stream } from "~/components";
14+
15+
<Stream
16+
videoId="aaa652e0e05bc09ac35451d9cbd4b341"
17+
videoTitle="Deploy your Video Call app"
18+
thumbnailStartTime="2.5s"
19+
/>
20+
21+
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.
22+
23+
Useful links:
24+
25+
- [GitHub code](https://github.com/megaconfidence/veet)
26+
- [TURN service](/calls/turn/)
27+
28+
<Details header="Video series" >
29+
30+
<DirectoryListing folder="durable-objects/get-started/video-series" />
31+
32+
</Details>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
pcx_content_type: video
3+
title: What are Durable Objects?
4+
sidebar:
5+
order: 3
6+
prev: true
7+
next: true
8+
tableOfContents: false
9+
---
10+
11+
import { Details, DirectoryListing, Stream } from "~/components";
12+
13+
<Stream
14+
videoId="fe3a2f97642951e692e86b3af36a4251"
15+
videoTitle="What are Durable Objects?"
16+
thumbnailStartTime="2.5s"
17+
/>
18+
19+
In this video, we will show how Durable Objects work and start building a video call app together.
20+
21+
Useful links:
22+
23+
- [Sign up](https://dash.cloudflare.com/sign-up) for a Cloudflare account
24+
25+
<Details header="Video series" >
26+
27+
<DirectoryListing folder="durable-objects/get-started/video-series" />
28+
29+
</Details>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Video series
4+
sidebar:
5+
order: 2
6+
next: true
7+
---
8+
9+
import { DirectoryListing, Stream } from "~/components";
10+
11+
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.
12+
13+
To get started, [create an account](https://dash.cloudflare.com/sign-up) on Cloudflare today for free.
14+
15+
<DirectoryListing folder="durable-objects/get-started/video-series" />

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Introduction
4+
sidebar:
5+
order: 2
6+
prev: true
7+
next: true
8+
tableOfContents: false
9+
---
10+
11+
import { Details, DirectoryListing, Stream } from "~/components";
12+
13+
<Stream
14+
videoId="558cdd841276a1aba1426af6293d6d15"
15+
videoTitle="Introduction to Durable Objects"
16+
thumbnailStartTime="2.5s"
17+
/>
18+
19+
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.
20+
21+
Useful links:
22+
23+
- [GitHub code](https://github.com/megaconfidence/veet)
24+
25+
<Details header="Video series" >
26+
27+
<DirectoryListing folder="durable-objects/get-started/video-series" />
28+
29+
</Details>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
pcx_content_type: video
3+
title: Make and Answer WebRTC calls
4+
sidebar:
5+
order: 7
6+
prev: true
7+
next: true
8+
tableOfContents: false
9+
---
10+
11+
import { Details, DirectoryListing, Stream } from "~/components";
12+
13+
<Stream
14+
videoId="3b3a88940d3b1c635dbb6df0516218ab"
15+
videoTitle="Make and Answer WebRTC calls"
16+
thumbnailStartTime="2.5s"
17+
/>
18+
19+
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.
20+
21+
Useful links:
22+
23+
- [GitHub code](https://github.com/megaconfidence/veet)
24+
25+
<Details header="Video series" >
26+
27+
<DirectoryListing folder="durable-objects/get-started/video-series" />
28+
29+
</Details>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
pcx_content_type: video
3+
title: Real-time messaging with WebSockets
4+
sidebar:
5+
order: 5
6+
prev: true
7+
next: true
8+
tableOfContents: false
9+
---
10+
11+
import { Details, DirectoryListing, Stream } from "~/components";
12+
13+
<Stream
14+
videoId="a02e5f9e58999d96c3ec9dbb0efb9707"
15+
videoTitle="Real-time messaging with WebSockets"
16+
thumbnailStartTime="2.5s"
17+
/>
18+
19+
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.
20+
21+
Useful links:
22+
23+
- [GitHub code](https://github.com/megaconfidence/veet)
24+
25+
<Details header="Video series" >
26+
27+
<DirectoryListing folder="durable-objects/get-started/video-series" />
28+
29+
</Details>

0 commit comments

Comments
 (0)