feat(v2): refactor live code to css modules (#1558)

* feat(v2): Refactor live code to css modules

* Add a piece in doc about live coding

* Resolve PR discussions

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -6,15 +6,16 @@
  */
 
 import React from 'react';
+import classnames from 'classnames';
 import LoadableVisibility from 'react-loadable-visibility/react-loadable';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
-
 import Loading from '@theme/Loading';
+import styles from './styles.module.css';
 
 /* Live playground is not small in size, lazy load it is better */
 const Playground = LoadableVisibility({
-  loader: () => import('@theme/components/Playground'),
+  loader: () => import('@theme/Playground'),
   loading: Loading,
 });
 
@@ -38,15 +39,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <pre
+        <pre className={classnames(className, styles.codeBlock)} style={style}>
-          className={className}
-          style={{
-            ...style,
-            overflow: 'hidden',
-            overflowWrap: 'break-word',
-            whiteSpace: 'pre-wrap',
-            fontSize: 'inherit',
-          }}>
           {tokens.map((line, i) => (
             <div key={i} {...getLineProps({line, key: i})}>
               {line.map((token, key) => (

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -0,0 +1,8 @@
+.codeBlock {
+  border-radius: 0;
+  font-size: inherit;
+  margin-bottom: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js

@@ -6,21 +6,11 @@
  */
 import React from 'react';
 import Link from '@docusaurus/Link';
-import CodeBlock from './components/CodeBlock';
+import CodeBlock from '@theme/CodeBlock';
+import styles from './styles.module.css';
 
 export default {
   code: CodeBlock,
   a: Link,
-  pre: props => (
+  pre: props => <pre className={styles.mdxCodeBlock} {...props} />,
-    <pre
-      className="pre"
-      style={{
-        backgroundColor: 'transparent',
-        fontFamily: 'inherit',
-        padding: 0,
-        boxSizing: 'border-box',
-      }}
-      {...props}
-    />
-  ),
 };

packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css

@@ -0,0 +1,9 @@
+.mdxCodeBlock {
+  background-color: transparent;
+  border: 0.5px solid rgba(31, 34, 39, .6);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: rgba(0,0,0,.1) 1px 1px 4px 1px;
+  box-sizing: border-box;
+  font-family: inherit;
+  padding: 0;
+}

packages/docusaurus-theme-classic/src/theme/Playground/index.js

@@ -17,14 +17,10 @@ function Playground({children, theme, transformCode, ...props}) {
       transformCode={transformCode || (code => `${code};`)}
       theme={theme}
       {...props}>
-      <div className={styles.editorHeaderContainer}>
+      <div className={styles.playgroundHeader}>LIVE EDITOR</div>
-        <div className={styles.headerTitle}>LIVE EDITOR</div>
+      <LiveEditor />
-      </div>
+      <div className={styles.playgroundHeader}>PREVIEW</div>
-      <LiveEditor className={styles.editorContainer} />
+      <div className={styles.playgroundPreview}>
-      <div className={styles.previewHeaderContainer}>
-        <div className={styles.headerTitle}>PREVIEW</div>
-      </div>
-      <div className={styles.previewContainer}>
         <LivePreview />
         <LiveError />
       </div>

packages/docusaurus-theme-classic/src/theme/Playground/styles.module.css

@@ -5,34 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.headerTitle {
+.playgroundHeader {
-  text-transform: uppercase;
-  color: #e1e6ef;
-  font-size: 11px;
-  font-weight: bold;
-  opacity: 0.4;
-}
-
-.editorHeaderContainer {
   padding: 4px 8px;
   background: #1a2d3c;
+  text-transform: uppercase;
+  color: rgb(225, 230, 239, .4);
+  font-size: 11px;
+  font-weight: bold;
 }
 
-.editorContainer {
+.playgroundPreview {
-  padding: 0;
-  border: 0;
-  outline: 0;
-}
-
-.previewHeaderContainer {
-  padding: 0 8px;
-  background: #1a2d3c;
-  height: 35px;
-  line-height: 34px;
-}
-
-.previewContainer {
   position: relative;
-  padding: 16px;
+  padding: 16px 16px 0;
-  border: 0.5px solid #011627;
 }

packages/docusaurus/templates/classic/docs/exampledoc5.md

@@ -1,6 +0,0 @@
----
-id: doc5
-title: Fifth Document
----
-
-Another one

packages/docusaurus/templates/classic/docs/live-coding.md

@@ -0,0 +1,14 @@
+---
+id: live-coding
+title: Live Coding with React Live
+---
+
+```js live
+var hello = 'We got live coding now';
+```
+
+Have you ever used [React Live](https://react-live.kitten.sh)? Try it. Imagine your users play with your code _live_. Really don't know a better way to get your users' hands dirty than sharing a coding block with them.
+
+Docusaurus now supports live coding components in-house, powered by React Live. To see how they can be used for an enriched learning experience, check out our users who are already using it:
+
+<!-- TODO: add links to sites who uses this feature creatively -->

packages/docusaurus/templates/classic/sidebars.json

@@ -1,6 +1,7 @@
 {
   "docs": {
     "Docusaurus": ["doc1", "doc2", "doc3"],
+    "Docusaurus Cool": ["live-coding"],
     "Utilities": ["style-guide"]
   },
   "docs-other": {