3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-09 06:12:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* misc(v2): make code block nicer

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

* misc(v2): update playground docs
This commit is contained in:
Yangshun Tay 2019-10-10 15:12:17 -07:00 • committed by GitHub
parent ae678c9dad
commit 1c5a6ee244
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 75 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG-2.x.md
View file

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

2
packages/docusaurus-theme-classic/package.json
View file

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

4
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
View file

@ -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}) => (

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

@ -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;
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;
background: rgb(1, 22, 39);
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);
color: rgb(214, 222, 235);
opacity: 0;
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;
}

1
packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js
View file

@ -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';

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

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

2
packages/docusaurus-theme-live-codeblock/package.json
View file

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

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

@ -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}) => (

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

@ -12,25 +12,24 @@
}
.codeBlockWrapper:hover > .copyButton {
bottom: calc(var(--ifm-pre-padding) - 2px);
visibility: visible;
opacity: 1;
}
.copyButton {
position: absolute;
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;
background: rgb(1, 22, 39);
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);
color: rgb(214, 222, 235);
opacity: 0;
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;
}

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

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

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

@ -6,15 +6,26 @@
*/
.playgroundHeader {
padding: 4px 8px;
background: #1a2d3c;
letter-spacing: 0.08rem;
padding: 0.75rem;
text-transform: uppercase;
color: rgb(225, 230, 239, .4);
font-size: 11px;
font-weight: bold;
}
.playgroundPreview {
position: relative;
padding: 16px 16px 0;
.playgroundEditorHeader {
background: rgb(32, 35, 42);
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;
}

11
website/docs/markdown-features.mdx
View file

@ -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).
Reference to another [document in a folder](folder/doc3.md)
I am referencing a [document](doc1.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.

8
yarn.lock
View file

@ -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:
version "0.1.7"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-0.1.7.tgz#dc273d0cb6e4a498ba0775094e9a8b01a3ad2eaa"
integrity sha512-EhnM0sYfLK103ASK0ViSv0rta//ZGB0dBA9TiFyOvA+zOj5peLmGEG01sLEDwl9sMe+gSqncInafBe1VFTCMvA==
prism-react-renderer@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.1.tgz#98a437b01a5e48f140ae2321a95fa6693d4fe9de"
integrity sha512-EDdbBEoG9xD1zhN3pKYxTc10ifpTV2rqJBKpCTKRVAxNE3YP1XVp6Ewa+ydTnYALQOmHWsNVVJC0zzA9fafbew==
prismjs@^1.17.1:
version "1.17.1"