Skip to content

Commit

Permalink
Upgrade to docusaurus 2 (facebook#7785)
Browse files Browse the repository at this point in the history
* chore: upgrade to docusaurus 2

* address review
  • Loading branch information
endiliey authored and iansu committed Oct 15, 2019
1 parent 81c48dc commit 9243305
Show file tree
Hide file tree
Showing 27 changed files with 6,314 additions and 3,568 deletions.
3 changes: 2 additions & 1 deletion docusaurus/docs/adding-bootstrap.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ import 'bootstrap/dist/css/bootstrap.css';

> Note: this feature is available with `react-scripts@2.0.0` 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 `react-scripts@2.0.0` 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`.
Expand Down
3 changes: 2 additions & 1 deletion docusaurus/docs/adding-custom-environment-variables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion docusaurus/docs/adding-images-fonts-and-files.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions docusaurus/docs/can-i-use-decorators.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
16 changes: 9 additions & 7 deletions docusaurus/docs/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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.**

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docusaurus/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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`
Expand Down
3 changes: 2 additions & 1 deletion docusaurus/docs/importing-a-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
3 changes: 2 additions & 1 deletion docusaurus/docs/post-processing-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
17 changes: 11 additions & 6 deletions docusaurus/docs/proxying-api-requests-in-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ sidebar_label: Proxying in Development

> Note: this feature is available with `react-scripts@0.2.3` 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
Expand All @@ -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)
Expand Down Expand Up @@ -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,
})
);
};
```

Expand Down
14 changes: 9 additions & 5 deletions docusaurus/docs/running-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: running-tests
title: Running Tests
---

> Note: this feature is available with `react-scripts@0.3.0` and higher.<br>
> Note: this feature is available with `react-scripts@0.3.0` 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)
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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)
Expand Down
6 changes: 4 additions & 2 deletions docusaurus/docs/setting-up-your-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `react-scripts@0.2.0` and higher.<br>
> It works out of the box for newly created projects with `react-scripts@2.0.3` and higher.<br>
> Note: this feature is available with `react-scripts@0.2.0` and higher.
> It works out of the box for newly created projects with `react-scripts@2.0.3` 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.
Expand Down
6 changes: 4 additions & 2 deletions docusaurus/docs/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
20 changes: 20 additions & 0 deletions docusaurus/website/.gitignore
Original file line number Diff line number Diff line change
@@ -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*
Loading

0 comments on commit 9243305

Please sign in to comment.