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): Add playgroundPosition config for live codeblock #4328

Merged
merged 4 commits into from
Mar 5, 2021
Merged

feat(v2): Add playgroundPosition config for live codeblock #4328

merged 4 commits into from
Mar 5, 2021

Conversation

tokarchyn
Copy link
Contributor

Motivation

I would like to make section with live code examples in my project's documentation, but because of fact that result is shown after code editor and my examples code is large, it does not look pretty. That is why I decided to add possibility to configure @docusaurus/theme-live-codeblock plugin, so It will show result before the editor.

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

Add configuration in file "docusaurus.config.js" like this:

module.exports = {
  // ...
  themeConfig: {
    // ...
    liveCodeblock: {
      showResultBeforeEditor: true,
    },
  },
};

All live code blocks should change their appearance like this:
Screenshot_7

@tokarchyn tokarchyn requested review from lex111 and slorber as code owners March 2, 2021 22:08
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 2, 2021
@netlify
Copy link

netlify bot commented Mar 2, 2021

@netlify
Copy link

netlify bot commented Mar 2, 2021

Deploy preview for docusaurus-2 ready!

Built without sensitive environment variables with commit 2aaa692

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

@github-actions
Copy link

github-actions bot commented Mar 2, 2021

⚡️ Lighthouse report for the changes in this PR:

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

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

@github-actions
Copy link

github-actions bot commented Mar 2, 2021

Size Change: +20 B (0%)

Total Size: 532 kB

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

compressed-size-action

@@ -343,6 +345,25 @@ function MyPlayground(props) {
}
```

### Configuration

You can also configurate `@docusaurus/theme-live-codeblock` plugin with the following parameters:
Copy link
Collaborator

Choose a reason for hiding this comment

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

going to move this part to the API doc of the plugin because it's a less useful option

@lex111
Copy link
Contributor

lex111 commented Mar 4, 2021

Could it be better if it was customizable via metastring, like that?

```live editorFirst=true

```

slorber added 2 commits March 4, 2021 19:57
# Conflicts:
#	packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
#	packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
@slorber
Copy link
Collaborator

slorber commented Mar 4, 2021

@lex111 agree but can be implemented later in a separate PR. if someone needs this? Configuring this globally still has value

@slorber
Copy link
Collaborator

slorber commented Mar 4, 2021

@tokarchyn please let me push to your branch by checking the checkbox allowing maintainers to edit your fork.

I resolved the conflicts and also made the API more "future proof"

image

I'd appreciate a review regarding the styles with top/bottom, as I'm not 100% sure I handled the conflicts correctly:

image

image

@slorber
Copy link
Collaborator

slorber commented Mar 4, 2021

In case you want to update your branch yourself, my changes are pushed on branch slorber/playgroundPosition

@tokarchyn
Copy link
Contributor Author

@slorber I checked the checkbox right after creating pull request, so maybe there is something else I should do to allow edits by maintainers.
Nevertheless, I've already merged your branch into fork's master. Should I also squash the commits or do something else?

@slorber
Copy link
Collaborator

slorber commented Mar 4, 2021 via email

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Mar 5, 2021
@slorber slorber changed the title docs(v2): Add configuration parameter for live code blocks to allow putting Result before … feat(v2): Add playgroundPosition config for live codeblock Mar 5, 2021
@slorber
Copy link
Collaborator

slorber commented Mar 5, 2021

Thanks, let's merge this as is, seems good enough to me

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.

4 participants