Adds MDX support and a Tab component for the different examples

[alexandercarls]

• Added MDX Support while needing to reimplement some remark-Plugins.
• Reworked the Table of Contents due to the new data structure.
• Side effect: I also fixed ToC reloading on every link click when the page is first visited and react/gatsby routing didn't take place yet.
• Side effect: I fixed that the document headers are not hidden behind the top document bar for mobile and small desktop screensize.
• Added a granular Tabs component and a tailored ExampleTabs component for the domain with the fixed three different approaches.
• Copy-Toastr is not a faithful reimplementation. I like the "new" one better :).

TODO after deployment (prod/staging):

• Verify if the plugin @darth-knoppix/gatsby-plugin-feed still works with the html field, given that we now process mdx and feed reader look as clean as before.

Couldn't fix, waiting for new version:

• The article http://localhost:8000/docs/hotchocolate/api-reference/language/ currently throws the error Invalid DOM property 'xmlnsXLink'. Did you mean 'xmlnsXlink' from the generated mermaid graphic. This is supposedly fixed in mdx 2.0 MDX needs to map some camelcase properties to what React expects mdx-js/mdx#1148

[michaelstaib]

Awesome, can't wait for this one :)

[rstaib]

Cannot wait to see it in action 👍

[alexandercarls]

The tabs currently look like this:

Desktop:

Mobile (iPhone SE):

[PascalSenn]

@alex

The tabs currently look like this:

Desktop:

Mobile (iPhone SE):

this is really cool!!

[PascalSenn]

we could even play around with a dropdown in the mobile version. this may scale better with more than three tabs

[alexandercarls]

we could even play around with a dropdown in the mobile version. this may scale better with more than three tabs

That is certainly an improvement. I decided not to do it yet, as we currently don't have more than three tabs and ExampleTabs is tailored for the three different approaches.

I would improve it when the scenario comes up :).

[rstaib]

Very cool to see progress on the tabs component, just let me know when I could start the review.

[alexandercarls]

@rstaib ready for review :)

[fredericbirke]

I checked rss/atom/feed files and they are valid and working:

They are even looking better than the current prod ones. Only thing we could improv are the headings for rss, the old ones link to the website if clicked, but this is more a nice to have.

There are still some issues, which all will be fixed in a follow up, because they provide the business value and are only small issies:
Tabs still don't look great:

Tabs with text before code look bad:

[fredericbirke]

There are still some design issues, all described in this follow up:
#2930

Everything else is fine!

[alexandercarls]

Added a new commit 7b770ce which fixed the horizontal scrolling in the pre tag for small viewports (i.e. language indicator and copy button no longer scroll) and added some margin when a tab begins with a paragraph.

[fredericbirke]

LGTM

[PascalSenn]

/AzurePipelines Run

[azure-pipelines]

Azure Pipelines successfully started running 2 pipeline(s).

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[rstaib]

Good work! Just a few comments.

[rstaib]

@fredericbirke at the moment we should not have any text in tabs. If so, then we should probably rewrite the section.

[rstaib]

@fredericbirke can you point me to the file where you found text inside a tab!? thanks

[alexandercarls]

@fredericbirke can you point me to the file where you found text inside a tab!? thanks

@rstaib
http://localhost:8000/docs/hotchocolate/defining-a-schema/unions-and-interfaces#interface-definition

[rstaib]

@fredericbirke we should rewrite that. But for now we keep it look ugly.

[rstaib]

Look good! Just one more thing :-D Could you please run yarn format so that prettier takes care of code styling.