Embedded Video tutorial links (#1628)

* Embed links to tutorial snippets

* more tutorial snippets

* schema clip

* configuring blocks title update

content/docs/contextual-editing/overview.md

@@ -16,3 +16,13 @@ Tina also allows for "Visual Editing" so that editors can see their pages being
 ## Adding contextual-editing to a page
 
 To add visual editing to a page, you'll need to hydrate the pages data. In React, this is done by [using the `useTina`](/docs/contextual-editing/react) hook. We are currently working on adding support for other frameworks such as [vue](/docs/contextual-editing/vue).
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on Visual Editing from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/PcgnJDILv4w?start=1067" title="TinaCMS Deep Dive (Visual Editing)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/editing/blocks.md

@@ -333,5 +333,12 @@ const featureBlock = {
 }
 ```
 
-<!-- TODO: add a gif of a category -->
-<!-- ![block-based-editing-visual](/gif/visual-blocks.gif) -->
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Setting Up Blocks" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/amSRwAbgMR0?start=555&end=727" title="TinaCMS Deep Dive (Configuring Blocks)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/extending-tina/custom-field-components.md

@@ -107,3 +107,13 @@ For example, if you take a look at the color field plugin's definition, it takes
         },
 // ...
 ```
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Customizing Components" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/amSRwAbgMR0?start=744" title="TinaCMS Deep Dive (Customizing Components)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/extending-tina/customize-list-ui.md

@@ -85,3 +85,13 @@ For example:
 
 which will render as:
 ![List UI with label and style prop](https://res.cloudinary.com/forestry-demo/image/upload/v1649941182/tina-io/docs/extending-tina/Extending_Tina_Style_List_Props.png)
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Customizing List Items" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/amSRwAbgMR0?start=545&end=727" title="TinaCMS Deep Dive (List Item Rendering)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/features/data-fetching.md

@@ -64,6 +64,16 @@ When developing locally, it's often beneficial to talk to the content on your lo
 
 > If you setup Tina via `@tinacms/cli init`, or used one of our starters, this should be setup by default. (Read about the CLI [here](/docs/graphql/cli/.)
 
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Data Fetching" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/PcgnJDILv4w?start=402&end=534" title="TinaCMS Deep Dive (Data Fetching)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>
+
 ## Summary
 
 - Tina provides a GraphQL API for querying your git-based content.

content/docs/reference/media/overview.md

@@ -18,7 +18,7 @@ export default defineConfig({
   schema: {
     collections: [
       // Array of collections
-    ]
+    ],
   },
   media: {
     // Media config
@@ -45,3 +45,13 @@ With the built-in repo-based media option, media is stored within the site's rep
 TinaCMS also supports pluggable external media providers.
 
 [Read more about the external media store implementation here](/docs/reference/media/external/authentication)
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on media from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/x0ACBQeNcts?start=388&end=469" title="TinaCMS Deep Dive (Media)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>

content/docs/schema.md

@@ -285,6 +285,16 @@ Each field in a collection can be of the following `type`:
 - [object](/docs/reference/types/object/)
 - [rich-text](/docs/reference/types/rich-text/)
 
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on media from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/PcgnJDILv4w?start=554&end=777" title="TinaCMS Deep Dive (Content Modeling)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>
+
 ## Summary
 
 - Your content is modeled in the `tina/config.{ts,js,tsx}` in your repo using `defineConfig`.

content/docs/tina-cloud.md

@@ -31,3 +31,13 @@ To start moving from local-mode to prod-mode, the next steps are to:
 
 - Push your repository to GitHub (if it isn't already)
 - Set up a project in the Tina Cloud dashboard. (See next page)
+
+## Video Tutorial
+
+For those who prefer to learn from video, you can check out a snippet on "Tina Cloud" from our ["TinaCMS Deep Dive"](https://www.youtube.com/watch?v=PcgnJDILv4w&list=PLPar4H9PHKVqoCwZy79PHr8-W_vA3lAOB&pp=iAQB) series.
+
+<div style="position:relative;padding-top:56.25%;">
+  <iframe width="560" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/r9vzL_8PEW8?start=39" title="TinaCMS Deep Dive (Going To Production)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+  </iframe>
+</div>