docs(tutorial): finishing touches (#32833)

meganesu · web-flow · commit 1706d8fa2f7b · 2021-08-20T13:58:02.000+02:00
diff --git a/docs/docs/tutorial/part-1/index.mdx b/docs/docs/tutorial/part-1/index.mdx
@@ -10,7 +10,7 @@ import { MdArrowForward } from 'react-icons/md'
 
 Now that you've set up your computer with all the tools you'll need, it's time to get started!
 
-Over the course of this Tutorial, you'll build and deploy your first Gatsby site: a blog site with support for images and MDX! (If that doesn't mean anything to you now, that's okay! It will by the time you reach the end.) Here's a [finished example](https://introworkshopexamplesitev3.gatsbyjs.io/) of the site you'll build.
+Over the course of this Tutorial, you'll build and deploy your first Gatsby site: a blog site with support for images and MDX! (If that doesn't mean anything to you now, that's okay! It will by the time you reach the end.) Here's a [finished example](https://gatsbytutorialexample.gatsbyjs.io/) of the site you'll build. You can also follow along with the [GitHub repository for the finished example](https://github.com/gatsbyjs/tutorial-example).
 
 In this part of the Tutorial, you will go through the process of creating the template for your blog site and deploying it online for everyone to see.
 
@@ -316,6 +316,13 @@ First, you write the code for your Gatsby site from your computer. When you're r
 
 </Collapsible>
 
+### Key takeaways
+
+* To create a new Gatsby site from the command line, you can run the `gatsby new` command.
+* To run your site locally, use the `gatsby develop` command. You can view your site in a web browser at `localhost:8000`.
+* Gatsby Cloud is an infrastructure platform specifically optimized for building, deploying, and hosting Gatsby sites.
+    * When you push a new commit to the `main` branch of the GitHub repository for your site, Gatsby Cloud will detect the changes, rebuild a new version of your site, and then redeploy it.
+
 <Announcement style={{marginBottom: "1.5rem"}}>
 
 **Share Your Feedback!**
diff --git a/docs/docs/tutorial/part-2/index.mdx b/docs/docs/tutorial/part-2/index.mdx
@@ -51,7 +51,7 @@ You can also create components from other components. For example, you might dec
 
 **Try it!**
 
-Look back at the [finished example blog site](https://introworkshopexamplesitev3.gatsbyjs.io). How might you break down the pages into components?
+Look back at the [finished example blog site](https://gatsbytutorialexample.gatsbyjs.io/). How might you break down the pages into components?
 
 Not sure where to start? Look for parts of the UI that repeat within a page or across multiple pages.
 
@@ -387,7 +387,7 @@ export default AboutPage
 
 ## Create a reusable layout component
 
-If you take another look at the [finished example blog](https://introworkshopexamplesitev3.gatsbyjs.io), you might notice that there are some repeated parts of the UI across each page, like the site title and the navigation menu.
+If you take another look at the [finished example blog](https://gatsbytutorialexample.gatsbyjs.io/), you might notice that there are some repeated parts of the UI across each page, like the site title and the navigation menu.
 
 You could copy those elements into each page of your site separately. But imagine your site had dozens (or even thousands) of pages. If you wanted to make a change to the structure of your navigation menu, you'd have to go and update every one of those files separately. Yuck.
 
@@ -758,6 +758,12 @@ Luckily, when you use CSS Modules with Gatsby, you can have both! Your kebab-cas
 
 ![A screenshot of the Home page. The styles have been updated so now the page title is in purple, and the navigation links at the top of the page are in a single line instead of a bulleted list.](./index-page-styled.png)
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+
+</Announcement>
+
 ## Summary
 
 Congratulations, you've made it to the end of Part 2! 🥳 (That was a long one!)
diff --git a/docs/docs/tutorial/part-3/index.mdx b/docs/docs/tutorial/part-3/index.mdx
@@ -245,6 +245,12 @@ export default IndexPage
 
 ![The home page of your site, which includes a different picture of a dog.](./index-page-with-static-image-from-filesystem.png)
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+
+</Announcement>
+
 ## Summary
 
 Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory:
diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx
@@ -846,6 +846,12 @@ Good job! You've finished the first step of your new blog page.
 
 You won't be able to render the contents of your posts just yet, since your site doesn't know how to process MDX. You'll fix that in the next part of the Tutorial!
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+
+</Announcement>
+
 ## Summary
 
 Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory:
diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/part-5/index.mdx
@@ -581,6 +581,12 @@ export default BlogPage
 
 Nice work! Your site now has a blog page with actual content.
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+
+</Announcement>
+
 ## Summary
 
 Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory:
diff --git a/docs/docs/tutorial/part-6/index.mdx b/docs/docs/tutorial/part-6/index.mdx
@@ -23,7 +23,7 @@ By the end of this part of the Tutorial, you will be able to:
 
 **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.
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 6.
 
 You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
 
@@ -534,6 +534,13 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering the
 
 Congratulations, you now have a multi-page blog site! Try adding some new `.mdx` files to your top-level `blog` directory. They should get added to your Blog page automatically when your site rebuilds!
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+
+</Announcement>
+
+
 ## Summary
 
 Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory:
diff --git a/docs/docs/tutorial/part-7/folder-structure-with-images.png b/docs/docs/tutorial/part-7/folder-structure-with-images.png
diff --git a/docs/docs/tutorial/part-7/index.mdx b/docs/docs/tutorial/part-7/index.mdx
@@ -16,6 +16,19 @@ By the end of this part of the Tutorial, you will be able to:
 
 - Use the `GatsbyImage` component to create images dynamically from data.
 
+<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 7.
+
+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/NQj3H2Z9vn0?start=229" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</Announcement>
+
+
 ## What's the difference between `GatsbyImage` and `StaticImage`?
 
 Back in [Part 3](/docs/tutorial/part-3/) of the Tutorial, you learned about how to use the `StaticImage` component from `gatsby-plugin-image`.
@@ -55,6 +68,7 @@ The steps below will help you find and download some photos for your hero images
     ![A screenshot of the Unsplash home page](./unsplash.png)
 
 2. When you've found a photo that you like, download it and add it to subdirectory for one of your blog posts. Continue downloading photos until you have a different hero image for each post.
+    ![Diagram of the "blog" folder structure, with the hero image for each post in the subdirectory for that post.](./folder-structure-with-images.png)
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
@@ -344,8 +358,8 @@ Once you have your GraphQL query set up, you can to add it to your blog post pag
         mdx(slug: {eq: $slug}) {
           body
           frontmatter {
-            date(formatString: "MMMM DD, YYYY")
             title
+            date(formatString: "MMMM DD, YYYY")
             hero_image_alt
             hero_image_credit_link
             hero_image_credit_text
@@ -456,9 +470,9 @@ const BlogPost = ({ data }) => {
       {/* highlight-start */}
       <p>
         Photo Credit:{" "}
-        <Link to={data.mdx.frontmatter.hero_image_credit_link}>
+        <a href={data.mdx.frontmatter.hero_image_credit_link}>
           {data.mdx.frontmatter.hero_image_credit_text}
-        </Link>
+        </a>
       </p>
       {/* highlight-end */}
       <MDXRenderer>
@@ -485,6 +499,13 @@ Try removing the `{" "}` and see what happens. The paragraph text should end up
 
 ![A screenshot of the My First Post blog page, which now includes a photo credit underneath the hero image. It says, "Photo Credit: Christopher Ayme".](./blog-post-with-hero-image-credit.png)
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+
+</Announcement>
+
+
 ## Summary
 
 Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory:
