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

fix(v2): make code blocks more standalone #4315

Merged
merged 4 commits into from
Mar 4, 2021

Conversation

lex111
Copy link
Contributor

@lex111 lex111 commented Feb 28, 2021

Motivation

Right now, when using CodeBlock component directly in documents, the font size will be larger than it should be.

For example at https://v2.docusaurus.io/docs/next/i18n/crowdin#example-configuration

Regular using via Markdown syntax Directly using of CodeBlock
image image

I propose remove MDX wrapper around code blocks, and move its styles in CodeBlock component itself. This way, no matter how you use code blocks, they will look the same.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Compare results:

Current - https://v2.docusaurus.io/docs/next/i18n/crowdin#example-configuration
Preview - https://deploy-preview-4315--docusaurus-2.netlify.app/classic/docs/next/i18n/crowdin#example-configuration

To make sure that the new changes did not break anything, in the example page I added several code blocks created in different ways: https://deploy-preview-4315--docusaurus-2.netlify.app/classic/examples/markdownPageExample#code-block-test

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@lex111 lex111 added the pr: bug fix This PR fixes a bug in a past release. label Feb 28, 2021
@lex111 lex111 requested a review from slorber as a code owner February 28, 2021 11:08
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 28, 2021
@netlify
Copy link

netlify bot commented Feb 28, 2021

[V1] Deploy preview success

Built with commit 669332b

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

@github-actions
Copy link

github-actions bot commented Feb 28, 2021

Size Change: +55 B (0%)

Total Size: 532 kB

Filename Size Change
website/build/assets/css/styles.********.css 87.4 kB +37 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/build/assets/js/main.********.js 359 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus/index.html 60.3 kB +18 B (0%)
website/build/docs/introduction/index.html 235 B 0 B
website/build/index.html 25.4 kB 0 B

compressed-size-action

@netlify
Copy link

netlify bot commented Feb 28, 2021

Deploy preview for docusaurus-2 ready!

Built with commit 669332b

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

@github-actions
Copy link

github-actions bot commented Feb 28, 2021

⚡️ Lighthouse report for the changes in this PR:

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

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

@lex111 lex111 force-pushed the lex111/code-blocks-drop-mdx-container branch from 0fd2f09 to 711b78b Compare February 28, 2021 18:59
@lex111 lex111 changed the title fix(v2): make code blocks styles standalone fix(v2): make code blocks more standalone Feb 28, 2021
@@ -25,7 +23,10 @@ const MDXComponents: MDXComponentsObject = {
return children;
},
a: (props) => <Link {...props} />,
pre: (props) => <div className={styles.mdxCodeBlock} {...props} />,
pre: (props: any) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@slorber here, as usual, I need your help with correct typing 🙃

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm I don't find a very good way to type this, but I don't think this is a big deal anyway

@lex111 lex111 added this to the v2.0.0-alpha.71 milestone Mar 4, 2021
# Conflicts:
#	packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
#	website/src/pages/examples/markdownPageExample.md
@slorber
Copy link
Collaborator

slorber commented Mar 4, 2021

LGTM!

@slorber slorber merged commit a4b409c into master Mar 4, 2021
@slorber slorber deleted the lex111/code-blocks-drop-mdx-container branch August 17, 2021 17:50
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: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants