feat(v2): Add playgroundPosition config for live codeblock

[tokarchyn]

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:

[netlify]

[V1] Deploy preview failure

Built without sensitive environment variables with commit 2aaa692

https://app.netlify.com/sites/docusaurus-1/deploys/60413c6c12b374000779b8fa

[netlify]

Deploy preview for docusaurus-2 ready!

Built without sensitive environment variables with commit 2aaa692

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

[github-actions]

⚡️ 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]

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}

[slorber]

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

[lex111]

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

```live editorFirst=true

```

[slorber]

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

[slorber]

@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"

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

[slorber]

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

[tokarchyn]

@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]

Thanks that's ok Just let me know if it still works like you wanted Le jeu. 4 mars 2021 à 21:08, tokarchyn <notifications@github.com> a écrit :

…

@slorber <https://github.com/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? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4328 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PW3DUF6EDW2FPLC26DTB7SCBANCNFSM4YP2KLFA> .

[slorber]

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