From d820d9593f45071687a823c8e9a556d95aaf5b81 Mon Sep 17 00:00:00 2001 From: Hannah Goodridge Date: Fri, 26 Feb 2021 12:12:58 +0000 Subject: [PATCH 1/4] Update mdx.md Updating gatsby documentation to tell the user to pass frontmatter in MDXRenderer component. As suggested in this issue: https://github.com/gatsbyjs/gatsby/issues/21241 --- docs/docs/how-to/routing/mdx.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/docs/how-to/routing/mdx.md b/docs/docs/how-to/routing/mdx.md index 1048243e1ef5f..982df3cd5d527 100644 --- a/docs/docs/how-to/routing/mdx.md +++ b/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 --- -

{props.pageContext.frontmatter.title}

-{props.pageContext.frontmatter.author} +

{props.frontmatter.title}

+{props.frontmatter.author} (Blog post content, components, etc.) ``` +Make sure to pass frontmatter to the MDXRenderer component like below: + +``` +{mdx.body} + +``` + ## 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. From 8db6a6b4463e5c3fd2c8e83236e6a5d89fcb50d8 Mon Sep 17 00:00:00 2001 From: Hannah Goodridge Date: Thu, 6 May 2021 11:40:18 +0100 Subject: [PATCH 2/4] Updating docs ## Description Updating gatsby documentation to tell the user to pass frontmatter in MDXRenderer component. As suggested in this issue: https://github.com/gatsbyjs/gatsby/issues/21241 ### Documentation docs here: https://www.gatsbyjs.com/docs/mdx/programmatically-creating-pages/ @gatsbyjs/documentation please review ## Related Issues Fixes #21241 --- docs/docs/mdx/programmatically-creating-pages.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index 03355101da559..705fe836c5205 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/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 } }) {

{mdx.frontmatter.title}

- {mdx.body} + {mdx.body}
) @@ -285,7 +287,7 @@ export default function PageTemplate({ data: { mdx } }) {

{mdx.frontmatter.title}

- {mdx.body} + {mdx.body}
) From b92684a08f03794c100cd8dfe67cc7a90953530b Mon Sep 17 00:00:00 2001 From: Hannah Goodridge Date: Thu, 6 May 2021 11:55:22 +0100 Subject: [PATCH 3/4] Update programmatically-creating-pages.md removing extra spaces for linter error --- docs/docs/mdx/programmatically-creating-pages.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index 705fe836c5205..2089f7250ab26 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/docs/docs/mdx/programmatically-creating-pages.md @@ -229,8 +229,6 @@ 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" From 21b53be1a2cf22e5439d6c3f548710b5269ec5c8 Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 6 May 2021 13:17:46 +0200 Subject: [PATCH 4/4] Restore mdx.md --- docs/docs/how-to/routing/mdx.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/docs/docs/how-to/routing/mdx.md b/docs/docs/how-to/routing/mdx.md index 982df3cd5d527..1048243e1ef5f 100644 --- a/docs/docs/how-to/routing/mdx.md +++ b/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.mdx.frontmatter` and +Frontmatter is also available in `props.pageContext.frontmatter` and can be accessed in blocks of JSX in your MDX document: ```mdx @@ -103,19 +103,12 @@ title: Building with Gatsby author: Jay Gatsby --- -

{props.frontmatter.title}

-{props.frontmatter.author} +

{props.pageContext.frontmatter.title}

+{props.pageContext.frontmatter.author} (Blog post content, components, etc.) ``` -Make sure to pass frontmatter to the MDXRenderer component like below: - -``` -{mdx.body} - -``` - ## 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.