mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-03 03:12:35 +02:00
refactor(v2): move livecodeblock as plugin (#1566)
* refactor(v2): move livecodeblock as plugin * tweak from rebase * nits * nits * dep
This commit is contained in:
Endi
GitHub
parent
a0777f7c57
commit
5362c2cda2
17 changed files with 208 additions and 72 deletions
|
|
@ -20,7 +20,7 @@
|
|||
"classnames": "^2.2.6",
|
||||
"react": "^16.8.4",
|
||||
"react-dom": "^16.8.4",
|
||||
"react-router-config": "^5.0.0"
|
||||
"react-router-config": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
|
|
|
|||
|
|
@ -6,10 +6,15 @@
|
|||
*/
|
||||
|
||||
module.exports = function preset(context, opts = {}) {
|
||||
const {siteConfig = {}} = context;
|
||||
const {themeConfig} = siteConfig;
|
||||
const {algolia} = themeConfig;
|
||||
|
||||
return {
|
||||
themes: [
|
||||
['@docusaurus/theme-classic', opts.theme],
|
||||
'@docusaurus/theme-search-algolia',
|
||||
// Don't add this if algolia config is not defined
|
||||
algolia && '@docusaurus/theme-search-algolia',
|
||||
],
|
||||
plugins: [
|
||||
['@docusaurus/plugin-content-docs', opts.docs],
|
||||
|
|
|
|||
|
|
@ -11,12 +11,8 @@
|
|||
"@mdx-js/mdx": "^1.0.20",
|
||||
"@mdx-js/react": "^1.0.20",
|
||||
"classnames": "^2.2.6",
|
||||
"docsearch.js": "^2.5.2",
|
||||
"infima": "0.2.0-alpha.1",
|
||||
"prism-react-renderer": "^0.1.6",
|
||||
"react-live": "^2.1.2",
|
||||
"react-loadable": "^5.5.0",
|
||||
"react-loadable-visibility": "^2.5.1",
|
||||
"react-toggle": "^4.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -7,29 +7,11 @@
|
|||
|
||||
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/Playground'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
export default ({children, className: languageClassName, live, ...props}) => {
|
||||
if (live) {
|
||||
return (
|
||||
<Playground
|
||||
scope={{...React}}
|
||||
code={children.trim()}
|
||||
theme={nightOwlTheme}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default ({children, className: languageClassName}) => {
|
||||
const language =
|
||||
languageClassName && languageClassName.replace(/language-/, '');
|
||||
return (
|
||||
|
|
|
|||
45
packages/docusaurus-theme-live-codeblock/README.md
Normal file
45
packages/docusaurus-theme-live-codeblock/README.md
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
## Docusaurus Live Codeblock
|
||||
|
||||
You can create live code editors with a code block `live` meta string.
|
||||
|
||||
Install
|
||||
```bash
|
||||
npm i @docusaurus/theme-live-codeblock # or yarn add @docusaurus/theme-live-codeblock
|
||||
```
|
||||
|
||||
Modify your `docusaurus.config.js`
|
||||
|
||||
```diff
|
||||
module.exports = {
|
||||
...
|
||||
+ themes: ['@docusaurus/theme-live-codeblock'],
|
||||
presets: ['@docusaurus/preset-classic']
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx live
|
||||
function Clock(props) {
|
||||
const [date, setDate] = useState(new Date());
|
||||
useEffect(() => {
|
||||
var timerID = setInterval(() => tick(), 1000);
|
||||
|
||||
return function cleanup() {
|
||||
clearInterval(timerID);
|
||||
};
|
||||
});
|
||||
|
||||
function tick() {
|
||||
setDate(new Date());
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>It is {date.toLocaleTimeString()}.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
25
packages/docusaurus-theme-live-codeblock/package.json
Normal file
25
packages/docusaurus-theme-live-codeblock/package.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "@docusaurus/theme-live-codeblock",
|
||||
"version": "2.0.0-alpha.18",
|
||||
"description": "Docusaurus Live CodeBlock",
|
||||
"main": "src/index.js",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"prism-react-renderer": "^0.1.6",
|
||||
"react-live": "^2.1.2",
|
||||
"react-loadable": "^5.5.0",
|
||||
"react-loadable-visibility": "^2.5.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@docusaurus/core": "^2.0.0",
|
||||
"react": "^16.8.4",
|
||||
"react-dom": "^16.8.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
}
|
||||
18
packages/docusaurus-theme-live-codeblock/src/index.js
Normal file
18
packages/docusaurus-theme-live-codeblock/src/index.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function() {
|
||||
return {
|
||||
name: 'docusaurus-theme-live-codeblock',
|
||||
|
||||
getThemePath() {
|
||||
return path.resolve(__dirname, './theme');
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* 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 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/Playground'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
export default ({children, className: languageClassName, live, ...props}) => {
|
||||
if (live) {
|
||||
return (
|
||||
<Playground
|
||||
scope={{...React}}
|
||||
code={children.trim()}
|
||||
theme={nightOwlTheme}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const language =
|
||||
languageClassName && languageClassName.replace(/language-/, '');
|
||||
return (
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
theme={nightOwlTheme}
|
||||
code={children.trim()}
|
||||
language={language}>
|
||||
{({className, style, tokens, getLineProps, getTokenProps}) => (
|
||||
<pre className={classnames(className, styles.codeBlock)} style={style}>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({line, key: i})}>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({token, key})} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.codeBlock {
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
@ -61,9 +61,9 @@
|
|||
"react-helmet": "^6.0.0-beta",
|
||||
"react-loadable": "^5.5.0",
|
||||
"react-loadable-ssr-addon": "^0.1.8",
|
||||
"react-router": "^5.0.0",
|
||||
"react-router-config": "^5.0.0",
|
||||
"react-router-dom": "^5.0.0",
|
||||
"react-router": "^5.0.1",
|
||||
"react-router-config": "^5.0.1",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"semver": "^6.0.0",
|
||||
"shelljs": "^0.8.3",
|
||||
"static-site-generator-webpack-plugin": "^3.4.2",
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
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 -->
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"docs": {
|
||||
"Docusaurus": ["doc1", "doc2", "doc3"],
|
||||
"Docusaurus Cool": ["live-coding"],
|
||||
"Utilities": ["style-guide"]
|
||||
},
|
||||
"docs-other": {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Docusaurus 2 uses modern tooling to help you compose your interactive documentat
|
|||
|
||||
In this section, we'd like to introduce you to the tools we've picked that we believe will help you build powerful documentation. Let us walk you through with an example.
|
||||
|
||||
**Note:** All the following content assumes you are using `docusaurus-plugin-content-docs` or `docusaurus-preset-classic` (which contains `docusaurus-plugin-content-docs`).
|
||||
**Note:** All the following content assumes you are using `docusaurus-preset-classic`.
|
||||
|
||||
## Using Markdown
|
||||
|
||||
|
|
@ -190,9 +190,25 @@ console.log('Every repo must come with a mascot.');
|
|||
|
||||
**Work in Progress** Currently the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js). We will support customized theme in a future version.
|
||||
|
||||
## Live Editor
|
||||
## React Live Editor
|
||||
|
||||
You can create live code editors by creating a code block with `live` attached to the language meta string.
|
||||
You can also create a react live editor by installing a plugin.
|
||||
|
||||
```bash
|
||||
npm i @docusaurus/theme-live-codeblock
|
||||
```
|
||||
|
||||
Add it to your `docusaurus.config.js`.
|
||||
|
||||
```diff
|
||||
module.exports = {
|
||||
...
|
||||
+ themes: ['@docusaurus/theme-live-codeblock'],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Then create a code block with `live` attached to the language meta string.
|
||||
|
||||
```jsx live
|
||||
function Clock(props) {
|
||||
|
|
@ -242,4 +258,4 @@ function Clock(props) {
|
|||
}
|
||||
```
|
||||
|
||||
**Work in Progress** The React Live component is rather big. We want to make it an opt-in by moving it to a plugin.
|
||||
**Note** The React Live component is rather big in bundle size. It is an opt-in.
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ module.exports = {
|
|||
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
|
||||
},
|
||||
},
|
||||
themes: ['@docusaurus/theme-live-codeblock'],
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
|
|
|
|||
51
yarn.lock
51
yarn.lock
|
|
@ -763,7 +763,7 @@
|
|||
pirates "^4.0.0"
|
||||
source-map-support "^0.5.9"
|
||||
|
||||
"@babel/runtime@^7.1.2":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0":
|
||||
version "7.4.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
|
||||
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
|
||||
|
|
@ -4349,14 +4349,6 @@ create-react-context@0.2.2:
|
|||
fbjs "^0.8.0"
|
||||
gud "^1.0.0"
|
||||
|
||||
create-react-context@^0.2.2:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
|
||||
integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
|
||||
dependencies:
|
||||
fbjs "^0.8.0"
|
||||
gud "^1.0.0"
|
||||
|
||||
cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
|
||||
|
|
@ -4964,7 +4956,7 @@ dns-txt@^2.0.2:
|
|||
dependencies:
|
||||
buffer-indexof "^1.0.0"
|
||||
|
||||
docsearch.js@^2.5.2, docsearch.js@^2.6.3:
|
||||
docsearch.js@^2.6.3:
|
||||
version "2.6.3"
|
||||
resolved "https://registry.yarnpkg.com/docsearch.js/-/docsearch.js-2.6.3.tgz#57cb4600d3b6553c677e7cbbe6a734593e38625d"
|
||||
integrity sha512-GN+MBozuyz664ycpZY0ecdQE0ND/LSgJKhTLA0/v3arIS3S1Rpf2OJz6A35ReMsm91V5apcmzr5/kM84cvUg+A==
|
||||
|
|
@ -9453,6 +9445,15 @@ min-document@^2.19.0:
|
|||
dependencies:
|
||||
dom-walk "^0.1.0"
|
||||
|
||||
mini-create-react-context@^0.3.0:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
|
||||
integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.0"
|
||||
gud "^1.0.0"
|
||||
tiny-warning "^1.0.2"
|
||||
|
||||
mini-css-extract-plugin@^0.4.1:
|
||||
version "0.4.5"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.5.tgz#c99e9e78d54f3fa775633aee5933aeaa4e80719a"
|
||||
|
|
@ -11558,36 +11559,36 @@ react-loadable@^5.5.0:
|
|||
dependencies:
|
||||
prop-types "^15.5.0"
|
||||
|
||||
react-router-config@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.0.0.tgz#3d7e298dc64479bf9e1cc77080b8778e9a8d966c"
|
||||
integrity sha512-si94cIg3HRXgwZB4vJGW6xkxOTMwCe1BXyBjkLstqZ+1rpqqAvo280BeQ8ZjIyYgiM/TDOa5Yu+HC4swUwri1w==
|
||||
react-router-config@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.0.1.tgz#e6663010f42aa5e39c2f21412d8f958f6866e48a"
|
||||
integrity sha512-dgM4+aW08eMWJYnmYWRvaArOrvwdl440W2m3y6IcGUSizXD5BTg/OcJ//z8kTiHnLG+uOwXRiCnKjWQ7IkvNnA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
|
||||
react-router-dom@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
|
||||
integrity sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==
|
||||
react-router-dom@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
|
||||
integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
history "^4.9.0"
|
||||
loose-envify "^1.3.1"
|
||||
prop-types "^15.6.2"
|
||||
react-router "5.0.0"
|
||||
react-router "5.0.1"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router@5.0.0, react-router@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d"
|
||||
integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==
|
||||
react-router@5.0.1, react-router@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
|
||||
integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
create-react-context "^0.2.2"
|
||||
history "^4.9.0"
|
||||
hoist-non-react-statics "^3.1.0"
|
||||
loose-envify "^1.3.1"
|
||||
mini-create-react-context "^0.3.0"
|
||||
path-to-regexp "^1.7.0"
|
||||
prop-types "^15.6.2"
|
||||
react-is "^16.6.0"
|
||||
|
|
@ -13465,7 +13466,7 @@ tiny-lr@^1.1.1:
|
|||
object-assign "^4.1.0"
|
||||
qs "^6.4.0"
|
||||
|
||||
tiny-warning@^1.0.0:
|
||||
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
|
||||
integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue