.jestSetup.js

@@ -1,5 +1,2 @@
 process.env.GATSBY_RECIPES_NO_COLOR = "true"
 process.env.GATSBY_SHOULD_TRACK_IMAGE_CDN_URLS = "true"
-
-// Potrace has a dependency on giwrap which has a process.nextTick as a sideEffect which messes up with jest.
-jest.mock(`gifwrap`, () => jest.fn())

docs/docs/glossary/mdx.md

@@ -38,7 +38,7 @@ export const Figure = props => {
 Now you can import this component into your Markdown document.
 
 ```markdown
-import { Figure } from './components/Figure';
+import { Figure } from "./components/Figure"
 
 # Hello world!
 

docs/docs/glossary/server-side-rendering.md

@@ -44,6 +44,6 @@ Instead of purely server-side rendering, Gatsby uses the same APIs to create sta
 
 - [Why server-side render?](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/#why-server-side-render) from _Behind the Scenes: What makes Gatsby Great_
 
-- [Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby](/tutorial/seo-and-social-sharing-cards-tutorial/#reach-skip-nav)
+- [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/)
 
 - [What is a Static Site Generator?](/docs/glossary/static-site-generator/#what-is-a-static-site-generator) from the Gatsby docs

docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md

@@ -233,11 +233,21 @@ module.exports = {
 
 ## Using images from a CMS or CDN
 
-Many source plugins have native support for `gatsby-plugin-image`, with images served directly from a content delivery network (CDN). This means that builds are faster, because there is no need to download images and process them locally. The query syntax varies according to the plugin, as do the supported transformation features and image formats. Make sure you update to the latest version of the source plugin to ensure there is support. For plugins that are not in this list you can use [dynamic images from `gatsby-transformer-sharp`](#dynamic-images).
+### Gatsby Cloud Image CDN
 
-### Source plugins
+Image CDN is Gatsby Clouds image hosting and transformation service. It speeds up your build times by deferring image downloading and processing until the first user requests an image. Image CDN also speeds up your frontend performance by serving CDN hosted images on the same domain as your Gatsby Cloud site. In our testing this can shave up to 300ms off of frontend page load times and as a result improve your lighthouse scores.
 
-These source plugins support using `gatsby-plugin-image` with images served from their CDN.
+For more information on what Image CDN is, how to use it, and what the platform limits are, visit the [Gatsby Cloud knowledge base article on "What Is Image CDN?"](https://support.gatsbyjs.com/hc/en-us/articles/4426379634835-What-is-Image-CDN-). To learn which source plugins currently support it and how to enable and use Image CDN on Gatsby Cloud take a look at the ["How-to Enable Image CDN" article](https://support.gatsbyjs.com/hc/en-us/articles/4426393233171).
+
+For all supported source plugins, the query syntax and feature-set is identical. Check your source plugin's documentation or the [Gatsby Cloud knowledge base article on "Configuring source plugins for Image CDN"](https://support.gatsbyjs.com/hc/en-us/articles/4522338898579-Configuring-Source-Plugins-for-Image-CDN) for more info.
+
+### Source plugins with their own CDN
+
+Many source plugins have native support for `gatsby-plugin-image`, with images served directly from that CMS's content delivery network (CDN). This means that builds are faster than local images because there is no need to download images and process them. While this is faster for builds, it isn't as performant on the frontend as [Gatsby Cloud's Image CDN](#gatsby-cloud-image-cdn) due to images being served from a different domain than the domain your site is hosted on.
+
+The query syntax varies according to the plugin, as do the supported transformation features and image formats. Make sure you update to the latest version of the source plugin to ensure there is support. For plugins that are not in this list you can use [dynamic images from `gatsby-transformer-sharp`](#dynamic-images).
+
+These source plugins support using `gatsby-plugin-image` with images served from their own CDN.
 
 - [AgilityCMS](https://github.com/agility/gatsby-image-agilitycms)
 - [Contentful](/plugins/gatsby-source-contentful/#using-the-new-gatsby-image-plugin)
@@ -247,12 +257,6 @@ These source plugins support using `gatsby-plugin-image` with images served from
 - [Sanity](/plugins/gatsby-source-sanity/#using-images)
 - [Shopify](https://github.com/gatsbyjs/gatsby-source-shopify-experimental#images)
 
-### Image CDNs
-
-A dedicated image CDN can be used with sources that don't have their own CDN, or where you need more transforms or formats than the CDN offers.
-
-- [imgix](/plugins/@imgix/gatsby/)
-
 ### Plugin authors
 
 If you maintain a source plugin or image CDN, there is a toolkit to help you add support for `gatsby-plugin-image`. See [Adding Gatsby Image support to your plugin](/docs/how-to/plugins-and-themes/adding-gatsby-image-support/) for more details. You can then open a PR to add your plugin to this list.

docs/docs/how-to/local-development/graphql-typegen.md

@@ -9,7 +9,7 @@ examples:
 
 If you're already using [Gatsby with TypeScript](/docs/how-to/custom-configuration/typescript) and manually typing the results of your queries, you'll learn in this guide how Gatsby's automatic GraphQL Typegen feature can make your life easier. By relying on the types that are generated by Gatsby itself and using autocompletion for GraphQL queries in your IDE you'll be able to write GraphQL queries quicker and safer.
 
-This feature was added in `gatsby@4.15.0`.
+This feature was added in `gatsby@4.15.0`. By default, this feature is only generating files during `gatsby develop`.
 
 ## Prerequisites
 
@@ -105,6 +105,54 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
 
 Read the [Customizing the GraphQL schema guide](/docs/reference/graphql-data-layer/schema-customization/) to learn how to explicitly define types in your site or source plugin.
 
+### GraphQL fragments
+
+Fragments allow you to reuse parts of GraphQL queries throughout your site and collocate specific parts of a query to individual files. Learn more about it in the [Using GraphQL fragments guide](/docs/reference/graphql-data-layer/using-graphql-fragments/).
+
+In the context of GraphQL Typegen fragments enable you to have individual TypeScript types for nested parts of your queries since each fragment will be its own TypeScript type. You then can use these types to e.g. type arguments of components consuming the GraphQL data.
+
+Here's an example (also used in [using-graphql-typegen](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-graphql-typegen)) with a `Info` component that gets the `buildTime` as an argument. This `Info` component and its `SiteInformation` fragment is used in the `src/pages/index.tsx` file then:
+
+```tsx:title=src/components/info.tsx
+import * as React from "react"
+import { graphql } from "gatsby"
+
+// highlight-next-line
+const Info = ({ buildTime }: { buildTime?: any }) => {
+  return (
+    <p>
+      Build time: {buildTime}
+    </p>
+  )
+}
+
+export default Info
+
+// highlight-start
+export const query = graphql`
+  fragment SiteInformation on Site {
+    buildTime
+  }
+`
+// highlight-end
+```
+
+```graphql:title=src/pages/index.tsx
+# Rest of the page above...
+
+query IndexPage {
+  site {
+    ...SiteInformation
+  }
+}
+```
+
+This way a `SiteInformationFragment` TypeScript type will be created that you can use in the `Info` component:
+
+```tsx:title=src/components/info.tsx
+const Info = ({ buildTime }: { buildTime?: Queries.SiteInformationFragment["buildTime"] }) => {}
+```
+
 ### Tips
 
 - When adding a new key to your GraphQL query you'll need to save the file before new TypeScript types are generated. The autogenerated files are only updated on file saves.

docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md

@@ -48,12 +48,12 @@ Any JavaScript data type can be passed in as an option.
 
 The following table lists possible options values and an example plugin that makes use of them.
 
-| Data Type | Sample Value                     | Example Plugin                                                   |
-| --------- | -------------------------------- | ---------------------------------------------------------------- |
-| Boolean   | `true`                           | [`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp/)           |
-| String    | `/src/data/`                     | [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) |
-| Array     | `["/about-us/", "/projects/*"]`  | [`gatsby-plugin-offline`](/plugins/gatsby-plugin-offline/)       |
-| Object    | `{ default: "./src/layout.js" }` | [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/)               |
+| Data Type | Sample Value                    | Example Plugin                                                   |
+| --------- | ------------------------------- | ---------------------------------------------------------------- |
+| Boolean   | `true`                          | [`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp/)           |
+| String    | `/src/data/`                    | [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) |
+| Array     | `["/about-us/", "/projects/*"]` | [`gatsby-plugin-offline`](/plugins/gatsby-plugin-offline/)       |
+| Object    | `{ mdxOptions: {} }`            | [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/)               |
 
 **Note**: Themes (which are a type of plugin) are able to receive options from a site's `gatsby-config.js` to be used in its `gatsby-config.js` in order to allow themes to be composed together. This is done by exporting the `gatsby-config.js` as a function instead of an object. You can see an example of this in the [`gatsby-theme-blog`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog) and [`gatsby-theme-blog-core`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core) repositories. Plugins are not capable of this functionality.
 

docs/docs/how-to/plugins-and-themes/using-a-plugin-in-your-site.md

@@ -34,7 +34,7 @@ Add the plugin as a project dependency in your `package.json` file by running th
 npm install gatsby-plugin-sitemap
 ```
 
-Check the plugin's README file to see if there are any other dependencies that you also need to install. (For example, [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/) also requires `@mdx-js/mdx` and `@mdx-js/react` to be installed.)
+Check the plugin's README file to see if there are any other dependencies that you also need to install. (For example, [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/) also requires `@mdx-js/react` to be installed.)
 
 ### Step 2: Configure the plugin in your `gatsby-config.js` file
 

docs/docs/how-to/querying-data/page-query.md

@@ -153,7 +153,7 @@ Consider the following query:
 
 ```js:title=src/templates/blog-post.js
 export const query = graphql`
-  query MdxBlogPost {
+  query {
     mdx(title: { eq: "Using a Theme" }) {
       id
       title
@@ -168,7 +168,7 @@ In addition to hardcoding an argument directly into the page query, you can pass
 
 ```js:title=src/templates/blog-post.js
 export const query = graphql`
-  query MdxBlogPost($title: String) { // highlight-line
+  query ($title: String) { // highlight-line
     mdx(title: {eq: $title}) { // highlight-line
       id
       title

docs/docs/how-to/routing/customizing-components.md

@@ -6,7 +6,7 @@ Using MDX, you can replace every HTML element that Markdown renders with a
 custom implementation. This allows you to use a set of design system components
 when rendering.
 
-```jsx:title=src/components/layout.js
+```jsx:title=src/components/layout.jsx
 import { MDXProvider } from "@mdx-js/react"
 import * as DesignSystem from "your-design-system"
 
@@ -28,7 +28,7 @@ export default function Layout({ children }) {
 }
 ```
 
-**Note**: you can also provide your own custom components to the `MDXProvider` that make them globally available while writing MDX. You can find more details about this pattern in the [Importing and Using Components in MDX guide](/docs/mdx/importing-and-using-components#make-components-available-globally-as-shortcodes).
+**Note**: You can also provide your own custom components to the `MDXProvider` that make them globally available while writing MDX. You can find more details about this pattern in the [Importing and Using Components in MDX guide](/docs/how-to/routing/mdx#make-components-available-globally-as-shortcodes).
 
 The following components can be customized with the MDXProvider:
 
@@ -68,10 +68,10 @@ The following components can be customized with the MDXProvider:
 
 ## How does this work?
 
-Components passed to the MDXProvider are used to render the HTML elements
-that Markdown creates. It uses
-[React's Context API](https://reactjs.org/docs/context.html).
+Components passed to the MDXProvider are used to render the HTML elements that Markdown creates. It uses [React's Context API](https://reactjs.org/docs/context.html).
 
 ## Related
 
 - [MDX components](https://mdxjs.com/getting-started/)
+- [Adding Components to Markdown with MDX](/docs/how-to/routing/mdx/)
+- [gatsby-plugin-mdx README](/plugins/gatsby-plugin-mdx)

docs/docs/how-to/routing/migrate-remark-to-mdx.md

@@ -13,7 +13,7 @@ For people who already have an existing blog using `gatsby-transformer-remark` b
 Add the `gatsby-plugin-mdx` plugin (and its peer dependencies) to your `package.json` file and remove the `gatsby-transformer-remark` plugin.
 
 ```shell
-npm install @mdx-js/mdx@v1 @mdx-js/react@v1 gatsby-plugin-mdx
+npm install @mdx-js/react gatsby-plugin-mdx
 npm remove gatsby-transformer-remark
 ```
 
@@ -49,7 +49,7 @@ Now with this addition, `gatsby-plugin-mdx` will see files that end with both `.
 
 ## Update gatsby-node.js
 
-In the `createPages` API call, when you query for `allMarkdownRemark`, replace it with `allMdx`.
+In the `createPages` API call, when you query for `allMarkdownRemark`, replace it with `allMdx` and also query for `internal.contentFilePath`.
 
 ```diff:title=gatsby-node.js
 const result = await graphql(
@@ -60,6 +60,17 @@ const result = await graphql(
         sort: { fields: [frontmatter___date], order: DESC }
         limit: 1000
       ) {
+        nodes {
+          id
+          fields {
+            slug
+          }
++         internal {
++           contentFilePath
++         }
+        }
+      }
+    }
 ```
 
 Don't forget to update the `posts` constant by replacing `allMarkdownRemark` with `allMdx`.
@@ -69,6 +80,16 @@ Don't forget to update the `posts` constant by replacing `allMarkdownRemark` wit
 +const posts = result.data.allMdx.nodes
 ```
 
+You'll need to update the `component` path passed to the `createPage` action to include the `internal.contentFilePath` as a query param:
+
+```diff:title=gatsby-node.js
+createPage({
+  path: post.fields.slug,
+- component: blogPost,
++ component: `${blogPost}?__contentFilePath=${post.internal.contentFilePath}`,
+  context: {
+```
+
 Also, update `onCreateNode` which creates the blog post slugs to watch for the node type of `Mdx` instead of `MarkdownRemark`.
 
 ```diff:title=gatsby-node.js
@@ -81,36 +102,32 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
 
 ## Update usage in pages
 
-Similar to `gatsby-node.js`, wherever you use `allMarkdownRemark` in a GraphQL query, change it to `allMdx`.
+Similar to `gatsby-node.js`, wherever you use `allMarkdownRemark`/`markdownRemark` in a GraphQL query, change it to `allMdx`/`mdx`.
 
-Then in your blogpost template, to render the MDX, pull in the `MDXRenderer` React component from `gatsby-plugin-mdx`.
+Then in your blogpost template, to render the MDX, add a `children` prop to your page template.
 
-```jsx:title=src/templates/blog-post.js
-import { MDXRenderer } from "gatsby-plugin-mdx"
+```diff:title=src/templates/blog-post.js
+-const BlogPostTemplate = ({ data, location }) => {
++const BlogPostTemplate = ({ data, location, children }) => {
 ```
 
-And in the GraphQL query, change the `html` field in `mdx` to `body`.
+And in the GraphQL query, remove the `html` field.
 
 ```graphql:title=src/templates/blog-post.js
-mdx(fields: { slug: { eq: $slug } }) {
+mdx(id: { eq: $id }) {
   id
   excerpt(pruneLength: 160)
-  body // highlight-line
   frontmatter {
-    ...
+    # ...
   }
 }
 ```
 
-And finally swap out the component with `dangerouslySetInnerHTML` to a `MDXRenderer` component:
+And finally swap out the component with `dangerouslySetInnerHTML` to just render the `children`:
 
 ```diff:title=src/templates/blog-post.js
-const post = data.mdx
-
-// ...
-
--<section dangerouslySetInnerHTML={{ __html: post.html }} />
-+<MDXRenderer>{post.body}</MDXRenderer>
+-<section dangerouslySetInnerHTML={{ __html: post.html }} itemProp="articleBody" />
++<section itemProp="articleBody">{children}</section>
 ```
 
 ## Update Markdown files that include HTML code
@@ -126,5 +143,5 @@ For instance, any HTML component with the `class` attribute needs to be changed
 
 ## Additional resources
 
-- Follow [Importing and Using Components in MDX](/docs/mdx/importing-and-using-components/) to find out how you can insert React components in your MDX files.
-- Follow [Using MDX Plugins](/docs/how-to/routing/mdx-plugins/) on how to add and use Gatsby Remark or Remark plugins to your MDX site.
+- [Adding MDX pages](/docs/how-to/routing/mdx)
+- [gatsby-plugin-mdx README](/plugins/gatsby-plugin-mdx)

docs/docs/how-to/sourcing-data/headless-cms.md

@@ -51,7 +51,8 @@ The following CMSs have high popularity among Gatsby users and support key funct
 | [Forestry](https://forestry.io/)          | [guide](/docs/sourcing-from-forestry/)                                      |                                                     |                                                             |
 | [Gentics Mesh](https://getmesh.io)        | [guide](/docs/sourcing-from-gentics-mesh)                                   |                                                     |                                                             |
 | [Builder.io](https://www.builder.io/)     | [guide](/docs/sourcing-from-builder-io/)                                    | [docs](/plugins/@builder.io/gatsby/)                |                                                             |
-| [Flotiq](https://flotiq.com/)             | [guide](/docs/sourcing-from-flotiq/)                                        | [docs](/plugins/gatsby-source-flotiq)               |                                                             |
+| [Flotiq](https://flotiq.com/)             | [guide](/docs/sourcing-from-flotiq/)                                        | [docs](/plugins/gatsby-source-flotiq)               |
+| [Webiny](https://www.webiny.com/)         | [guide](https://www.webiny.com/docs/headless-cms/integrations/gatsby)       |                                                     | [starter](/starters/webiny/gatsby-starter-webiny/)          |
 
 ## Integrating with other CMSs
 

docs/docs/reference/built-in-components/gatsby-head.md

@@ -88,7 +88,6 @@ You'll need to be aware of these things when using Gatsby Head:
 - The `Head` function needs to return valid JSX.
 - Valid tags inside the `Head` function are: `link`, `meta`, `style`, `title`, `base`, `script`, and `noscript`.
 - Data block `<script>` tags such as `<script type="application/ld+json">` can go in the `Head` function, but dynamic scripts are better loaded with the [Gatsby Script Component](/docs/reference/built-in-components/gatsby-script/) in your pages or components.
-- Using the Head API and [react-helmet](https://github.com/nfl/react-helmet) in the same page is not supported as it can generate unexpected results.
 
 ## Properties
 

docs/docs/reference/config-files/gatsby-config.md

@@ -204,7 +204,11 @@ module.exports = {
 
 ### typesOutputPath
 
-You can specifiy the path of the generated TypeScript types file relative to the site root. Default: `src/gatsby-types.d.ts`.
+You can specify the path of the generated TypeScript types file relative to the site root. Default: `src/gatsby-types.d.ts`.
+
+### generateOnBuild
+
+By default, `graphqlTypegen` is only run during `gatsby develop`. Set this option to `true` to create the `src/gatsby-types.d.ts` file also during `gatsby build`. Default: `false`.
 
 ## polyfill
 

docs/docs/reference/markdown-syntax.md

@@ -205,5 +205,5 @@ The chart is rendered inside our MDX document.
 
 ## Helpful resources
 
-- https://daringfireball.net/projects/markdown/syntax
-- https://www.markdownguide.org/basic-syntax
+- [Markdown Syntax](https://daringfireball.net/projects/markdown/syntax)
+- [Basic Syntax](https://www.markdownguide.org/basic-syntax)

docs/docs/reference/release-notes/v4.21/index.md

@@ -0,0 +1,145 @@
+---
+date: "2022-08-16"
+version: "4.21.0"
+title: "v4.21 Release Notes"
+---
+
+Welcome to `gatsby@4.21.0` release (August 2022 #2)
+
+Key highlights of this release:
+
+- [`gatsby-plugin-mdx` v4](#gatsby-plugin-mdx-v4)
+- [Open RFCs](#open-rfcs)
+
+Also check out [notable bugfixes](#notable-bugfixes--improvements).
+
+**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know if you have any [issues](https://github.com/gatsbyjs/gatsby/issues).
+
+[Previous release notes](/docs/reference/release-notes/v4.20)
+
+[Full changelog][full-changelog]
+
+---
+
+## `gatsby-plugin-mdx` v4
+
+We're excited to announce [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx) v4! 🎉 With the help of our contractor [axe312ger](https://github.com/axe312ger) we have rewritten the plugin from scratch to give you these new features:
+
+- Full compatibility with [MDX 2](https://mdxjs.com/blog/v2/)
+- Per-file tree shaking and chunking (No more `app.js` bundle bloat or global scope problems)
+- Simplified usage in pages
+- Simplified plugin options
+- You can configure the underyling [`@mdx-js/mdx` compile](https://mdxjs.com/packages/mdx/#compilefile-options), e.g. to add `remark` or `rehype` plugins
+
+Over the last couple of months we've been hard at work building a new version of `gatsby-plugin-mdx`. The PRs [#35650](https://github.com/gatsbyjs/gatsby/pull/35650) and [#35893](https://github.com/gatsbyjs/gatsby/pull/35893) are the culmination of these efforts.
+
+It also can't be overstated that the complete rewrite from scratch allowed us to set up the plugin for easier maintenance in the future. While this isn't a particular exciting user-facing feature, from a maintainer's perspective this will be a huge benefit for any future upgrades we (or you, [the community](https://www.gatsbyjs.com/contributing)) want to make to `gatsby-plugin-mdx`.
+
+`gatsby-plugin-mdx` v4 is ready for primetime and you can start using it now.
+
+### Getting started
+
+There are multiple ways on how you can get started with `gatsby-plugin-mdx` v4:
+
+- Initialize a new project with `npm init gatsby` and choose the **"Add Markdown and MDX support"** option
+- Follow the [Adding MDX pages](/docs/how-to/routing/mdx/) guide
+- Follow our [beginner friendly tutorial](/docs/tutorial/) to learn how to create a blog with MDX
+- Try out the [using-mdx example](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mdx)
+- Fork this [CodeSandbox](https://codesandbox.io/s/github/gatsbyjs/gatsby/tree/master/examples/using-mdx)
+
+The updated [`gatsby-plugin-mdx` README](/plugins/gatsby-plugin-mdx/) contains detailed instructions on any new options and APIs.
+
+### Migrating from v3 to v4
+
+If you're already using `gatsby-plugin-mdx` v3 and want to migrate, you can follow the [extensive migration guide](/plugins/gatsby-plugin-mdx#migrating-from-v3-to-v4) to benefit from all new features.
+
+We did our best to strike a balance between introducing meaningful breaking changes and keeping old behaviors. For example, while a lot of people use GraphQL nodes like `timeToRead` or `wordCount`, over the years it has become increasingly hard to fulfill every feature request and behavior that users wanted (e.g. correctly providing `timeToRead`/`wordCount` for every language is hard). One the one hand removing default fields like these means that you have to reimplement them on your own, but on the other hand this also means that you can more granularly customize them to your needs. Read [Extending the GraphQL MDX nodes](/plugins/gatsby-plugin-mdx#extending-the-graphql-mdx-nodes) for guidance on how to migrate.
+
+If you have any questions along the way, post them either into the [umbrella discussion](https://github.com/gatsbyjs/gatsby/discussions/25068) or into the [`mdx-v2` channel on Discord](https://gatsby.dev/discord).
+
+The [using-mdx example](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mdx) also showcases some of the necessary migration steps.
+
+## Open RFCs
+
+### Slices API
+
+We are adding a new API that we are calling “Slices”. By using a new `<Slice />` React component in combination with a `src/slices` directory or `createSlice` API for common UI features, Gatsby will be able to build and deploy individual pieces of your site that had content changes, not entire pages.
+
+To create a slice, simply:
+
+1. Create the slice by adding a `slices/footer.js` file, or using the `createPages` API action:
+
+   ```js
+   actions.createSlice({
+     id: `footer`,
+     component: require.resolve(`./src/components/footer.js`),
+   })
+   ```
+
+2. Add a `<Slice />` component on your site, providing an `alias` string prop, where `alias` is either name of the file (in our case, `footer`). Any additional props passed will be handed down to the underlying component.
+
+   ```jsx
+   return (
+     <>
+       <Header className="my-header" />
+       {children}
+       <Slice alias="footer" />
+     </>
+   )
+   ```
+
+To read more, head over to [RFC: Slices API](https://github.com/gatsbyjs/gatsby/discussions/36339). We appreciate any feedback there.
+
+### Changes in `sort` and aggregation fields in Gatsby GraphQL Schema
+
+We are proposing Breaking Changes for the next major version of Gatsby to our GraphQL API. The goal of this change is increasing performance and reducing resource usage of builds. Proposed changes impact `sort` and aggregation fields (`group`, `min`, `max`, `sum`, `distinct`).
+
+Basic example of proposed change:
+
+Current:
+
+```graphql
+{
+  allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    nodes {
+      ...fields
+    }
+  }
+}
+```
+
+Proposed:
+
+```jsx
+{
+  allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
+    nodes {
+      ...fields
+    }
+  }
+}
+```
+
+To read more, head over to [RFC: Change to sort and aggregation fields API](https://github.com/gatsbyjs/gatsby/discussions/36242). We appreciate any feedback there.
+
+## Notable bugfixes & improvements
+
+- `gatsby-plugin-sharp`: `sharp` was updated to `0.30.7` (also in all other related packages). This deprecates the `failOnError` option as it's being replaced by the `failOn` option, via [PR #35539](https://github.com/gatsbyjs/gatsby/pull/35539)
+- `gatsby`:
+  - Fix `e.remove()` is not a function error when using Gatsby Head API, via [PR #36338](https://github.com/gatsbyjs/gatsby/pull/36338)
+  - Make inline scripts run in develop, via [PR #36372](https://github.com/gatsbyjs/gatsby/pull/36372)
+  - Make runtime error overlay work in non-v8 browsers, via [PR #36365](https://github.com/gatsbyjs/gatsby/pull/36365)
+- `gatsby-source-contentful`: Correctly overwrite field type on Assets, via [PR #36337](https://github.com/gatsbyjs/gatsby/pull/36337)
+- `gatsby-plugin-react-helment`: Stop appending empty title tags, via [PR #36303](https://github.com/gatsbyjs/gatsby/pull/36303)
+- `gatsby-link`: Correctly export default for CommonJS, via [PR #36312](https://github.com/gatsbyjs/gatsby/pull/36312)
+
+## Contributors
+
+A big **Thank You** to [our community who contributed][full-changelog] to this release 💜
+
+- [Bi11](https://github.com/Bi11): fix(gatsby-plugin-image): Add `outputPixelDensities` to `SHARP_ATTRIBUTES` [PR #36203](https://github.com/gatsbyjs/gatsby/pull/36203)
+- [Kornil](https://github.com/Kornil): chore(gatsby): convert babel-loader-helpers to typescript [PR #36237](https://github.com/gatsbyjs/gatsby/pull/36237)
+- [Auspicus](https://github.com/Auspicus): chore(docs): Pre-encoded unicode characters can't be used in paths [PR #36325](https://github.com/gatsbyjs/gatsby/pull/36325)
+- [axe312ger](https://github.com/axe312ger): BREAKING CHANGE(gatsby-plugin-mdx): MDX v2 [PR #35650](https://github.com/gatsbyjs/gatsby/pull/35650)
+
+[full-changelog]: https://github.com/gatsbyjs/gatsby/compare/gatsby@4.21.0-next.0...gatsby@4.21.0

docs/docs/sourcing-from-forestry.md

@@ -158,7 +158,7 @@ window pops up (check for blocked pop-ups if you don't see it), and try creating
 new blog post. Once you've done that, you'll find a new `content/posts` directory in your GitHub repo
 containing a Markdown file with your blog post content!
 
-Now you can do whatever you want to with the CMS content. Here is the guide for creating pages from Markdown files in Gatsby: [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/). The docs also have a guide for doing this with MDX if you need to use JSX in your CMS content: [Writing Pages in MDX](/docs/how-to/routing/mdx/writing-pages/).
+Now you can do whatever you want to with the CMS content. Here is the guide for creating pages from Markdown files in Gatsby: [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/). The docs also have a guide for doing this with MDX if you need to use JSX in your CMS content: [Writing Pages in MDX](/docs/how-to/routing/mdx/).
 
 Both these guides explain the `gatsby-source-filesystem` plugin that Gatsby uses to locate markdown files.
 

docs/docs/tutorial/part-0/index.mdx

@@ -55,7 +55,7 @@ The rest of this part of the Tutorial walks you through how to install the follo
 
 * [Node.js](#nodejs) (v14.15 or newer)
 * [Git](#git)
-* [Gatsby command line interface (CLI)](#gatsby-cli) (v3 or newer)
+* [Gatsby command line interface (CLI)](#gatsby-cli) (v4 or newer)
 * [Visual Studio Code](#visual-studio-code)
 
 ### Node.js

docs/docs/tutorial/part-1/index.mdx

@@ -36,7 +36,7 @@ First, you write the code for your Gatsby site from your computer. When you're r
 
 If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 1.
 
-You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+Don't want to miss any future livestreams? Follow our [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
 
 <iframe
   width="560"

docs/docs/tutorial/part-2/index.mdx

@@ -15,6 +15,7 @@ To build out the basic page structure for your blog site, you'll need to know ab
 By the end of this part of the Tutorial, you will be able to:
 
 * Create **page components** to add new pages to your site.
+* Add a title to your site using the **Gatsby Head API**
 * Import and use a **pre-built component** from another package.
 * Create your own **reusable "building block" component**.
 * Use component **props** to change the way a component renders.
@@ -24,9 +25,9 @@ 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 2.
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 2. **Please note:** At the time of recording the Gatsby Head API didn't exist yet and thus the video contents and text contents are different. Please always follow the written instructions. We'll do our best to record a new version in the future, thanks for understanding!
 
-You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+Don't want to miss any future livestreams? Follow our [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>
 
@@ -183,13 +184,15 @@ import * as React from 'react'
 const IndexPage = () => {
   return (
     <main>
-      <title>Home Page</title>
       <h1>Welcome to my Gatsby site!</h1>
       <p>I'm making this by following the Gatsby Tutorial.</p>
     </main>
   )
 }
 
+// You'll learn about this in the next task, just copy it for now
+export const Head = () => <title>Home Page</title>
+
 // Step 3: Export your component
 export default IndexPage
 ```
@@ -222,7 +225,6 @@ import * as React from 'react'
 const AboutPage = () => {
   return (
     <main>
-      <title>About Me</title>
       <h1>About Me</h1>
       <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
     </main>
@@ -233,9 +235,52 @@ const AboutPage = () => {
 export default AboutPage
 ```
 
-2. In a web browser, visit `localhost:8000/about`. When your development server finishes rebuilding your site, the About page should look something like this:
+2. Add a page title to your page. Gatsby lets you define a `<title>` and other [document metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) with the [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/). You have to export a component called `Head` from your page template to apply the metadata.
+Adding such metadata helps search engines like Google to better understand your site. For this tutorial you'll only be adding titles to pages but you can also later add other metadata.
+
+```js:title=src/pages/about.js
+import * as React from 'react'
+
+const AboutPage = () => {
+  return (
+    <main>
+      <h1>About Me</h1>
+      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
+    </main>
+  )
+}
 
-![A screenshot of "localhost:8000/about" in a web browser. It has a heading that says, "About Me", and a paragraph that says, "Hi there! I'm the proud creator of this site, which I built with Gatsby."](./about-page.png)
+// highlight-next-line
+export const Head = () => <title>About Me</title>
+
+export default AboutPage
+```
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Key Gatsby Concept** 💡
+
+You can use the [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/) by exporting a named function called `Head` in your pages and page templates (e.g. the ones used by `createPage` or the File System Route API).
+
+Be sure to capitalize `Head` and please note that exporting this named function inside a component like `Layout` won't add the metadata to the `<head>`. The above works because you're exporting `Head` in a page inside `src/pages`.
+
+You can add any valid `<head>` tags inside the function and they'll be added to the page, for example:
+
+```js
+export const Head = () => (
+  <>
+    <title>About Me</title>
+    <meta name="description" content="Your description" />
+  </>
+)
+```
+
+After going through this tutorial, be sure to check out [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/).
+
+</Announcement>
+
+3. In a web browser, visit `localhost:8000/about`. When your development server finishes rebuilding your site, the About page should look something like this:
+
+![A screenshot of "localhost:8000/about" in a web browser. It has a heading and page title that says, "About Me", and a paragraph that says, "Hi there! I'm the proud creator of this site, which I built with Gatsby."](./about-page.png)
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
@@ -343,7 +388,6 @@ import { Link } from 'gatsby'
 const IndexPage = () => {
   return (
     <main>
-      <title>Home Page</title>
       <h1>Welcome to my Gatsby site!</h1>
       {/* highlight-next-line */}
       <Link to="/about">About</Link>
@@ -352,6 +396,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -365,7 +411,6 @@ import { Link } from 'gatsby' // highlight-line
 const AboutPage = () => {
   return (
     <main>
-      <title>About Me</title>
       <h1>About Me</h1>
       {/* highlight-next-line */}
       <Link to="/">Back to Home</Link>
@@ -374,6 +419,8 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Me</title>
+
 export default AboutPage
 ```
 
@@ -469,7 +516,7 @@ In the browser, the actual DOM elements will look something like this:
 
 Follow the steps below to create a `Layout` component and add it to your Home and About pages.
 
-1. Create a new file called `src/components/layout.js`. Insert the following code to define your `Layout` component. This component will render a dynamic page title and heading (from the `pageTitle` prop), a list of navigation links, and the contents passed in with the `children` prop. To improve accessibility, there's also a `<main>` element wrapping the page-specific elements (the `<h1>` heading and the contents from `children`).
+1. Create a new file called `src/components/layout.js`. Insert the following code to define your `Layout` component. This component will render a dynamic heading (from the `pageTitle` prop), a list of navigation links, and the contents passed in with the `children` prop. To improve accessibility, there's also a `<main>` element wrapping the page-specific elements (the `<h1>` heading and the contents from `children`).
 
 ```js:title=src/components/layout.js
 import * as React from 'react'
@@ -478,7 +525,6 @@ import { Link } from 'gatsby'
 const Layout = ({ pageTitle, children }) => {
   return (
     <div>
-      <title>{pageTitle}</title>
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
@@ -546,6 +592,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -565,6 +613,8 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Me</title>
+
 export default AboutPage
 ```
 
@@ -643,7 +693,6 @@ import { container } from './layout.module.css' // highlight-line
 const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}> // highlight-line
-      <title>{pageTitle}</title>
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
@@ -721,7 +770,6 @@ import {
 const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}>
-      <title>{pageTitle}</title>
       <nav>
         <ul className={navLinks}> // highlight-line
           <li className={navLinkItem}> // highlight-line
@@ -761,7 +809,7 @@ Luckily, when you use CSS Modules with Gatsby, you can have both! Your kebab-cas
 
 <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).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 
@@ -773,6 +821,7 @@ Take a moment to think back on what you've learned so far. Challenge yourself to
 
 * What's the difference between a page component and a building-block component?
 * How do you add a new page to your Gatsby site?
+* How do you add a title to a page?
 * What are the three steps for writing a new React component?
 * What are props and when might you use them?
 * What is the `children` prop and why is it useful?
@@ -799,6 +848,7 @@ Once your changes have been pushed to GitHub, Gatsby Cloud should notice the upd
 
 * React is a library that helps you break down your UI into smaller pieces called components. A component is a function that returns a React element. React elements can be written in JSX.
 * **Page components** contain all the UI elements for a specific page of your site. Gatsby automatically creates pages for components that are the default exports of files in the `src/pages` directory. The name of the file will be used as the route for the page.
+* You can use the **Gatsby Head API** by exporting a named function `Head` to define metadata for the page.
 * **Building-block components** are smaller reusable parts of your UI. They can be imported into page components or other building block components.
 * You can import **pre-built** components (like `Link`) from other packages, or you can write your own **custom** components from scratch (like `Layout`).
 * You can use **props** to change how a component renders. You can define your own props when you build a component. React also has some built-in props, like `children` and `className`.

docs/docs/tutorial/part-3/index.mdx

@@ -25,7 +25,7 @@ By the end of this part of the Tutorial, you will be able to:
 
 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).
+Don't want to miss any future livestreams? Follow our [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>
 
@@ -35,7 +35,7 @@ You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on th
 
 In Gatsby terms, a **plugin** is a separate npm package that you install to add extra features to your site.
 
-There are a variety of plugins that each have different use cases. Some plugins provide pre-built components, others add analytics, others let you pull data into your site. Some plugins are built by Gatsby employees, while other plugins are built and maintained by community members. So far, there are more than 2,600 plugins to choose from. You can look through all the available plugins using the [Gatsby Plugin Library](/plugins).
+There are a variety of plugins that each have different use cases. Some plugins provide pre-built components, others add analytics, others let you pull data into your site. Some plugins are built by Gatsby employees, while other plugins are built and maintained by community members. So far, there are more than 3,000 plugins to choose from. You can look through all the available plugins using the [Gatsby Plugin Library](/plugins).
 
 You can think of a plugin as an accessory for your site. You don't _need_ to use plugins - you could build out the same functionality from scratch yourself - but they save you time. They're like those fancy single-purpose cooking gadgets that peel apples or crush garlic. You could accomplish the same task using a regular knife, but it's often faster to use a tool that's built to do that one specific job really well.
 
@@ -194,6 +194,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -238,6 +240,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 3. In your web browser, go to `localhost:8000`. Your image should still appear on the home page.
@@ -246,7 +250,7 @@ export default IndexPage
 
 <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).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 

docs/docs/tutorial/part-4/index.mdx

@@ -28,16 +28,17 @@ By the end of this part of the Tutorial, you will be able to:
 
 - Use **GraphiQL** to explore the data in the data layer and build your own GraphQL queries.
 - Use the **`useStaticQuery`** hook to pull data into a "building-block" component.
+- Create an reusable `Seo` component for the **Gatsby Head API**.
 - 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.
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 4. **Please note:** At the time of recording the Gatsby Head API didn't exist yet and thus the video contents and text contents are different. Please always follow the written instructions. We'll do our best to record a new version in the future, thanks for understanding!
 
-You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+Don't want to miss any future livestreams? Follow our [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>
 
@@ -103,13 +104,13 @@ Try creating and running a few queries by doing the following:
 
 In the next section, you'll learn more about how to use specific fields. For now, take a minute or two to explore the different fields. What kinds of data are already available to you in the data layer?
 
-## Queries in building-block components: Pull the site title into the `Layout` component
+## Queries in building-block components
 
 Now that you've seen the general process for how data works in your Gatsby site, it's time to try it out yourself.
 
 The process for using GraphQL queries in your components looks slightly different depending on whether it's a page component or a building-block component.
 
-In this first section, you'll start by pulling data into a building-block component. To do that, you'll update your `Layout` component to pull in the title of your site.
+In this first section, you'll start by pulling data into a building-block components. To do that, you'll update your `Layout` component and create an `Seo` component to display the title of your site.
 
 ### Task: Use GraphiQL to build the query
 
@@ -235,7 +236,7 @@ const Header = () => {
     <header>
       {/* highlight-start */}
       {/* Step 3: Use the data in your component */}
-      <h1>{ data.site.siteMetadata.title }</h1>
+      <h1>{data.site.siteMetadata.title}</h1>
       {/* highlight-end */}
     </header>
   )
@@ -392,7 +393,6 @@ const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}>
       {/* highlight-start */}
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       <header>{data.site.siteMetadata.title}</header>
       {/* highlight-end */}
       <nav>
@@ -462,7 +462,6 @@ const Layout = ({ pageTitle, children }) => {
 
   return (
     <div className={container}>
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       {/* highlight-next-line */}
       <header className={siteTitle}>{data.site.siteMetadata.title}</header>
       <nav>
@@ -496,6 +495,106 @@ When your browser reloads, you should see your new styles applied to your site t
 
 Congratulations, you've just used GraphQL to pull data into your site! Try changing the site title in your `gatsby-config.js` file and see your site update in the browser.
 
+### Task: Use `useStaticQuery` to create an `Seo` component
+
+Now that you're using the site title in your `Layout` component it's time to also update the `<title>` tag of each page. In the previous steps you used the Gatsby Head API to define the title, e.g. in the Index page:
+
+```js:title=src/pages/index.js
+export const Head = () => <title>Home Page</title>
+```
+
+At the end of this task the title will say `Home Page | My First Gatsby Site` by using an `Seo` component. Follow the steps below to use `useStaticQuery` in an `Seo` component and use this component across your pages.
+
+1. Create a new file called `src/components/seo.js`. Insert the following code to define your `Seo` component. This component accepts one required parameter called `title`, uses `useStaticQuery` to query the site title and then returns a `<title>` tag with the structure shown above.
+
+```js:title=src/components/seo.js
+import * as React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const Seo = ({ title }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return (
+    <title>{title} | {data.site.siteMetadata.title}</title>
+  )
+}
+
+export default Seo
+```
+
+2. Update the Index page component to use this newly created `Seo` component. You have to import it and then use it inside the `Head` export. Instead of placing the "Home Page" in between the `<title>` tag you're now passing it to the `Seo` component through the `title` prop.
+
+```js:title=src/pages/index.js
+import * as React from 'react'
+import Layout from '../components/layout'
+import { StaticImage } from 'gatsby-plugin-image'
+import Seo from '../components/seo' // highlight-line
+
+const IndexPage = () => {
+  return (
+    <Layout pageTitle="Home Page">
+      <p>I'm making this by following the Gatsby Tutorial.</p>
+      <StaticImage
+        alt="Clifford, a reddish-brown pitbull, dozing in a bean bag chair"
+        src="../images/clifford.jpg"
+      />
+    </Layout>
+  )
+}
+
+// highlight-next-line
+export const Head = () => <Seo title="Home Page" />
+
+export default IndexPage
+```
+
+3. Save the file and you should see `Home Page | My First Gatsby Site` in your browser tab.
+
+4. Update all the other pages where you used the `Head` export in the same way. Import the `Seo` component with the relative path to the file, replace the `<title>` tag in the `Head` export with the `Seo` component, and finally use the `title` prop on `Seo` to give it a name. The About page for example should use this:
+
+```js:title=src/pages/about.js
+// Rest of the component...
+
+export const Head = () => <Seo title="About Me" />
+```
+
+After going through this tutorial, be sure to check out [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/) for a more detailed explanation.
+
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Pro Tip:** `useStaticQuery` lends itself really well when creating small, reusable React components. You can even create custom React hooks, for example:
+
+```js
+import * as React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const useSiteMetadata = ({ title }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return data.site.siteMetadata
+}
+
+export default useSiteMetadata
+```
+
+</Announcement>
+
 ## Queries in page components: Create a blog page with a list of post filenames
 
 So far, your site has a few static landing pages: the Home page and the About page. The next step is to build out the actual blog page!
@@ -514,6 +613,7 @@ Start by setting up the skeleton for your new blog page component.
 ```js:title=src/pages/blog.js
 import * as React from 'react'
 import Layout from '../components/layout'
+import Seo from '../components/seo'
 
 const BlogPage = () => {
   return (
@@ -523,6 +623,8 @@ const BlogPage = () => {
   )
 }
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
@@ -544,7 +646,6 @@ const Layout = ({ pageTitle, children }) => {
 
   return (
     <div className={container}>
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       <header className={siteTitle}>{data.site.siteMetadata.title}</header>
       <nav>
         <ul className={navLinks}>
@@ -731,8 +832,8 @@ import { graphql } from 'gatsby'
 const HomePage = ({ data }) => {
   return (
     <p>
-      { /* Step 3: Use the data in your component*/ }
-      { data.site.siteMetadata.description }
+      {/* Step 3: Use the data in your component*/}
+      {data.site.siteMetadata.description}
     </p>
   )
 }
@@ -761,6 +862,7 @@ Follow the steps below to add a list of post filenames to your blog page.
 import * as React from 'react'
 import { graphql } from 'gatsby' // highlight-line
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = () => {
   return (
@@ -770,6 +872,8 @@ const BlogPage = () => {
   )
 }
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
@@ -787,6 +891,7 @@ Alternatively, you can give each of your queries a unique name. Query names can
 import * as React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = () => {
   return (
@@ -808,6 +913,8 @@ export const query = graphql`
 `
 // highlight-end
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
@@ -827,6 +934,7 @@ In React, when you use the `.map()` method to render a list of elements, you sho
 import * as React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = ({ data }) => { // highlight-line
   return (
@@ -856,9 +964,27 @@ export const query = graphql`
   }
 `
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Pro Tip:** The Gatsby Head API and its `Head` export also receives the `data` prop. This isn't directly obvious when using the component unless your IDE gives autocompletion or hints. If you're unsure how to use an API, head over to the [reference guides](/docs/reference) for instructions. There you'll find guides like [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/).
+
+When accessing `data` in `Head` it is the same data as in your page component:
+
+```js
+export const Head = ({ data }) => (
+  <>
+    <title>{data.site.siteMetadata.title}</title>
+  </>
+)
+```
+
+</Announcement>
+
 4. Now, when you look at your blog page in a web browser, you should see a list with the filenames for each of your posts:
 
 ![A screenshot of the blog page in a web browser. Under the heading "My Blog Posts", there's a bulleted list of the post filenames: "another-post", "my-first-post", and "yet-another-post".](./blog-page-with-post-filenames.png)
@@ -869,7 +995,7 @@ You won't be able to render the contents of your posts just yet, since your site
 
 <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).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 
@@ -907,6 +1033,7 @@ Once your changes have been pushed to GitHub, Gatsby Cloud should notice the upd
 * You can write GraphQL queries to pull data out of the data layer and into your React components.
     * To pull data into a "building block" component, use the `useStaticQuery` hook.
     * To pull data into a page component, use a page query.
+* You can use React components inside the Gatsby Head API.
 
 <Collapsible
   summary={<h2>Key Gatsby Concept: General process for using data in your site</h2>}

docs/docs/tutorial/part-5/index.mdx

@@ -32,9 +32,9 @@ 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 5. **Please note:** At the time of recording an older version of `gatsby-plugin-mdx` was used and thus the video contents and text contents are different. Please always follow the written instructions. We'll do our best to record a new version in the future, thanks for understanding!
 
-You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
+Don't want to miss any future livestreams? Follow our [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>
 
@@ -72,7 +72,7 @@ Once you get used to what all the different symbols mean, Markdown can be easier
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
-**New to Markdown?** The MDX documentation includes a [table of components](https://mdxjs.com/table-of-components) that shows the different formatting options available. It includes things like headings, blockquotes, lists, and code blocks. 
+**New to Markdown?** The MDX documentation includes a [table of components](https://mdxjs.com/table-of-components) that shows the different formatting options available. It includes things like headings, blockquotes, lists, and code blocks.
 
 </Announcement>
 
@@ -98,14 +98,15 @@ You'll learn more about how to access the frontmatter for your posts later on.
 
 Add some Markdown content to each of the `.mdx` files you created in your `/blog` directory in Part 4. 
 
-Include frontmatter with fields for the title of each post and the date it was published. (Give each post a different date, to make it easier to add sorting later on.) After the frontmatter, write some post content using some Markdown syntax.
+Include frontmatter with fields for the title of each post, the date it was published, and a [slug](https://developer.mozilla.org/en-US/docs/Glossary/Slug). The slug will be used to construct the final URL of each post. Give each post a different date, to make it easier to add sorting later on. After the frontmatter, write some post content using some Markdown syntax.
 
 Here are some example posts that you can use for inspiration:
 
 ```mdx:title=blog/my-first-post.mdx
 ---
 title: "My First Post"
 date: "2021-07-23"
+slug: "my-first-post"
 ---
 
 This is my first blog post! Isn't it *great*?
@@ -121,6 +122,7 @@ Some of my **favorite** things are:
 ---
 title: "Another Post"
 date: "2021-07-24"
+slug: "another-post"
 ---
 
 Here's another post! It's even better than the first one!
@@ -130,6 +132,7 @@ Here's another post! It's even better than the first one!
 ---
 title: "Yet Another Post"
 date: "2021-07-25"
+slug: "yet-another-post"
 ---
 
 Wow look at all this content. How do they do it?
@@ -146,25 +149,22 @@ Now that you have some MDX content inside your blog posts, it's time set up the
 
 </Announcement>
 
-The `gatsby-plugin-mdx` plugin provides some new tools for you to use in your site:
-
-* The `allMdx` and `mdx` fields (for your GraphQL queries)
-* An `MDXRenderer` component (for processing and displaying MDX content)
+The `gatsby-plugin-mdx` plugin provides the `allMdx` and `mdx` fields for your GraphQL queries.
 
 To render your posts on the Blog page, you'll complete a few different steps:
 
 1. Install and configure the `gatsby-plugin-mdx` transformer plugin and its dependencies.
 2. Update the Blog page query to use the `allMdx` field from `gatsby-plugin-mdx` instead of `allFile`.
-3. Use the `MDXRenderer` component from `gatsby-plugin-mdx` to render your post's MDX contents in the JSX for your Blog page.
+3. Render your post's excerpt in your Blog page.
 
 
 ### Task: Install and configure the MDX transformer plugin (and dependencies)
 
-The `gatsby-plugin-mdx` package requires a few additional dependencies to run: `@mdx-js/mdx` (which implements MDX) and `@mdx-js/react` (which maps the MDX implementation to React components).
+The `gatsby-plugin-mdx` package requires a one additional dependencies to run: `@mdx-js/react` which maps the MDX implementation to React components.
 
-1. In your terminal, run the command below to install `gatsby-plugin-mdx` and its dependencies. (This adds all three packages to the `dependencies` object in your `package.json` file and to your `node_modules` directory.)
+1. In your terminal, run the command below to install `gatsby-plugin-mdx` and its dependencies. (This adds all two packages to the `dependencies` object in your `package.json` file and to your `node_modules` directory.)
     ```shell
-    npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
+    npm install gatsby-plugin-mdx @mdx-js/react
     ```
 
 2. Add `gatsby-plugin-mdx` to the `plugins` array in your `gatsby-config.js` file, so that Gatsby knows to use the plugin when building your site.
@@ -190,7 +190,7 @@ The `gatsby-plugin-mdx` package requires a few additional dependencies to run: `
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
-**Tip:** There are a variety of [remark](https://remark.js.org/) plugins that you can use to add extra features to your Markdown. You can configure them using the [`gatsbyRemarkPlugins`](/plugins/gatsby-plugin-mdx/#gatsby-remark-plugins) option when you configure `gatsby-plugin-mdx` in your `gatsby-config.js` file.
+**Tip:** There are a variety of [remark](https://remark.js.org/) plugins that you can use to add extra features to your Markdown. You can configure them using the [`gatsbyRemarkPlugins`](/plugins/gatsby-plugin-mdx/#gatsby-remark--plugins) option when you configure `gatsby-plugin-mdx` in your `gatsby-config.js` file.
 
 Here are some popular remark plugins:
 
@@ -364,7 +364,7 @@ query MyQuery {
     }
     ```
 
-6. The last thing you need to add to your query is the contents of each post! To do that, add the `body` field to your query.
+6. The last thing you need to add to your query is a preview of each posts content! To do that, add the `excerpt` field to your query.
     ```graphql
     query MyQuery {
       allMdx(sort: {fields: frontmatter___date, order: DESC}) {
@@ -374,15 +374,15 @@ query MyQuery {
             title
           }
           id
-          body
+          excerpt
         }
       }
     }
     ```
 
-7. When you run your query, the `body` field for each node should look something like the data shown below. That's a lot of information! The `body` field actually contains the *compiled MDX content* for your file. It might not be readable for humans, but it's the format that the `MDXRenderer` component understands. (You'll get to `MDXRenderer` in a moment.)
+7. When you run your query, the `excerpt` field for each node should look something like the data shown below.
     ```json
-    "body": "var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Yet Another Post\",\n  \"date\": \"2021-07-25\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Wow look at all this content. How do they do it?\"));\n}\n;\nMDXContent.isMDXComponent = true;"
+    "excerpt": "Wow look at all this content. How do they do it?"
     ```
 
 Now that you have your GraphQL query all set up, it's time to tackle the last piece of the puzzle: rendering your posts in the Blog page.
@@ -410,7 +410,7 @@ query MyQuery {
 </Announcement>
 
 
-### Task: Use the `MDXRenderer` component to render your post's contents in your Blog page
+### Task: Render your post's excerpt in your Blog page
 
 Now that your GraphQL query is all set up, it's time to replace the page query in your Blog page component.
 
@@ -419,6 +419,7 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
     import * as React from 'react'
     import { graphql } from 'gatsby'
     import Layout from '../components/layout'
+    import Seo from '../../components/seo'
 
     const BlogPage = ({ data }) => {
       return (
@@ -436,13 +437,15 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
               title
             }
             id
-            body
+            excerpt
           }
         }
       }
     `
     // highlight-end
 
+    export const Head = () => <Seo title="My Blog Posts" />
+
     export default BlogPage
     ```
 
@@ -478,64 +481,28 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
               date(formatString: "MMMM DD, YYYY")
             }
             id
-            body
+            excerpt
           }
         }
       }
     `
 
+    export const Head = () => <Seo title="My Blog Posts" />
+
     export default BlogPage
     ```
 
 3. Go to `localhost:8000/blog` in your web browser. You should be able to see the titles and dates for each of your posts:
 
 ![A screenshot of the Blog page in a web browser. Underneath the page heading, there are three posts listed: "Yet Another Post" (posted July 25, 2021), "Another Post" (posted July 24, 2021), and "My First Post" (posted July 23, 2021).](./blog-page-with-frontmatter.png)
 
-4. The final step in this part of the Tutorial is to render the actual contents of your MDX blog posts. To do that, you'll need to use a component from `gatsby-plugin-mdx` called `MDXRenderer`. Start by importing the component into your Blog page:
-
-```js:title=src/pages/blog.js
-import * as React from 'react'
-import { graphql } from 'gatsby'
-import { MDXRenderer } from 'gatsby-plugin-mdx' // highlight-line
-import Layout from '../components/layout'
-
-// ...
-```
-
-<Collapsible
-  summary={<h4>The <code>MDXRenderer</code> component</h4>}
->
-
-`MDXRenderer` is a component included in the `gatsby-plugin-mdx` plugin that you can use to render the contents of a `.mdx` file.
-
-The `MDXRenderer` uses the `children` prop, similar to the `Layout` component you created in [Part 2](/docs/tutorial/part-2/). It expects to receive compiled MDX between its opening and closing tags. You can pass in the `body` field from an MDX node. 
-
-<Announcement style={{marginBottom: "1.5rem"}}>
-
-**Quick Refresher:** Need a reminder of how the `children` prop works? Refer back to the ["Create a reusable layout component" section in Part 2](/docs/tutorial/part-2/#create-a-reusable-layout-component).
-
-</Announcement>
-
-Here's a quick example of how to import and use the `MDXRenderer` component:
-
-```js
-import { MDXRenderer } from 'gatsby-plugin-mdx'
-
-// Use this in the JSX for your component
-<MDXRenderer>
-  { node.body }
-</MDXRenderer>
-```
-
-</Collapsible>
-
-5. In the JSX for your Blog page, use the `MDXRenderer` component to wrap the contents of the `body` field for each node:
+4. The final step in this part of the Tutorial is to render the excerpt of your MDX blog posts. In the JSX for your Blog page render the value of the `excerpt` field:
 
 ```js:title=src/pages/blog.js
 import * as React from 'react'
 import { graphql } from 'gatsby'
-import { MDXRenderer } from 'gatsby-plugin-mdx'
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = ({ data }) => {
   return (
@@ -546,9 +513,7 @@ const BlogPage = ({ data }) => {
             <h2>{node.frontmatter.title}</h2>
             <p>Posted: {node.frontmatter.date}</p>
             {/* highlight-start */}
-            <MDXRenderer>
-              {node.body}
-            </MDXRenderer>
+            <p>{node.excerpt}</p>
             {/* highlight-end */}
           </article>
         ))
@@ -566,23 +531,25 @@ export const query = graphql`
           date(formatString: "MMMM DD, YYYY")
         }
         id
-        body
+        excerpt
       }
     }
   }
 `
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
-6. When you refresh your Blog page in the web browser, you should see your post contents rendered!
-    ![A screenshot of the Blog page in a web browser. Now, underneath the date for each post, the contents of the blog post are also being rendered.](./blog-page-with-full-posts.png)
+5. When you refresh your Blog page in the web browser, you should see your post excerpt rendered!
+    ![A screenshot of the Blog page in a web browser. Now, underneath the date for each post, the excerpt of the blog post are also being rendered.](./blog-page-with-full-posts.png)
 
 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).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 
@@ -630,7 +597,7 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us
 
 ### What's coming next?
 
-Right now, all your blog posts and their contents are being rendered in one long page. It would be better if each post lived on its own page, and then the Blog page could link out to all the different posts.
+Right now, all your blog posts and their excerpts are being rendered in one long page. It would be better if each post lived on its own page, and then the Blog page could link out to all the different posts.
 
 In Part 6, you'll learn how to use Gatsby's filesystem route API to dynamically create new pages for each of your blog posts.
 

docs/docs/tutorial/part-7/index.mdx

@@ -22,7 +22,7 @@ By the end of this part of the Tutorial, you will be able to:
 
 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).
+Don't want to miss any future livestreams? Follow our [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>
 
@@ -90,6 +90,7 @@ For more detailed information, refer to the doc on [Preoptimizing Your Images](/
 ---
 title: "My First Post"
 date: "2021-07-23"
+slug: "my-first-post"
 // highlight-start
 hero_image: "./christopher-ayme-ocZ-_Y7-Ptg-unsplash.jpg"
 hero_image_alt: "A gray pitbull relaxing on the sidewalk with its tongue hanging out"
@@ -105,6 +106,7 @@ hero_image_credit_link: "https://unsplash.com/photos/ocZ-_Y7-Ptg"
 ---
 title: "Another Post"
 date: "2021-07-24"
+slug: "another-post"
 // highlight-start
 hero_image: "./anthony-duran-eLUBGqKGdE4-unsplash.jpg"
 hero_image_alt: "A grey and white pitbull wading happily in a pool"
@@ -120,6 +122,7 @@ hero_image_credit_link: "https://unsplash.com/photos/eLUBGqKGdE4"
 ---
 title: "Yet Another Post"
 date: "2021-07-25"
+slug: "yet-another-post"
 // highlight-start
 hero_image: "./jane-almon-7rriIaBH6JY-unsplash.jpg"
 hero_image_alt: "A white pitbull wearing big googly-eye glasses"
@@ -185,7 +188,6 @@ query ($id: String) {
       title
       date(formatString: "MMMM D, YYYY")
     }
-    body
   }
 }
 ```
@@ -198,7 +200,6 @@ query ($id: String) {
         "title": "My First Post",
         "date": "July 23, 2021",
       },
-      "body": "..."
     }
   },
   "extensions": {}
@@ -225,7 +226,6 @@ query ($id: String) {
       hero_image_credit_text
       // highlight-end
     }
-    body
   }
 }
 ```
@@ -241,7 +241,6 @@ query ($id: String) {
         "hero_image_credit_link": "https://unsplash.com/photos/ocZ-_Y7-Ptg",
         "hero_image_credit_text": "Christopher Ayme"
       },
-      "body": "..."
     }
   },
   "extensions": {}
@@ -267,7 +266,6 @@ query ($id: String) {
       }
       // highlight-end
     }
-    body
   }
 }
 ```
@@ -318,8 +316,7 @@ Gatsby can tell that the `hero_image` field from your MDX frontmatter matches a
           ]
         }
         // highlight-end
-      },
-      "body": "..."
+      }
     }
   },
   "extensions": {}
@@ -343,10 +340,10 @@ For more information, see the [`gatsby-plugin-image` Reference Guide](/docs/refe
 Once you have your GraphQL query set up, you can add it to your blog post page template.
 
 1. Replace your existing page query with the query you built in GraphiQL that includes the hero image frontmatter fields.
-    ```js:title=src/pages/blog/{mdx.slug}.js
+    ```js:title=src/pages/blog/{mdx.frontmatter__slug}.js
     // imports
 
-    const BlogPost = ({ data }) => {
+    const BlogPost = ({ data, children }) => {
       return (
         // ...
       )
@@ -356,7 +353,6 @@ Once you have your GraphQL query set up, you can add it to your blog post page t
     export const query = graphql`
       query($id: String) {
         mdx(id: {eq: $id}) {
-          body
           frontmatter {
             title
             date(formatString: "MMMM DD, YYYY")
@@ -374,27 +370,29 @@ Once you have your GraphQL query set up, you can add it to your blog post page t
     `
     // highlight-end
 
+    export const Head = ({ data }) => <Seo title={data.mdx.frontmatter.title} />
+
     export default BlogPost
     ```
 
 2. Import the `GatsbyImage` component and the `getImage` helper function from the `gatsby-plugin-image` package.
 
-```js:title=src/pages/blog/{mdx.slug}.js
+```js:title=src/pages/blog/{mdx.frontmatter_slug}.js
 import * as React from 'react'
 import { graphql } from 'gatsby'
-import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image' // highlight-line
 import Layout from '../../components/layout'
+import Seo from '../../components/seo'
 
 // ...
 ```
 
 2. Use the `getImage` helper function to get back the `gatsbyImageData` object from the `hero_image` field.
 
-```js:title=src/pages/blog/{mdx.slug}.js
+```js:title=src/pages/blog/{mdx.frontmatter__slug}.js
 // imports
 
-const BlogPost = ({ data }) => {
+const BlogPost = ({ data, children }) => {
   const image = getImage(data.mdx.frontmatter.hero_image) // highlight-line
 
   return (
@@ -416,7 +414,7 @@ Without the `getImage` helper function, you'd have to type out `data.mdx.frontma
 3. Use the `GatsbyImage` component from `gatsby-plugin-image` to render the hero image data. You should pass `GatsbyImage` two props:
     * `image`: the `gatsbyImageData` object for your `hero_image` field
     * `alt`: the alternative text for your image, from the `hero_image_alt` field
-    ```js:title=src/pages/blog/{mdx.slug}.js
+    ```js:title=src/pages/blog/{mdx.frontmatter__slug}.js
     return (
       <Layout pageTitle={data.mdx.frontmatter.title}>
         <p>Posted: {data.mdx.frontmatter.date}</p>
@@ -426,9 +424,7 @@ Without the `getImage` helper function, you'd have to type out `data.mdx.frontma
           alt={data.mdx.frontmatter.hero_image_alt}
         />
         {/* highlight-end */}
-        <MDXRenderer>
-          {data.mdx.body}
-        </MDXRenderer>
+        {children}
       </Layout>
     )
     ```
@@ -454,10 +450,10 @@ Remember, Gatsby's `Link` component only gives performance benefits for internal
 
 
 
-```js:title=src/pages/blog/{mdx.slug}.js
+```js:title=src/pages/blog/{mdx.frontmatter__slug}.js
 // imports
 
-const BlogPost = ({ data }) => {
+const BlogPost = ({ data, children }) => {
   const image = getImage(data.mdx.frontmatter.hero_image)
 
   return (
@@ -475,9 +471,7 @@ const BlogPost = ({ data }) => {
         </a>
       </p>
       {/* highlight-end */}
-      <MDXRenderer>
-        {data.mdx.body}
-      </MDXRenderer>
+      {children}
     </Layout>
   )
   }
@@ -486,6 +480,8 @@ export const query = graphql`
   ...
 `
 
+export const Head = ({ data }) => <Seo title={data.mdx.frontmatter.title} />
+
 export default BlogPost
 ```
 
@@ -501,7 +497,7 @@ Try removing the `{" "}` and see what happens. The paragraph text should end up
 
 <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).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 

docs/docs/working-with-images-in-markdown.md

@@ -187,7 +187,7 @@ Configure the plugins in your `gatsby-config` file. As with the previous example
 
 The below example uses the `gatsby-plugin-mdx` plugin.
 
-`gatsby-remark-images` needs to be both a sub-plugin of `gatsby-plugin-mdx`, included in the `options` field, and a string entry in the plugins array. `gatsby-plugin-sharp` can be included on its own.
+`gatsby-remark-images` needs to be a sub-plugin of `gatsby-plugin-mdx`, included in the `options` field. `gatsby-plugin-sharp` can be included on its own.
 
 `gatsby-source-filesystem` needs to be pointed at wherever you have your images on disk.
 
@@ -197,7 +197,6 @@ The below example uses the `gatsby-plugin-mdx` plugin.
 module.exports = {
   plugins: [
     `gatsby-plugin-sharp`,
-    `gatsby-remark-images`,
     {
       resolve: `gatsby-plugin-mdx`,
       options: {

docs/tutorial/remark-plugin-tutorial.md

@@ -331,7 +331,7 @@ A real-world example of this would be [`gatsby-remark-responsive-iframe`](https:
 
 ## Loading in changes and seeing effect
 
-At this point, our plugin is now ready to be used. To see the resulting functionality, it is helpful to re-visit [Part 7 of the Gatsby Tutorial](/docs/tutorial/part-7/) to programmatically create pages from Markdown data. Once this is set up, you can examine that your plugin works as seen below based on the markdown you wrote earlier.
+At this point, our plugin is now ready to be used. To see the resulting functionality, it is helpful to re-visit [Part 6 of the Gatsby Tutorial](/docs/tutorial/part-6/) to programmatically create pages from Markdown data. Once this is set up, you can examine that your plugin works as seen below based on the markdown you wrote earlier.
 
 ![Output](../docs/images/remark-ast-output.png)