chore(docs): MDX v2 (#35893)

Co-authored-by: Josh Johnson <[email protected]>
Co-authored-by: LekoArts <[email protected]>
Co-authored-by: Lennart <[email protected]>
Co-authored-by: Ward Peeters <[email protected]>
Co-authored-by: Ty Hopp <[email protected]>
Co-authored-by: Levi Zim <[email protected]>
Co-authored-by: pieh <[email protected]>
Co-authored-by: Michal Piechowiak <[email protected]>

Author: 7 people

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/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)