chore(docs): Update MDX frontmatter for programmatic pages

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

@@ -94,7 +94,7 @@ query {
 >
 > Check out the How-To Guide: [How to Source Data from the Filesystem](/docs/how-to/sourcing-data/sourcing-from-the-filesystem/).
 
-Frontmatter is also available in `props.pageContext.frontmatter` and
+Frontmatter is also available in `props.mdx.frontmatter` and
 can be accessed in blocks of JSX in your MDX document:
 
 ```mdx
@@ -103,12 +103,19 @@ title: Building with Gatsby
 author: Jay Gatsby
 ---
 
-<h1>{props.pageContext.frontmatter.title}</h1>
-<span>{props.pageContext.frontmatter.author}</span>
+<h1>{props.frontmatter.title}</h1>
+<span>{props.frontmatter.author}</span>
 
 (Blog post content, components, etc.)
 ```
 
+Make sure to pass frontmatter to the MDXRenderer component like below:
+
+```
+<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
+
+```
+
 ## Part 3: Importing JSX components and MDX documents
 
 MDX allows you to use React components alongside Markdown. You can import components from third-party libraries (like [`theme-ui`](https://theme-ui.com/components)) to take advantage of pre-built functionality like data visualizations, email signup forms, or call-to-action buttons. You can also import and reuse _your own_ React components and even other MDX documents.

docs/docs/mdx/programmatically-creating-pages.md

@@ -229,6 +229,8 @@ For now, to update imports within `.mdx` files, you should rerun your Gatsby dev
 First, create a component that accepts the queried MDX data (which will be
 added in the next step).
 
+
+
 ```jsx:title=src/components/posts-page-layout.js
 import React from "react"
 import { graphql } from "gatsby"
@@ -243,7 +245,7 @@ export default function PageTemplate({ data: { mdx } }) {
     <div>
       <h1>{mdx.frontmatter.title}</h1>
       <MDXProvider components={shortcodes}>
-        <MDXRenderer>{mdx.body}</MDXRenderer>
+        <MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
       </MDXProvider>
     </div>
   )
@@ -285,7 +287,7 @@ export default function PageTemplate({ data: { mdx } }) {
     <div>
       <h1>{mdx.frontmatter.title}</h1>
       <MDXProvider components={shortcodes}>
-        <MDXRenderer>{mdx.body}</MDXRenderer>
+        <MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
       </MDXProvider>
     </div>
   )