feat(v2): rewrite docs loading strategy (#1092)

* feat(v2): rewrite docs loading strategy

* Prettify

* Lint

* Allow resolving from library root

* minor changes, refactor

* copyright header

v2/.eslintignore

@@ -2,3 +2,4 @@ generated
 __fixtures__
 dist
 node_modules
+build

v2/lib/core/App.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import React from 'react';
 import {renderRoutes} from 'react-router-config';
 
 import routes from '@generated/routes'; // eslint-disable-line
@@ -15,12 +16,34 @@ import docsSidebars from '@generated/docsSidebars'; // eslint-disable-line
 import pagesMetadatas from '@generated/pagesMetadatas'; // eslint-disable-line
 import siteConfig from '@generated/siteConfig'; //eslint-disable-line
 
-export default () =>
+import DocusaurusContext from '@docusaurus/context';
-  renderRoutes(routes, {
+
+const data = {
   blogMetadatas,
   docsMetadatas,
   docsSidebars,
   env,
   pagesMetadatas,
   siteConfig,
-  });
+};
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      setContext: context => {
+        this.setState(context);
+      },
+    };
+  }
+
+  render() {
+    return (
+      <DocusaurusContext.Provider value={{...data, ...this.state}}>
+        {renderRoutes(routes)}
+      </DocusaurusContext.Provider>
+    );
+  }
+}
+
+export default App;

v2/lib/docusaurus/context.js

@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+const DocusaurusContext = React.createContext({});
+
+export default DocusaurusContext;

v2/lib/docusaurus/head.js

@@ -0,0 +1,15 @@
+/**
+ * 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 Helmet from 'react-helmet';
+
+function Head(props) {
+  return <Helmet {...props} />;
+}
+
+export default Head;

v2/lib/load/routes.js

@@ -6,43 +6,51 @@
  */
 
 async function genRoutesConfig({
+  siteConfig = {},
   docsMetadatas = {},
   pagesMetadatas = [],
   blogMetadatas = [],
 }) {
+  const {docsUrl, baseUrl} = siteConfig;
   function genDocsRoute(metadata) {
     const {permalink, source} = metadata;
     return `
       {
-    path: ${JSON.stringify(permalink)},
+        path: '${permalink}',
         exact: true,
         component: Loadable({
-      loader: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
+          loader: () => import(/* webpackPrefetch: true */ '${source}'),
-        source,
-      )}),
           loading: Loading,
           render(loaded, props) {
             let Content = loaded.default;
             return (
-          <Doc {...props} metadata={${JSON.stringify(metadata)}}>
+              <DocBody {...props} metadata={${JSON.stringify(metadata)}}>
                 <Content />
-          </Doc>
+              </DocBody>
             );
           }
         })
       }`;
   }
 
+  const rootDocsUrl = baseUrl + docsUrl;
+  const docsRoutes = `
+  {
+    path: '${rootDocsUrl}',
+    component: Doc,
+    routes: [${Object.values(docsMetadatas)
+      .map(genDocsRoute)
+      .join(',')}],
+  }`;
+
   function genPagesRoute(metadata) {
     const {permalink, source} = metadata;
     return `
   {
-    path: ${JSON.stringify(permalink)},
+    path: '${permalink}',
     exact: true,
     component: Loadable({
-      loader: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
+      loader: () => import(/* webpackPrefetch: true */ '${source}'),
-        source,
-      )}),
       loading: Loading,
       render(loaded, props) {
         let Content = loaded.default;
@@ -62,16 +70,16 @@ async function genRoutesConfig({
       const {posts} = metadata;
       return `
   {
-    path: ${JSON.stringify(permalink)},
+    path: '${permalink}',
     exact: true,
     component: Loadable.Map({
       loader: {
         ${posts
           .map(
             (p, i) =>
-              `post${i}: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
+              `post${i}: () => import(/* webpackPrefetch: true */ '${
-                p.source,
+                p.source
-              )})`,
+              }')`,
           )
           .join(',\n\t\t\t\t')}
       },
@@ -92,12 +100,10 @@ async function genRoutesConfig({
 
     return `
   {
-    path: ${JSON.stringify(permalink)},
+    path: '${permalink}',
     exact: true,
     component: Loadable({
-      loader: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
+      loader: () => import(/* webpackPrefetch: true */ '${source}'),
-        source,
-      )}),
       loading: Loading,
       render(loaded, props) {
         let MarkdownContent = loaded.default;
@@ -111,30 +117,26 @@ async function genRoutesConfig({
   }`;
   }
 
-  const notFoundRoute = `,
+  const notFoundRoute = `
   {
     path: '*',
-    component: NotFound
+    component: NotFound,
   }`;
 
-  const docsRoutes = Object.values(docsMetadatas)
-    .map(genDocsRoute)
-    .join(',');
-
   return (
     `import React from 'react';\n` +
     `import Loadable from 'react-loadable';\n` +
     `import Loading from '@theme/Loading';\n` +
     `import Doc from '@theme/Doc';\n` +
+    `import DocBody from '@theme/DocBody';\n` +
     `import BlogPost from '@theme/BlogPost';\n` +
     `import BlogPage from '@theme/BlogPage';\n` +
     `import Pages from '@theme/Pages';\n` +
     `import NotFound from '@theme/NotFound';\n` +
-    `const routes = [${docsRoutes},${pagesMetadatas
+    `const routes = [${docsRoutes},
-      .map(genPagesRoute)
+      ${pagesMetadatas.map(genPagesRoute).join(',')},
-      .join(',')},${blogMetadatas
+      ${blogMetadatas.map(genBlogRoute).join(',')},
-      .map(genBlogRoute)
+      ${notFoundRoute}\n];\n` +
-      .join(',')}${notFoundRoute}\n];\n` +
     `export default routes;\n`
   );
 }

v2/lib/theme/BlogPage/index.js

@@ -5,35 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable */
+import React, {useContext} from 'react';
-import React from 'react';
 import {Link} from 'react-router-dom';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
-import Loadable from 'react-loadable';
 import Layout from '@theme/Layout'; // eslint-disable-line
 import BlogPost from '@theme/BlogPost'; // eslint-disable-line
-import Loading from '@theme/Loading';
 
-export default class BlogPage extends React.Component {
+import DocusaurusContext from '@docusaurus/context';
-  render() {
-    const {
-      metadata,
-      blogMetadatas,
-      language,
-      children,
-      siteConfig = {},
-    } = this.props;
-    const {posts} = metadata;
 
+function BlogPage(props) {
+  const context = useContext(DocusaurusContext);
+  const {blogMetadatas, language, siteConfig = {}} = context;
   const {baseUrl, favicon} = siteConfig;
+
   return (
-      <Layout {...this.props}>
+    <Layout>
-        <Helmet>
+      <Head>
-          <title>{'Blog'}</title>
+        <title>Blog</title>
         {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
         {language && <html lang={language} />}
         {language && <meta name="docsearch:language" content={language} />}
-        </Helmet>
+      </Head>
       <div>
         <ul>
           {blogMetadatas.map(metadata => (
@@ -42,9 +34,10 @@ export default class BlogPage extends React.Component {
             </li>
           ))}
         </ul>
-          {children}
+        {props.children}
       </div>
     </Layout>
   );
-  }
 }
+
+export default BlogPage;

v2/lib/theme/BlogPost/index.js

@@ -5,18 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable */
 import React from 'react';
 import {Link} from 'react-router-dom';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 import classnames from 'classnames';
 import Layout from '@theme/Layout'; // eslint-disable-line
 
+import DocusaurusContext from '@docusaurus/context';
+
 import styles from './styles.module.css';
-export default class BlogPost extends React.Component {
+
+class BlogPost extends React.Component {
   renderPostHeader() {
-    const {metadata, siteConfig} = this.props;
+    const {metadata} = this.context;
-    const {baseUrl} = siteConfig;
+    if (!metadata) {
+      return null;
+    }
+
     const {
       date,
       author,
@@ -80,19 +85,23 @@ export default class BlogPost extends React.Component {
   }
 
   render() {
-    const {metadata, children, siteConfig = {}} = this.props;
+    const {metadata = {}, siteConfig = {}} = this.context;
     const {baseUrl, favicon} = siteConfig;
     const {language, title} = metadata;
     return (
-      <Layout {...this.props}>
+      <Layout>
-        <Helmet defaultTitle={siteConfig.title}>
+        <Head defaultTitle={siteConfig.title}>
           {title && <title>{title}</title>}
           {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
           {language && <html lang={language} />}
-        </Helmet>
+        </Head>
         {this.renderPostHeader()}
-        {children}
+        {this.props.children}
       </Layout>
     );
   }
 }
+
+BlogPost.contextType = DocusaurusContext;
+
+export default BlogPost;

v2/lib/theme/Doc/index.js

@@ -5,74 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable */
+import React, {useContext} from 'react';
-import React from 'react';
+import {renderRoutes} from 'react-router-config';
-import {Link} from 'react-router-dom';
+import Head from '@docusaurus/head';
-import Helmet from 'react-helmet';
 
-import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
 import Footer from '@theme/Footer'; // eslint-disable-line
 import Navbar from '@theme/Navbar'; // eslint-disable-line
 import Sidebar from '@theme/Sidebar'; // eslint-disable-line
 
+import DocusaurusContext from '@docusaurus/context';
+
 import styles from './styles.module.css';
 
-class Doc extends React.Component {
+function Doc(props) {
-  render() {
+  const {metadata = {}, siteConfig = {}} = useContext(DocusaurusContext);
-    const {
+  const {route} = props;
-      docsMetadatas,
-      docsSidebars,
-      env,
-      location,
-      metadata,
-      pagesMetadatas,
-      siteConfig = {},
-      route,
-    } = this.props;
   const {language, version} = metadata;
   const {baseUrl, favicon} = siteConfig;
+
   return (
     <div>
-        <Helmet>
+      <Head>
         <title>{(metadata && metadata.title) || siteConfig.title}</title>
         {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
         {language && <html lang={language} />}
         {language && <meta name="docsearch:language" content={language} />}
         {version && <meta name="docsearch:version" content={version} />}
-        </Helmet>
+      </Head>
-        <Navbar
+      <Navbar />
-          docsMetadatas={docsMetadatas}
+      <Sidebar />
-          env={env}
-          metadata={metadata}
-          siteConfig={siteConfig}
-        />
-        <Sidebar
-          docsMetadatas={docsMetadatas}
-          docsSidebars={docsSidebars}
-          metadata={metadata}
-        />
       <div className={styles.mainContainer}>
-          <div className={styles.docContainer}>
+        <div className={styles.docContainer}>{renderRoutes(route.routes)}</div>
-            <div className={styles.docContent}>
+        <Footer />
-              <h1>{metadata.title}</h1>
-              {this.props.children}
-            </div>
-            <div className={styles.paginatorContainer}>
-              <DocsPaginator
-                docsMetadatas={docsMetadatas}
-                metadata={metadata}
-              />
-            </div>
-          </div>
-          <Footer
-            docsMetadatas={docsMetadatas}
-            location={location}
-            pagesMetadatas={pagesMetadatas}
-          />
       </div>
     </div>
   );
-  }
 }
 
 export default Doc;

v2/lib/theme/Doc/styles.module.css

@@ -13,11 +13,3 @@
   flex-grow: 1;
   padding: 0 40px;
 }
-
-.docContent {
-  margin-bottom: 48px;
-}
-
-.paginatorContainer {
-  margin: 48px 0;
-}

v2/lib/theme/DocBody/index.js

@@ -0,0 +1,37 @@
+/**
+ * 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, {useContext, useEffect} from 'react';
+
+import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
+import DocusaurusContext from '@docusaurus/context';
+
+import styles from './styles.module.css';
+
+function DocBody(props) {
+  const {children, metadata} = props;
+  const context = useContext(DocusaurusContext);
+  useEffect(() => {
+    context.setContext({
+      metadata,
+    });
+  }, []);
+
+  return (
+    <div>
+      <div className={styles.docContent}>
+        <h1>{metadata.title}</h1>
+        {children}
+      </div>
+      <div className={styles.paginatorContainer}>
+        <DocsPaginator />
+      </div>
+    </div>
+  );
+}
+
+export default DocBody;

v2/lib/theme/DocBody/styles.module.css

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+.docContent {
+  margin-bottom: 48px;
+  min-height: calc(100vh - 50px);
+}
+
+.paginatorContainer {
+  margin: 48px 0;
+}

v2/lib/theme/DocsPaginator/index.js

@@ -5,14 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useContext} from 'react';
 import {Link} from 'react-router-dom';
 
+import DocusaurusContext from '@docusaurus/context';
+
 import styles from './styles.module.css';
 
-export default class DocsPaginator extends React.Component {
+function DocsPaginator() {
-  render() {
+  const context = useContext(DocusaurusContext);
-    const {docsMetadatas, metadata} = this.props;
+  const {docsMetadatas, metadata} = context;
+  if (!metadata) {
+    return null;
+  }
+
   return (
     <div className={styles.paginatorContainer}>
       <div>
@@ -49,5 +55,6 @@ export default class DocsPaginator extends React.Component {
       </div>
     </div>
   );
-  }
 }
+
+export default DocsPaginator;

v2/lib/theme/Footer/index.js

@@ -5,12 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useContext} from 'react';
 import {Link} from 'react-router-dom';
 
+import DocusaurusContext from '@docusaurus/context';
+
 import styles from './styles.module.css';
 
-function Footer(props) {
+function Footer() {
+  const context = useContext(DocusaurusContext);
+  const {pagesMetadatas} = context;
+
   return (
     <footer className={styles.footer}>
       <section className={styles.footerRow}>
@@ -78,7 +83,7 @@ function Footer(props) {
         <div className={styles.footerColumn}>
           <h3 className={styles.footerColumnTitle}>Pages</h3>
           <ul className={styles.footerList}>
-            {props.pagesMetadatas.map(metadata => (
+            {pagesMetadatas.map(metadata => (
               <li key={metadata.permalink} className={styles.footerListItem}>
                 <Link className={styles.footerLink} to={metadata.permalink}>
                   {metadata.permalink}

v2/lib/theme/Layout/index.js

@@ -12,33 +12,14 @@ import Navbar from '@theme/Navbar'; // eslint-disable-line
 
 import './styles.css';
 
-/* eslint-disable react/prefer-stateless-function */
+function Layout({children}) {
-export default class Layout extends React.Component {
-  render() {
-    const {
-      children,
-      pagesMetadatas = [],
-      docsMetadatas = {},
-      env,
-      siteConfig,
-      location,
-      metadata,
-    } = this.props;
   return (
     <div>
-        <Navbar
+      <Navbar />
-          docsMetadatas={docsMetadatas}
-          env={env}
-          metadata={metadata}
-          siteConfig={siteConfig}
-        />
       {children}
-        <Footer
+      <Footer />
-          docsMetadatas={docsMetadatas}
-          location={location}
-          pagesMetadatas={pagesMetadatas}
-        />
     </div>
   );
-  }
 }
+
+export default Layout;

v2/lib/theme/Loading/index.js

@@ -14,6 +14,7 @@ export default props => {
     console.log(props.error);
     return <div align="center">Error</div>;
   }
+
   if (props.pastDelay) {
     return (
       <div className={styles.loader}>
@@ -22,5 +23,6 @@ export default props => {
       </div>
     );
   }
+
   return null;
 };

v2/lib/theme/Markdown/index.js

@@ -5,13 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable */
+import React, {useContext} from 'react';
+import Head from '@docusaurus/head';
 
-import React from 'react';
+import DocusaurusContext from '@docusaurus/context';
-import Helmet from 'react-helmet';
 
 function Markdown(props) {
-  const {siteConfig} = props;
+  const context = useContext(DocusaurusContext);
+  const {siteConfig} = context;
   const highlight = Object.assign(
     {},
     {
@@ -30,9 +31,9 @@ function Markdown(props) {
 
   return (
     <div>
-      <Helmet>
+      <Head>
         <link rel="stylesheet" type="text/css" href={highlightThemeURL} />
-      </Helmet>
+      </Head>
       <div>{props.children}</div>
     </div>
   );

v2/lib/theme/Navbar/index.js

@@ -5,14 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useContext} from 'react';
 import {NavLink} from 'react-router-dom';
 
 import Search from '@theme/Search';
+import DocusaurusContext from '@docusaurus/context';
 import styles from './styles.module.css';
 
 function Navbar(props) {
-  const {siteConfig = {}, env = {}, metadata = {}, docsMetadatas = {}} = props;
+  const context = useContext(DocusaurusContext);
+  const {
+    siteConfig = {},
+    env = {},
+    metadata = {},
+    docsMetadatas = {},
+  } = context;
   const {baseUrl, headerLinks, headerIcon, algolia} = siteConfig;
   const {language: thisLanguage, version: thisVersion} = metadata;
 

v2/lib/theme/NotFound.js

@@ -8,10 +8,9 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 
-export default class NotFound extends React.Component {
+function NotFound() {
-  render() {
   return (
-      <Layout {...this.props}>
+    <Layout>
       <div>404 Page Not Found</div>
       <div>
         <img
@@ -21,5 +20,6 @@ export default class NotFound extends React.Component {
       </div>
     </Layout>
   );
-  }
 }
+
+export default NotFound;

v2/lib/theme/Pages/index.js

@@ -5,26 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable */
+import React, {useContext} from 'react';
-import React from 'react';
+import Head from '@docusaurus/head';
-import {Link} from 'react-router-dom';
-import Helmet from 'react-helmet';
 import Layout from '@theme/Layout'; // eslint-disable-line
 
-export default class Pages extends React.Component {
+import DocusaurusContext from '@docusaurus/context';
-  render() {
+
-    const {metadata, children, siteConfig = {}} = this.props;
+function Pages({children}) {
+  const context = useContext(DocusaurusContext);
+  const {metadata = {}, siteConfig = {}} = context;
   const {baseUrl, favicon} = siteConfig;
   const {language} = metadata;
+
   return (
-      <Layout {...this.props}>
+    <Layout>
-        <Helmet defaultTitle={siteConfig.title}>
+      <Head defaultTitle={siteConfig.title}>
         {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
         {language && <html lang={language} />}
         {language && <meta name="docsearch:language" content={language} />}
-        </Helmet>
+      </Head>
       {children}
     </Layout>
   );
-  }
 }
+
+export default Pages;

v2/lib/theme/Search/index.js

@@ -7,18 +7,20 @@
 
 import React from 'react';
 
+import DocusaurusContext from '@docusaurus/context';
+
 import './styles.css';
 
 class Search extends React.Component {
-  constructor() {
+  constructor(props) {
-    super();
+    super(props);
     this.state = {
       enabled: true,
     };
   }
 
   componentDidMount() {
-    const {siteConfig = {}, metadata = {}} = this.props;
+    const {siteConfig = {}, metadata = {}} = this.context;
     const {version: thisVersion, language: thisLanguage} = metadata;
     const {algolia} = siteConfig;
 
@@ -58,4 +60,6 @@ class Search extends React.Component {
   }
 }
 
+Search.contextType = DocusaurusContext;
+
 export default Search;

v2/lib/theme/Sidebar/index.js

@@ -5,14 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useContext} from 'react';
 
+import DocusaurusContext from '@docusaurus/context';
 import SidebarLink from './SidebarLink';
 import SidebarCategory from './SidebarCategory';
+
 import styles from './styles.module.css';
 
-function Sidebar(props) {
+function Sidebar() {
-  const {metadata, docsSidebars, docsMetadatas} = props;
+  const context = useContext(DocusaurusContext);
+  const {metadata = {}, docsSidebars, docsMetadatas} = context;
   const {sidebar, language} = metadata;
 
   if (!sidebar) {

v2/lib/webpack/base.js

@@ -71,10 +71,10 @@ module.exports = function createBaseConfig(props, isServer) {
     .set('@build', outDir)
     .set('@generated', path.resolve(__dirname, '../core/generated'))
     .set('@core', path.resolve(__dirname, '../core'))
+    .set('@docusaurus', path.resolve(__dirname, '../docusaurus'))
     .end()
-    .modules // prioritize our own node modules
+    .modules.add(path.resolve(__dirname, '../../node_modules')) // Prioritize our own node modules.
-    .add(path.resolve(__dirname, '../../node_modules'))
+    .add(path.resolve(siteDir, 'node_modules')); // load user node_modules
-    .add('node_modules');
 
   function applyBabel(rule) {
     rule

v2/lib/webpack/loaders/markdown/index.js

@@ -150,7 +150,7 @@ module.exports = function(fileString) {
 import React from 'react';
 import Markdown from '@theme/Markdown';
 export default () => (
-  <Markdown siteConfig={${JSON.stringify(siteConfig)}}>
+  <Markdown>
     <div dangerouslySetInnerHTML={{__html: ${JSON.stringify(html)}}} />
   </Markdown>
 );`;

v2/package.json

@@ -80,6 +80,7 @@
     "mini-css-extract-plugin": "^0.4.1",
     "portfinder": "^1.0.13",
     "prismjs": "^1.15.0",
+    "react-helmet": "^5.2.0",
     "react-loadable": "^5.5.0",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.3.1",
@@ -99,8 +100,7 @@
   },
   "peerDependencies": {
     "react": "^16.7.0-alpha.0",
-    "react-dom": "^16.7.0-alpha.0",
+    "react-dom": "^16.7.0-alpha.0"
-    "react-helmet": "^5.2.0"
   },
   "engines": {
     "node": ">=8"

v2/test/__fixtures__/simple-site/pages/hello/world.js

@@ -6,15 +6,15 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class World extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>World</title>
-        </Helmet>
+        </Head>
         <div>Hello World </div>
       </div>
     );

v2/test/__fixtures__/simple-site/pages/index.js

@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class Home extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>Home</title>
           <link rel="stylesheet" type="text/css" href="/css/basic.css" />
-        </Helmet>
+        </Head>
         <div>Home ... </div>
       </div>
     );

v2/test/__fixtures__/translated-site/pages/hello/world.js

@@ -6,15 +6,15 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class World extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>World</title>
-        </Helmet>
+        </Head>
         <div>Hello World </div>
       </div>
     );

v2/test/__fixtures__/translated-site/pages/index.js

@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class Home extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>Home</title>
           <link rel="stylesheet" type="text/css" href="/css/basic.css" />
-        </Helmet>
+        </Head>
         <div>Home ... </div>
       </div>
     );

v2/test/__fixtures__/transversioned-site/pages/hello/world.js

@@ -6,15 +6,15 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class World extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>World</title>
-        </Helmet>
+        </Head>
         <div>Hello World </div>
       </div>
     );

v2/test/__fixtures__/transversioned-site/pages/index.js

@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class Home extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>Home</title>
           <link rel="stylesheet" type="text/css" href="/css/basic.css" />
-        </Helmet>
+        </Head>
         <div>Home ... </div>
       </div>
     );

v2/test/__fixtures__/versioned-site/pages/hello/world.js

@@ -6,15 +6,15 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class World extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>World</title>
-        </Helmet>
+        </Head>
         <div>Hello World </div>
       </div>
     );

v2/test/__fixtures__/versioned-site/pages/index.js

@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 export default class Home extends React.Component {
   render() {
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>Home</title>
           <link rel="stylesheet" type="text/css" href="/css/basic.css" />
-        </Helmet>
+        </Head>
         <div>Home ... </div>
       </div>
     );

v2/website/package.json

@@ -8,7 +8,6 @@
     "docusaurus": "../",
     "react": "^16.7.0-alpha.0",
     "react-dom": "^16.7.0-alpha.0",
-    "react-helmet": "^5.2.0",
     "react-youtube": "^7.6.0"
   }
 }

v2/website/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React, {useEffect, useState} from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 
 import classnames from 'classnames';
 
@@ -129,9 +129,9 @@ function Home() {
 
   return (
     <div>
-      <Helmet key={featureIndex}>
+      <Head key={featureIndex}>
         <title>Docusaurus</title>
-      </Helmet>
+      </Head>
       <div className={classnames(styles.section, styles.banner)}>
         <div className={classnames(styles.sectionInner, styles.bannerInner)}>
           <h1 className={styles.header}>Docusaurus</h1>

v2/website/pages/youtube.js

@@ -6,7 +6,7 @@
  */
 /* eslint-disable */
 import React from 'react';
-import Helmet from 'react-helmet';
+import Head from '@docusaurus/head';
 import YouTube from 'react-youtube';
 
 export default class Player extends React.Component {
@@ -21,9 +21,9 @@ export default class Player extends React.Component {
 
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>My Youtube</title>
-        </Helmet>
+        </Head>
         <div align="center">
           {/* this is a React-youtube component */}
           <YouTube videoId="d9IxdwEFk1c" opts={opts} onReady={this._onReady} />

v2/website/yarn.lock

@@ -810,6 +810,10 @@ address@1.0.3, address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
 
+agentkeepalive@^2.2.0:
+  version "2.2.0"
+  resolved "http://registry.npmjs.org/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
+
 ajv-errors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
@@ -827,6 +831,26 @@ ajv@^6.0.1, ajv@^6.1.0:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+algoliasearch@^3.24.5:
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.30.0.tgz#355585e49b672e5f71d45b9c2b371ecdff129cd1"
+  dependencies:
+    agentkeepalive "^2.2.0"
+    debug "^2.6.8"
+    envify "^4.0.0"
+    es6-promise "^4.1.0"
+    events "^1.1.0"
+    foreach "^2.0.5"
+    global "^4.3.2"
+    inherits "^2.0.1"
+    isarray "^2.0.1"
+    load-script "^1.0.0"
+    object-keys "^1.0.11"
+    querystring-es3 "^0.2.1"
+    reduce "^1.0.1"
+    semver "^5.1.0"
+    tunnel-agent "^0.6.0"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -992,6 +1016,12 @@ atob@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+autocomplete.js@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/autocomplete.js/-/autocomplete.js-0.29.0.tgz#0185f7375ee9daf068f7d52d794bc90dcd739fd7"
+  dependencies:
+    immediate "^3.2.3"
+
 autolinker@~0.15.0:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832"
@@ -1898,6 +1928,15 @@ dir-glob@^2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
+docsearch.js@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/docsearch.js/-/docsearch.js-2.5.2.tgz#1a3521c92e5f252cc522c57357ef1c47b945b381"
+  dependencies:
+    algoliasearch "^3.24.5"
+    autocomplete.js "^0.29.0"
+    hogan.js "^3.0.2"
+    to-factory "^1.0.0"
+
 docusaurus@../:
   version "2.0.0"
   dependencies:
@@ -1916,6 +1955,7 @@ docusaurus@../:
     commander "^2.16.0"
     connect-history-api-fallback "^1.5.0"
     css-loader "^1.0.0"
+    docsearch.js "^2.5.2"
     escape-html "^1.0.3"
     escape-string-regexp "^1.0.5"
     front-matter "^2.3.0"
@@ -1935,7 +1975,6 @@ docusaurus@../:
     react-loadable "^5.5.0"
     react-router-config "^1.0.0-beta.4"
     react-router-dom "^4.3.1"
-    react-youtube "^7.6.0"
     remarkable "^1.7.1"
     semver "^5.5.0"
     shelljs "^0.8.2"
@@ -1963,6 +2002,10 @@ dom-serializer@0, dom-serializer@~0.1.0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -2076,6 +2119,13 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
 
+envify@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
+  dependencies:
+    esprima "^4.0.0"
+    through "~2.3.4"
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -2126,6 +2176,10 @@ es6-iterator@~2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
+es6-promise@^4.1.0:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
+
 es6-symbol@^3.1.1, es6-symbol@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
@@ -2172,7 +2226,7 @@ eval@^0.1.0:
   dependencies:
     require-like ">= 0.1.1"
 
-events@^1.0.0:
+events@^1.0.0, events@^1.1.0:
   version "1.1.1"
   resolved "http://registry.npmjs.org/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
@@ -2387,6 +2441,10 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -2532,6 +2590,13 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
+global@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^11.1.0:
   version "11.8.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
@@ -2675,6 +2740,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hogan.js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
+  dependencies:
+    mkdirp "0.3.0"
+    nopt "1.0.10"
+
 hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -2801,6 +2873,10 @@ ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
 
+immediate@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -3123,6 +3199,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.4.tgz#38e7bcbb0f3ba1b7933c86ba1894ddfc3781bbb7"
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -3650,6 +3730,12 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 mini-css-extract-plugin@^0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.4.tgz#c10410a004951bd3cedac1da69053940fccb625d"
@@ -3728,6 +3814,10 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
+mkdirp@0.3.0:
+  version "0.3.0"
+  resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
+
 mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   version "0.5.1"
   resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -3889,6 +3979,12 @@ node-version@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.2.0.tgz#34fde3ffa8e1149bd323983479dda620e1b5060d"
 
+nopt@1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -3959,7 +4055,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-keys@^1.0.11, object-keys@^1.0.12:
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@~1.0.0:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
 
@@ -4343,6 +4439,10 @@ process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -4400,7 +4500,7 @@ punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
-querystring-es3@^0.2.0:
+querystring-es3@^0.2.0, querystring-es3@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
@@ -4638,6 +4738,12 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+reduce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce/-/reduce-1.0.1.tgz#14fa2e5ff1fc560703a020cbb5fbaab691565804"
+  dependencies:
+    object-keys "~1.0.0"
+
 regenerate-unicode-properties@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"
@@ -5321,7 +5427,7 @@ through2@^2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6:
+through@^2.3.6, through@~2.3.4:
   version "2.3.8"
   resolved "http://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
@@ -5353,6 +5459,10 @@ to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
 
+to-factory@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-factory/-/to-factory-1.0.0.tgz#8738af8bd97120ad1d4047972ada5563bf9479b1"
+
 to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
@@ -5407,6 +5517,12 @@ tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
 type-is@^1.6.16:
   version "1.6.16"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"