feat(v2): implement theme component swizzling

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