feat(v2): implement theme component overriding (facebook#1435)

* feat(v2): implement component overriding

* siteDir theme overriding should work for > 1 level directory

* fallback for essential component like Loading

* rename default -> classic

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

@@ -16,6 +16,11 @@
     "loader-utils": "^1.2.3"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0"
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
   }
 }

packages/docusaurus-plugin-content-blog/src/index.js

@@ -158,6 +158,22 @@ class DocusaurusPluginContentBlog {
 
   configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
     return {
+      resolve: {
+        alias: {
+          '@theme/BlogListPage': path.resolve(
+            __dirname,
+            './theme/BlogListPage',
+          ),
+          '@theme/BlogPostItem': path.resolve(
+            __dirname,
+            './theme/BlogPostItem',
+          ),
+          '@theme/BlogPostPage': path.resolve(
+            __dirname,
+            './theme/BlogPostPage',
+          ),
+        },
+      },
       module: {
         rules: [
           {

packages/docusaurus/lib/default-theme/BlogListPage/index.js → packages/docusaurus-plugin-content-blog/src/theme/BlogListPage/index.js

@@ -8,7 +8,7 @@
 import React from 'react';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
-import BlogPostItem from '../BlogPostItem';
+import BlogPostItem from '@theme/BlogPostItem';
 
 function BlogListPage(props) {
   const {

packages/docusaurus/lib/default-theme/BlogPostPage/index.js → packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js

@@ -8,7 +8,7 @@
 import React from 'react';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
-import BlogPostItem from '../BlogPostItem';
+import BlogPostItem from '@theme/BlogPostItem';
 
 function BlogPostPage(props) {
   const {content: BlogPostContents, metadata} = props;

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

@@ -18,6 +18,12 @@
     "loader-utils": "^1.2.3"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0"
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-router-config": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=8"
   }
 }

packages/docusaurus-plugin-content-docs/src/index.js

@@ -153,6 +153,17 @@ class DocusaurusPluginContentDocs {
 
   configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
     return {
+      resolve: {
+        alias: {
+          '@theme/DocItem': path.resolve(__dirname, './theme/DocItem'),
+          '@theme/DocPage': path.resolve(__dirname, './theme/DocPage'),
+          '@theme/DocPaginator': path.resolve(
+            __dirname,
+            './theme/DocPaginator',
+          ),
+          '@theme/DocSidebar': path.resolve(__dirname, './theme/DocSidebar'),
+        },
+      },
       module: {
         rules: [
           {

packages/docusaurus/lib/default-theme/DocItem/index.js → packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js

@@ -9,7 +9,7 @@ import React from 'react';
 
 import Head from '@docusaurus/Head';
 
-import DocPaginator from '../DocPaginator';
+import DocPaginator from '@theme/DocPaginator';
 
 import styles from './styles.module.css';
 

packages/docusaurus/lib/default-theme/DocPage/index.js → packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js

@@ -10,7 +10,7 @@ import {renderRoutes} from 'react-router-config';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
 
-import DocSidebar from '../DocSidebar';
+import DocSidebar from '@theme/DocSidebar';
 
 function DocPage(props) {
   const {route, docsMetadata, location} = props;

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

@@ -12,6 +12,11 @@
     "globby": "^9.1.0"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0"
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
   }
 }

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

@@ -7,6 +7,11 @@
 
 module.exports = function preset(context, opts = {}) {
   return {
+    themes: [
+      {
+        name: '@docusaurus/theme-classic',
+      },
+    ],
     plugins: [
       {
         name: '@docusaurus/plugin-content-docs',

packages/docusaurus-theme-classic/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@docusaurus/theme-classic",
+  "version": "2.0.0-alpha.13",
+  "description": "Classic theme for Docusaurus",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "docsearch.js": "^2.5.2"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
+  }
+}

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

@@ -0,0 +1,36 @@
+/**
+ * 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');
+
+const DEFAULT_OPTIONS = {};
+
+class DocusaurusThemeDefault {
+  constructor(context, opts) {
+    this.options = {...DEFAULT_OPTIONS, ...opts};
+    this.context = context;
+  }
+
+  getName() {
+    return 'docusaurus-theme-classic';
+  }
+
+  configureWebpack() {
+    return {
+      resolve: {
+        alias: {
+          '@theme/Footer': path.resolve(__dirname, './theme/Footer'),
+          '@theme/Navbar': path.resolve(__dirname, './theme/Navbar'),
+          '@theme/NotFound': path.resolve(__dirname, './theme/NotFound'),
+          '@theme/Search': path.resolve(__dirname, './theme/Search'),
+        },
+      },
+    };
+  }
+}
+
+module.exports = DocusaurusThemeDefault;

packages/docusaurus/lib/client/theme-fallback/Layout/index.js

@@ -0,0 +1,28 @@
+/**
+ * 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 Head from '@docusaurus/Head'; // eslint-disable-line
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; // eslint-disable-line
+
+function Layout(props) {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  const {baseUrl, favicon, tagline, title: defaultTitle} = siteConfig;
+  const {children, title} = props;
+  return (
+    <React.Fragment>
+      <Head defaultTitle={`${defaultTitle} · ${tagline}`}>
+        {title && <title>{`${title} · ${tagline}`}</title>}
+        {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
+      </Head>
+      {children}
+    </React.Fragment>
+  );
+}
+
+export default Layout;

packages/docusaurus/lib/client/theme-fallback/Loading/index.js

@@ -0,0 +1,110 @@
+/**
+ * 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';
+
+export default props => {
+  if (props.error) {
+    console.warn(props.error);
+    return <div align="center">Error</div>;
+  }
+
+  if (props.pastDelay) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+        }}>
+        <svg
+          id="loader"
+          style={{
+            width: 128,
+            height: 110,
+            position: 'absolute',
+            top: 'calc(100vh - 64%)',
+          }}
+          viewBox="0 0 45 45"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="#61dafb">
+          <g
+            fill="none"
+            fillRule="evenodd"
+            transform="translate(1 1)"
+            strokeWidth="2">
+            <circle cx="22" cy="22" r="6" strokeOpacity="0">
+              <animate
+                attributeName="r"
+                begin="1.5s"
+                dur="3s"
+                values="6;22"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+              <animate
+                attributeName="stroke-opacity"
+                begin="1.5s"
+                dur="3s"
+                values="1;0"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+              <animate
+                attributeName="stroke-width"
+                begin="1.5s"
+                dur="3s"
+                values="2;0"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+            </circle>
+            <circle cx="22" cy="22" r="6" strokeOpacity="0">
+              <animate
+                attributeName="r"
+                begin="3s"
+                dur="3s"
+                values="6;22"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+              <animate
+                attributeName="stroke-opacity"
+                begin="3s"
+                dur="3s"
+                values="1;0"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+              <animate
+                attributeName="stroke-width"
+                begin="3s"
+                dur="3s"
+                values="2;0"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+            </circle>
+            <circle cx="22" cy="22" r="8">
+              <animate
+                attributeName="r"
+                begin="0s"
+                dur="1.5s"
+                values="6;1;2;3;4;5;6"
+                calcMode="linear"
+                repeatCount="indefinite"
+              />
+            </circle>
+          </g>
+        </svg>
+      </div>
+    );
+  }
+
+  return null;
+};

packages/docusaurus/lib/client/theme-fallback/NotFound/index.js

@@ -0,0 +1,28 @@
+/**
+ * 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 Layout from '@theme/Layout';
+
+function NotFound() {
+  return (
+    <Layout title="Page Not Found">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '50vh',
+          fontSize: '20px',
+        }}>
+        <h1>Oops, page not found </h1>
+      </div>
+    </Layout>
+  );
+}
+
+export default NotFound;

packages/docusaurus/lib/commands/build.js

@@ -84,7 +84,7 @@ module.exports = async function build(siteDir, cliOptions = {}) {
     );
   });
 
-  // Run webpack to build js bundle (client) and static html files (server) !!
+  // Run webpack to build JS bundle (client) and static html files (server).
   await compile([clientConfig, serverConfig]);
 
   // Remove server.bundle.js because it is useless