refactor(v2): move livecodeblock as plugin (#1566)

* refactor(v2): move livecodeblock as plugin

* tweak from rebase

* nits

* nits

* dep

packages/docusaurus-plugin-content-docs/package.json

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

packages/docusaurus-preset-classic/src/index.js

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

packages/docusaurus-theme-classic/package.json

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

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

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

packages/docusaurus-theme-live-codeblock/README.md

@@ -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>
+      );
+    }
+    ```

packages/docusaurus-theme-live-codeblock/package.json

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

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

@@ -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');
+    },
+  };
+};

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

@@ -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>
+  );
+};

packages/docusaurus-theme-live-codeblock/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/package.json

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

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

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

packages/docusaurus/templates/classic/sidebars.json

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