feat: Adds videos for real-time communication tutorial and Get starte…

…d with Mini. (#165) * feat: Adds videos for real-time communication tutorial and Get started with Mini. * fix: Linter fix * fix: Line breaks. * fix: Lints * fix: Adds headlines.
serverpod · Sep 26, 2024 · 5bede7a · 5bede7a
1 parent ffb237a
commit 5bede7a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/docs/02-get-started-with-mini.md b/docs/02-get-started-with-mini.md
@@ -2,6 +2,9 @@
 
 Serverpod Mini is a slimmer version of Serverpod that does not need to be connected to a Postgres database. Before you begin, make sure that you have __[Flutter](https://flutter.dev/docs/get-started/install)__ and __[Serverpod](/)__ installed.
 
+<div style={{ position : 'relative', paddingBottom : '56.25%', height : '0' }}><iframe style={{ position : 'absolute', top : '0', left : '0', width : '100%', height : '100%' }} width="560" height="315" src="https://www.youtube-nocookie.com/embed/dSBK4JOZRyI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+## Create a new project
 Create a mini project by running:
 
 ```bash

diff --git a/docs/05-tutorials/02-real-time-communication.md b/docs/05-tutorials/02-real-time-communication.md
@@ -2,6 +2,10 @@
 
 Have you ever found real-time communication in apps challenging? It doesn't have to be. Today, we're diving into how to build a collaborative drawing experience using Flutter and Serverpod. We'll call our app Pixorama - a fun and interactive project inspired by Reddit's r/place. Pixorama lets users draw together on a shared grid, with every pixel placed updating in real-time across all connected devices.
 
+<div style={{ position : 'relative', paddingBottom : '56.25%', height : '0' }}><iframe style={{ position : 'absolute', top : '0', left : '0', width : '100%', height : '100%' }} width="560" height="315" src="https://www.youtube-nocookie.com/embed/iCDeAvuMj8I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+_This tutorial is also available as a video._
+
 :::info
 
 Before you begin, make sure that you have [installed Serverpod](/). It's also recommended that you read the [Get started with Mini](../get-started-with-mini) guide.

diff --git a/versioned_docs/version-2.1.0/02-get-started-with-mini.md b/versioned_docs/version-2.1.0/02-get-started-with-mini.md
@@ -2,6 +2,9 @@
 
 Serverpod Mini is a slimmer version of Serverpod that does not need to be connected to a Postgres database. Before you begin, make sure that you have __[Flutter](https://flutter.dev/docs/get-started/install)__ and __[Serverpod](/)__ installed.
 
+<div style={{ position : 'relative', paddingBottom : '56.25%', height : '0' }}><iframe style={{ position : 'absolute', top : '0', left : '0', width : '100%', height : '100%' }} width="560" height="315" src="https://www.youtube-nocookie.com/embed/dSBK4JOZRyI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+## Create a new project
 Create a mini project by running:
 
 ```bash

diff --git a/versioned_docs/version-2.1.0/05-tutorials/02-real-time-communication.md b/versioned_docs/version-2.1.0/05-tutorials/02-real-time-communication.md
@@ -2,6 +2,10 @@
 
 Have you ever found real-time communication in apps challenging? It doesn't have to be. Today, we're diving into how to build a collaborative drawing experience using Flutter and Serverpod. We'll call our app Pixorama - a fun and interactive project inspired by Reddit's r/place. Pixorama lets users draw together on a shared grid, with every pixel placed updating in real-time across all connected devices.
 
+<div style={{ position : 'relative', paddingBottom : '56.25%', height : '0' }}><iframe style={{ position : 'absolute', top : '0', left : '0', width : '100%', height : '100%' }} width="560" height="315" src="https://www.youtube-nocookie.com/embed/iCDeAvuMj8I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+_This tutorial is also available as a video._
+
 :::info
 
 Before you begin, make sure that you have [installed Serverpod](/). It's also recommended that you read the [Get started with Mini](../get-started-with-mini) guide.