switch to mdx

[kentcdodds]

Hey friends 👋

I decided to take a whack at #2197. Lots of find/replace stuff, but it all compiles, works, and looks great.

This will allow us to import and use react components into the markdown, giving us super-powers in the docs.

100% of the content changes were just to make the HTML work with the JSX parser (most of them were changing <img> to <img /> and similar for <br> to <br />)

Other than that it was a bit of updating deps to get rid of compatibility issues, renaming graphql queries from Remark to Mdx, and swapping remark's html for MDX's body and using the MDXRenderer component.

cc @threepointone @alexkrolick

[kentcdodds]

Was getting this error:

Error: src/components/MarkdownPage/MarkdownPage.js:10
 10: import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';
                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ gatsby-plugin-mdx/mdx-renderer. Required module not found

Not sure why though. So I added $FlowFixMe to get this PR to build. Anyone have any ideas why flow wasn't happy with this import?

[reactjs-bot]

Deploy preview for reactjs failed.

Built with commit 02a7ae6

https://app.netlify.com/sites/reactjs/deploys/5d48750077284400085e9a5b

[reactjs-bot]

Deploy preview for reactjs failed.

Built with commit a50040a

https://app.netlify.com/sites/reactjs/deploys/5d48783ba72ab4000972f895

[alexkrolick]

I think this will be quite nice for adding live code samples in more places and stuff like tabs.

Seems to be some build errors in the deploy preview, which I may have time to look into later this week and we decide to pursue this approach.

[alexkrolick]

Pulled this down locally, here are my findings:

• Heading components are a bit different, the anchor links aren't hidden/in the gutter. The anchor class doesn't seem to be defined. I think this might have to do with the gatsby-ssr config options.

• yarn build leads to an error

success Building production JavaScript and CSS bundles - 10.058 s

 ERROR

ENOENT: no such file or directory, open '~/reactjs.org/public/page-data/docs/complementary-tools-it-IT.html/page-data.json'

  Error: ENOENT: no such file or directory, open '~/reactjs.org/public/page-data/docs/complementary-tools-it-IT.html/page-data.json'

⠙ Rewriting compilation hashes