Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): Update MDX frontmatter for programmatic pages #29798

Merged
merged 4 commits into from
May 6, 2021
Merged

chore(docs): Update MDX frontmatter for programmatic pages #29798

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d820d95
Update mdx.md
Hannah-goodridge Feb 26, 2021
8db6a6b
Updating docs
Hannah-goodridge May 6, 2021
b92684a
Update programmatically-creating-pages.md
Hannah-goodridge May 6, 2021
21b53be
Restore mdx.md
LekoArts May 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions docs/docs/how-to/routing/mdx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down
6 changes: 4 additions & 2 deletions docs/docs/mdx/programmatically-creating-pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
)
Expand Down Expand Up @@ -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>
)
Expand Down