docs(tutorial): add livestream links to parts 2-5, update start time for part 1 (#32434)

meganesu · LekoArts · web-flow · commit 76cb4fd5e189 · 2021-07-20T08:11:33.000+02:00
Co-authored-by: Lennart &lt;lekoarts@gmail.com&gt;
diff --git a/docs/docs/tutorial/part-1/index.mdx b/docs/docs/tutorial/part-1/index.mdx
@@ -60,7 +60,7 @@ If you'd rather follow along with a video, here's a recording of a livestream th
 
 You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/wr8rbaHUM6Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/wr8rbaHUM6Q?start=470" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 </Announcement>
 
diff --git a/docs/docs/tutorial/part-2/index.mdx b/docs/docs/tutorial/part-2/index.mdx
@@ -42,6 +42,18 @@ By the end of this part of the Tutorial, you will be able to:
 * Use component **props** to change the way a component renders.
 * Use the **`children`** prop to create a wrapper component.
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Prefer a video?**
+
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 2.
+
+You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/wXRrlEitw94?start=279" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</Announcement>
+
 ## A quick intro to React
 
 ### What is React?
diff --git a/docs/docs/tutorial/part-3/index.mdx b/docs/docs/tutorial/part-3/index.mdx
@@ -41,6 +41,18 @@ By the end of this part of the Tutorial, you will be able to:
 * Add a plugin to your Gatsby site.
 * Configure your plugins in your `gatsby-config.js` file.
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Prefer a video?**
+
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 3.
+
+You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/C8YxdGGjvOg?start=228" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</Announcement>
+
 ## What is a plugin?
 
 In Gatsby terms, a **plugin** is a separate npm package that you install to add extra features to your site.
diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx
@@ -53,6 +53,18 @@ By the end of this part of the Tutorial, you will be able to:
 - Use the **`gatsby-source-filesystem`** plugin to pull data into your site from your computer's filesystem.
 - Create a **page query** to pull data into a page component.
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Prefer a video?**
+
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 4.
+
+You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/RnaM4Rt05vY?start=244" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</Announcement>
+
 ## Meet Gatsby's GraphQL data layer
 
 Gatsby has its own [GraphQL](https://graphql.org/) data layer where it keeps all the data for your site. But how does it work under the hood?
diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/part-5/index.mdx
@@ -50,6 +50,18 @@ By the end of this part of the Tutorial, you will be able to:
 - Use the `gatsby-plugin-mdx` plugin to render the contents of your MDX files on your Blog page.
 - Use the `sort` field to control the order of results in your GraphQL queries.
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Prefer a video?**
+
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 5.
+
+You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/k9n9HnRG3Ys?start=554" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</Announcement>
+
 ## A closer look at Gatsby's GraphQL data layer
 
 To understand how `gatsby-plugin-mdx` and other transformer plugins work, you need to know a bit more about how Gatsby’s GraphQL data layer works.
