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.

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

feat(v2): ability to "escape" JSX in MDX files as code blocks #4278

Merged
merged 3 commits into from Feb 24, 2021

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Feb 23, 2021

Motivation

Crowdin just added support for the .mdx extension.
It is not real MDX support, but they now interpret .mdx files as md instead of plain text.

The problem is that external tools like Crowdin totally mess-up with the JSX when we download back the translations.

Simple JSX like <UserName name="seb"/> works (ie string props), but as soon as you start to use prop={{x,y,z}} it messes-up.

The idea:

  • Ability to wrap problematic jsx fragments into a special code block
  • Crowdin sees a code block on mdx source upload => leaves it untouched, does not try to parse it as html
  • Add a remark plugin to "unwrap" the code blocks so that JSX fragments remains interpreted inside Docusaurus

Note wrapping in this escape code block is an escape hatch for the mdx + Crowdin (or maybe other saas?) integrations and should be avoided in most cases, as it:

  • opt-out of mdx syntax highlighting in IDEs
  • opt-out of Prettier formatting the JSX fragments

@yangshun and Titus from MDX seemed to agree it is a viable workaround

Open for other names for the code block, currently choose: mdx-code-block

Can validate that the current doc changes will work for Crowdin to not mess-up with our own site.
Will implement tomorrow the remark plugin

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Feb 23, 2021
@slorber slorber requested a review from lex111 as a code owner February 23, 2021 19:13
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 23, 2021
@netlify
Copy link

netlify bot commented Feb 23, 2021

[V1] Deploy preview success

Built with commit f7e2d34

https://deploy-preview-4278--docusaurus-1.netlify.app

@github-actions
Copy link

github-actions bot commented Feb 23, 2021

Size Change: 0 B

Total Size: 544 kB

ℹ️ View Unchanged
Filename Size Change
website/build/assets/css/styles.********.css 87.1 kB 0 B
website/build/assets/js/main.********.js 370 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus/index.html 60.5 kB 0 B
website/build/docs/introduction/index.html 235 B 0 B
website/build/index.html 25.6 kB 0 B

compressed-size-action

@netlify
Copy link

netlify bot commented Feb 23, 2021

Deploy preview for docusaurus-2 ready!

Built with commit f7e2d34

https://deploy-preview-4278--docusaurus-2.netlify.app

@github-actions
Copy link

github-actions bot commented Feb 23, 2021

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟢 Performance 92
🟢 Accessibility 96
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-4278--docusaurus-2.netlify.app/classic/

@slorber slorber merged commit 6811a72 into master Feb 24, 2021
@lex111 lex111 added this to the v2.0.0-alpha.71 milestone Mar 1, 2021
This was referenced Mar 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants