Upgrade to docusaurus 2 (#7785)

* chore: upgrade to docusaurus 2

* address review

docusaurus/docs/adding-bootstrap.md

@@ -29,7 +29,8 @@ import 'bootstrap/dist/css/bootstrap.css';
 
 > Note: this feature is available with `[email protected]` and higher.
 
-Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br>
+Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).
+
 As of `[email protected]` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences.
 
 To enable `scss` in Create React App you will need to install `node-sass`.

docusaurus/docs/adding-custom-environment-variables.md

@@ -136,7 +136,8 @@ Files on the left have more priority than files on the right:
 - `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
 - `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)
 
-These variables will act as the defaults if the machine does not explicitly set them.<br>
+These variables will act as the defaults if the machine does not explicitly set them.
+
 Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
 
 > Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need

docusaurus/docs/adding-images-fonts-and-files.md

@@ -39,7 +39,8 @@ Webpack finds all relative module references in CSS (they start with `./`) and r
 
 Please be advised that this is also a custom feature of Webpack.
 
-**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br>
+**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
+
 An alternative way of handling static assets is described in the next section.
 
 ## Adding SVGs

docusaurus/docs/can-i-use-decorators.md

@@ -3,13 +3,15 @@ id: can-i-use-decorators
 title: Can I Use Decorators?
 ---
 
-Some popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
+Some popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.
+
 Create React App intentionally doesn’t support decorator syntax at the moment because:
 
 - It is an experimental proposal and is subject to change (in fact, it has already changed once, and will change again).
 - Most libraries currently support only the old version of the proposal — which will never be a standard.
 
-However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
+However in many cases you can rewrite decorator-based code without decorators just as fine.
+
 Please refer to these two threads for reference:
 
 - [#214](https://github.com/facebook/create-react-app/issues/214)

docusaurus/docs/deployment.md

@@ -100,7 +100,8 @@ When users install your app to the homescreen of their device the default config
 
 ## Building for Relative Paths
 
-By default, Create React App produces a build assuming your app is hosted at the server root.<br>
+By default, Create React App produces a build assuming your app is hosted at the server root.
+
 To override this, specify the `homepage` in your `package.json`, for example:
 
 ```js
@@ -109,10 +110,10 @@ To override this, specify the `homepage` in your `package.json`, for example:
 
 This will let Create React App correctly infer the root path to use in the generated HTML file.
 
-**Note**: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`.<br>
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).<br>
+**Note**: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`.
+
+More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
 
-<br>
 For example:
 
 ```js
@@ -256,7 +257,7 @@ For more information see [Firebase Hosting](https://firebase.google.com/docs/hos
 
 ### Step 1: Add `homepage` to `package.json`
 
-**The step below is important!**<br>
+**The step below is important!**<br/>
 
 **If you skip it, your app will not deploy correctly.**
 
@@ -332,7 +333,7 @@ npm run deploy
 
 Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch:
 
-<img src="https://i.imgur.com/HUjEr9l.png" width="500" alt="gh-pages branch setting">
+<img src="https://i.imgur.com/HUjEr9l.png" width="500" alt="gh-pages branch setting" />
 
 ### Step 5: Optionally, configure the domain
 
@@ -371,7 +372,8 @@ If, when deploying, you get `Cannot read property 'email' of null`, try the foll
 
 ## [Heroku](https://www.heroku.com/)
 
-Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
+Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
+
 You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
 
 ### Resolving Heroku Deployment Errors

docusaurus/docs/getting-started.md

@@ -23,7 +23,7 @@ Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
 When you’re ready to deploy to production, create a minified bundle with `npm run build`.
 
 <p align='center'>
-<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start'>
+<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start' />
 </p>
 
 ### Get Started Immediately
@@ -115,7 +115,7 @@ Runs the app in development mode. Open [http://localhost:3000](http://localhost:
 The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
 
 <p align='center'>
-<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'>
+<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors' />
 </p>
 
 ### `npm test` or `yarn test`

docusaurus/docs/importing-a-component.md

@@ -3,7 +3,8 @@ id: importing-a-component
 title: Importing a Component
 ---
 
-This project setup supports ES6 modules thanks to Webpack.<br>
+This project setup supports ES6 modules thanks to Webpack.
+
 While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead.
 
 For example:

docusaurus/docs/post-processing-css.md

@@ -39,5 +39,6 @@ becomes this:
 If you need to disable autoprefixing for some reason, [follow this section](https://github.com/postcss/autoprefixer#disabling).
 
 [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing.
-If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).<br>
+If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).
+
 To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file.

docusaurus/docs/proxying-api-requests-in-development.md

@@ -6,7 +6,8 @@ sidebar_label: Proxying in Development
 
 > Note: this feature is available with `[email protected]` and higher.
 
-People often serve the front-end React app from the same host and port as their backend implementation.<br>
+People often serve the front-end React app from the same host and port as their backend implementation.
+
 For example, a production setup might look like this after the app is deployed:
 
     /             - static server returns index.html with React app
@@ -31,7 +32,8 @@ Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-
 
 Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`.
 
-The `proxy` option supports HTTP, HTTPS and WebSocket connections.<br>
+The `proxy` option supports HTTP, HTTPS and WebSocket connections.
+
 If the `proxy` option is **not** flexible enough for you, alternatively you can:
 
 - [Configure the proxy yourself](#configuring-the-proxy-manually)
@@ -96,10 +98,13 @@ You can now register proxies as you wish! Here's an example using the above `htt
 const proxy = require('http-proxy-middleware');
 
 module.exports = function(app) {
-  app.use('/api', proxy({
-    target: 'http://localhost:5000',
-    changeOrigin: true,
-  }));
+  app.use(
+    '/api',
+    proxy({
+      target: 'http://localhost:5000',
+      changeOrigin: true,
+    })
+  );
 };
 ```
 

docusaurus/docs/running-tests.md

@@ -3,7 +3,7 @@ id: running-tests
 title: Running Tests
 ---
 
-> Note: this feature is available with `[email protected]` and higher.<br>
+> Note: this feature is available with `[email protected]` and higher.
 
 > [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG-0.x.md#migrating-from-023-to-030)
 
@@ -60,7 +60,8 @@ it('sums numbers', () => {
 });
 ```
 
-All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/en/expect.html#content).<br>
+All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/en/expect.html#content).
+
 You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions.
 
 ## Testing Components
@@ -144,7 +145,8 @@ it('renders welcome message', () => {
 });
 ```
 
-All Jest matchers are [extensively documented here](https://jestjs.io/docs/en/expect.html).<br>
+All Jest matchers are [extensively documented here](https://jestjs.io/docs/en/expect.html).
+
 Nevertheless you can use a third-party assertion library like [Chai](https://chaijs.com/) if you want to, as described below.
 
 Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written more simply with jest-enzyme.
@@ -254,12 +256,14 @@ global.localStorage = localStorageMock;
 
 ## Focusing and Excluding Tests
 
-You can replace `it()` with `xit()` to temporarily exclude a test from being executed.<br>
+You can replace `it()` with `xit()` to temporarily exclude a test from being executed.
+
 Similarly, `fit()` lets you focus on a specific test without running any other tests.
 
 ## Coverage Reporting
 
-Jest has an integrated coverage reporter that works well with ES6 and requires no configuration.<br>
+Jest has an integrated coverage reporter that works well with ES6 and requires no configuration.
+
 Run `npm test -- --coverage` (note extra `--` in the middle) to include a coverage report like this:
 
 ![coverage report](https://i.imgur.com/5bFhnTS.png)

docusaurus/docs/setting-up-your-editor.md

@@ -12,8 +12,10 @@ To configure the syntax highlighting in your favorite text editor, head to the [
 
 ## Displaying Lint Output in the Editor
 
-> Note: this feature is available with `[email protected]` and higher.<br>
-> It works out of the box for newly created projects with `[email protected]` and higher.<br>
+> Note: this feature is available with `[email protected]` and higher.
+
+> It works out of the box for newly created projects with `[email protected]` and higher.
+
 > It also only works with npm 3 or higher.
 
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.

docusaurus/docs/troubleshooting.md

@@ -6,7 +6,8 @@ sidebar_label: Troubleshooting
 
 ## `npm start` doesn’t detect changes
 
-When you save a file while `npm start` is running, the browser should refresh with the updated code.<br>
+When you save a file while `npm start` is running, the browser should refresh with the updated code.
+
 If this doesn’t happen, try one of the following workarounds:
 
 - Check that your file is imported by your entrypoint. TypeScript will show errors on any of your source files, but webpack only reloads your files if they are directly or indirectly imported by one of your entrypoints.
@@ -60,7 +61,8 @@ Please refer to [this section](deployment.md#resolving-heroku-deployment-errors)
 
 If you use a [Moment.js](https://momentjs.com/), you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of [all the locales provided by Moment.js](https://momentjs.com/#multiple-locale-support).
 
-To add a specific Moment.js locale to your bundle, you need to import it explicitly.<br>
+To add a specific Moment.js locale to your bundle, you need to import it explicitly.
+
 For example:
 
 ```js

docusaurus/website/.gitignore

@@ -0,0 +1,20 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# generated files
+.docusaurus
+.cache-loader
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*