misc(v2): make playground nicer (#1819)

* misc(v2): make code block nicer

* misc(v2): update changelog for code + playground

* misc(v2): update playground docs

CHANGELOG-2.x.md

@@ -10,6 +10,9 @@
   - Add `editUrl` option (URL for editing) to docs plugin. If this field is set, there will be an "Edit this page" link for each doc page. Example: 'https://github.com/facebook/docusaurus/edit/master/docs'.
 - More documentation ...
 - Slight tweaks to the Blog components - blog title is larger now
+- Code Blocks
+  - Change default theme from Night Owl to Palenight
+  - Slight tweaks to playground/preview components
 
 ## 2.0.0-alpha.25
 

packages/docusaurus-theme-classic/package.json

@@ -13,7 +13,7 @@
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
     "infima": "0.2.0-alpha.2",
-    "prism-react-renderer": "^0.1.7",
+    "prism-react-renderer": "^1.0.1",
     "react-toggle": "^4.0.2"
   },
   "peerDependencies": {

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

@@ -8,7 +8,7 @@
 import React, {useEffect, useState, useRef} from 'react';
 import classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
-import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
+import defaultTheme from 'prism-react-renderer/themes/palenight';
 import Clipboard from 'clipboard';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
@@ -52,7 +52,7 @@ export default ({children, className: languageClassName}) => {
   return (
     <Highlight
       {...defaultProps}
-      theme={prismTheme || nightOwlTheme}
+      theme={prismTheme || defaultTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (

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

@@ -1,6 +1,5 @@
 .codeBlock {
   border-radius: 0;
-  font-size: inherit;
   margin-bottom: 0;
   overflow: hidden;
   overflow-wrap: break-word;
@@ -12,25 +11,24 @@
 }
 
 .codeBlockWrapper:hover > .copyButton {
-  bottom: calc(var(--ifm-pre-padding) - 2px);
   visibility: visible;
   opacity: 1;
 }
 
 .copyButton {
-  position: absolute;
+  background: rgb(1, 22, 39);
-  right: var(--ifm-pre-padding);
-  bottom: calc(var(--ifm-pre-padding) - 4px);
-  padding: 4px 8px;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
-    bottom 200ms ease-in-out;
   border: 1px solid rgb(214, 222, 235);
   border-radius: var(--ifm-global-radius);
-  outline: none;
+  color: rgb(214, 222, 235);
   cursor: pointer;
   line-height: 12px;
-  background: rgb(1, 22, 39);
+  opacity: 0;
-  color: rgb(214, 222, 235);
+  outline: none;
+  padding: 4px 8px;
+  position: absolute;
+  right: var(--ifm-pre-padding);
+  top: var(--ifm-pre-padding);
+  visibility: hidden;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
+    bottom 200ms ease-in-out;
 }

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import React from 'react';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';

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

@@ -1,8 +1,6 @@
 .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-live-codeblock/package.json

@@ -11,7 +11,7 @@
     "@philpl/buble": "^0.19.7",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
-    "prism-react-renderer": "^0.1.7",
+    "prism-react-renderer": "^1.0.1",
     "react-live": "^2.1.2"
   },
   "peerDependencies": {

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -8,7 +8,7 @@
 import React, {useEffect, useState, useRef} from 'react';
 import classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
-import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
+import defaultTheme from 'prism-react-renderer/themes/palenight';
 import Clipboard from 'clipboard';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Playground from '@theme/Playground';
@@ -45,7 +45,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
       <Playground
         scope={{...React}}
         code={children.trim()}
-        theme={prismTheme || nightOwlTheme}
+        theme={prismTheme || defaultTheme}
         {...props}
       />
     );
@@ -64,7 +64,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
   return (
     <Highlight
       {...defaultProps}
-      theme={prismTheme || nightOwlTheme}
+      theme={prismTheme || defaultTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css

@@ -12,25 +12,24 @@
 }
 
 .codeBlockWrapper:hover > .copyButton {
-  bottom: calc(var(--ifm-pre-padding) - 2px);
   visibility: visible;
   opacity: 1;
 }
 
 .copyButton {
-  position: absolute;
+  background: rgb(1, 22, 39);
-  right: var(--ifm-pre-padding);
-  bottom: calc(var(--ifm-pre-padding) - 4px);
-  padding: 4px 8px;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
-    bottom 200ms ease-in-out;
   border: 1px solid rgb(214, 222, 235);
   border-radius: var(--ifm-global-radius);
-  outline: none;
+  color: rgb(214, 222, 235);
   cursor: pointer;
   line-height: 12px;
-  background: rgb(1, 22, 39);
+  opacity: 0;
-  color: rgb(214, 222, 235);
+  outline: none;
+  padding: 4px 8px;
+  position: absolute;
+  right: var(--ifm-pre-padding);
+  top: var(--ifm-pre-padding);
+  visibility: hidden;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
+    bottom 200ms ease-in-out;
 }

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js

@@ -7,6 +7,7 @@
 
 import * as React from 'react';
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
+import classnames from 'classnames';
 
 import styles from './styles.module.css';
 
@@ -17,9 +18,21 @@ function Playground({children, theme, transformCode, ...props}) {
       transformCode={transformCode || (code => `${code};`)}
       theme={theme}
       {...props}>
-      <div className={styles.playgroundHeader}>LIVE EDITOR</div>
+      <div
+        className={classnames(
+          styles.playgroundHeader,
+          styles.playgroundEditorHeader,
+        )}>
+        Live Editor
+      </div>
       <LiveEditor />
-      <div className={styles.playgroundHeader}>PREVIEW</div>
+      <div
+        className={classnames(
+          styles.playgroundHeader,
+          styles.playgroundPreviewHeader,
+        )}>
+        Result
+      </div>
       <div className={styles.playgroundPreview}>
         <LivePreview />
         <LiveError />

packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css

@@ -6,15 +6,26 @@
  */
 
 .playgroundHeader {
-  padding: 4px 8px;
+  letter-spacing: 0.08rem;
-  background: #1a2d3c;
+  padding: 0.75rem;
   text-transform: uppercase;
-  color: rgb(225, 230, 239, .4);
-  font-size: 11px;
   font-weight: bold;
 }
 
-.playgroundPreview {
+.playgroundEditorHeader {
-  position: relative;
+  background: rgb(32, 35, 42);
-  padding: 16px 16px 0;
+  color: #999;
+}
+
+.playgroundPreviewHeader {
+  background: rgb(236, 236, 236);
+  color: rgb(109, 109, 109);
+}
+
+.playgroundPreview {
+  border: 1px solid #f0f0f0;
+  border-bottom-left-radius: var(--ifm-global-radius);
+  border-bottom-right-radius: var(--ifm-global-radius);
+  position: relative;
+  padding: 1rem;
 }

website/docs/markdown-features.mdx

@@ -150,8 +150,7 @@ If you want to reference another document file, you should use the name of the d
 For example, if you are in `doc2.md` and you want to reference `doc1.md` and `folder/doc3.md`:
 
 ```md
-I am referencing a [document](doc1.md).
+I am referencing a [document](doc1.md). Reference to another [document in a folder](folder/doc3.md)
-Reference to another [document in a folder](folder/doc3.md)
 ```
 
 One benefit of this approach is that the links to external files will still work if you are viewing the file on GitHub.
@@ -180,12 +179,12 @@ Example:
 // docusaurus.config.js
 module.exports = {
   themeConfig: {
-    prismTheme: require('prism-react-renderer/themes/vsDark')
+    prismTheme: require('prism-react-renderer/themes/palenight'),
-  }
+  },
 };
 ```
 
-By default, the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js).
+By default, the Prism theme we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js).
 
 ### Interactive code editor
 
@@ -258,5 +257,3 @@ function Clock(props) {
   );
 }
 ```
-
-**Note:** The React Live component is rather big in bundle size. It is an opt-in.

yarn.lock

@@ -12612,10 +12612,10 @@ prism-react-renderer@^0.1.0:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-0.1.6.tgz#c9216baa234fab1c234209fcdaf0cd23a01c50a9"
   integrity sha512-uZJn5wrygCH0ZMue+2JRd0qJharrmpxa6/uK7deKgvCtJFFE+VsyvJ49LS8/ATt0mlAJS6vFQTDvhXBEXsda+A==
 
-prism-react-renderer@^0.1.7:
+prism-react-renderer@^1.0.1:
-  version "0.1.7"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-0.1.7.tgz#dc273d0cb6e4a498ba0775094e9a8b01a3ad2eaa"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.1.tgz#98a437b01a5e48f140ae2321a95fa6693d4fe9de"
-  integrity sha512-EhnM0sYfLK103ASK0ViSv0rta//ZGB0dBA9TiFyOvA+zOj5peLmGEG01sLEDwl9sMe+gSqncInafBe1VFTCMvA==
+  integrity sha512-EDdbBEoG9xD1zhN3pKYxTc10ifpTV2rqJBKpCTKRVAxNE3YP1XVp6Ewa+ydTnYALQOmHWsNVVJC0zzA9fafbew==
 
 prismjs@^1.17.1:
   version "1.17.1"