diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index 0a06655c76c..141849c503d 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -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).
+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`. diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index 97fc21fd11d..ae1b5d5c7a7 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/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.
+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 diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index 88e23047b32..02a5377936c 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/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).
+**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 diff --git a/docusaurus/docs/can-i-use-decorators.md b/docusaurus/docs/can-i-use-decorators.md index f4ccf4e4504..d698b6f527a 100644 --- a/docusaurus/docs/can-i-use-decorators.md +++ b/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.
+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.
+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) diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index 6b39372384c..3a642a32cb0 100644 --- a/docusaurus/docs/deployment.md +++ b/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.
+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 ``s using the `basename` prop on any ``.
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``. + +More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). -
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!**
+**The step below is important!**
**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: -gh-pages branch setting +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).
+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 diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index 9831e638a41..71982e2a21c 100644 --- a/docusaurus/docs/getting-started.md +++ b/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`.

-npm start +npm start

### 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.

-Build errors +Build errors

### `npm test` or `yarn test` diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index a04670a9a0a..61fc9b0d492 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/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.
+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: diff --git a/docusaurus/docs/post-processing-css.md b/docusaurus/docs/post-processing-css.md index b7589d2719f..1a456b9f1c5 100644 --- a/docusaurus/docs/post-processing-css.md +++ b/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).
+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. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 420663b2760..3fdfb778069 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -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.
+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.
+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, + }) + ); }; ``` diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index 06f384fefbb..c36c18a06e9 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -3,7 +3,7 @@ id: running-tests title: Running Tests --- -> Note: this feature is available with `react-scripts@0.3.0` and higher.
+> 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) @@ -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).
+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).
+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.
+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.
+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) diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index 4099f912b90..e38bd4022b5 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/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 `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.
+> 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. diff --git a/docusaurus/docs/troubleshooting.md b/docusaurus/docs/troubleshooting.md index 9dd091e6b31..38892e77a78 100644 --- a/docusaurus/docs/troubleshooting.md +++ b/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.
+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.
+To add a specific Moment.js locale to your bundle, you need to import it explicitly. + For example: ```js diff --git a/docusaurus/website/.gitignore b/docusaurus/website/.gitignore new file mode 100644 index 00000000000..1b34df5127b --- /dev/null +++ b/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* \ No newline at end of file diff --git a/docusaurus/website/README.md b/docusaurus/website/README.md index 13b5047f3bb..71505291a8a 100644 --- a/docusaurus/website/README.md +++ b/docusaurus/website/README.md @@ -1,144 +1,33 @@ -This website was created with [Docusaurus](https://docusaurus.io/). +# Website -# What's In This Document +This website is built using Docusaurus 2, a modern static website generator. -* [Get Started in 5 Minutes](#get-started-in-5-minutes) -* [Directory Structure](#directory-structure) -* [Editing Content](#editing-content) -* [Adding Content](#adding-content) -* [Full Documentation](#full-documentation) +### Installation -# Get Started in 5 Minutes - -1. Make sure all the dependencies for the website are installed: - -```sh -# Install dependencies -$ yarn ``` -2. Run your dev server: - -```sh -# Start the site -$ yarn start +$ yarn ``` -## Directory Structure - -Your project file structure should look something like this +### Local Development ``` -my-docusaurus/ - docs/ - doc-1.md - doc-2.md - doc-3.md - website/ - core/ - node_modules/ - pages/ - static/ - css/ - img/ - package.json - sidebar.json - siteConfig.js -``` - -# Editing Content - -## Editing an existing docs page - -Edit docs by navigating to `docs/` and editing the corresponding document: - -`docs/doc-to-be-edited.md` - -```markdown ---- -id: page-needs-edit -title: This Doc Needs To Be Edited ---- - -Edit me... +$ yarn start ``` -For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) - -# Adding Content - -## Adding a new docs page to an existing sidebar - -1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: +This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. -```md ---- -id: newly-created-doc -title: This Doc Needs To Be Edited ---- +### Build -My new content here.. ``` - -1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: - -```javascript -// Add newly-created-doc to the Getting Started category of docs -{ - "docs": { - "Getting Started": [ - "quick-start", - "newly-created-doc" // new doc here - ], - ... - }, - ... -} +$ yarn build ``` -For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding items to your site's top navigation bar +This command generates static content into the `build` directory and can be served using any static contents hosting service. -1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: +### Deployment -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - /* you can add docs */ - { doc: 'my-examples', label: 'Examples' }, - /* you can add custom pages */ - { page: 'help', label: 'Help' }, - /* you can add external links */ - { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, - ... - ], - ... -} ``` - -For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding custom pages - -1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: -1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - { page: 'my-new-custom-page', label: 'My New Custom Page' }, - ... - ], - ... -} +$ GIT_USER= USE_SSH=1 yarn deploy ``` -For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). - -# Full Documentation - -Full documentation can be found on the [website](https://docusaurus.io/). +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/docusaurus/website/core/Footer.js b/docusaurus/website/core/Footer.js deleted file mode 100644 index f76c69521a8..00000000000 --- a/docusaurus/website/core/Footer.js +++ /dev/null @@ -1,123 +0,0 @@ -/** - * 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 React = require('react'); - -class Footer extends React.Component { - docUrl(doc) { - // FIXME: this is a second argument but for some reason /en/ links don't work. - let language = ''; - - const baseUrl = this.props.config.baseUrl; - return `${baseUrl}docs/${language ? `${language}/` : ''}${doc}`; - } - - pageUrl(doc) { - // FIXME: this is a second argument but for some reason /en/ links don't work. - let language = ''; - - const baseUrl = this.props.config.baseUrl; - return baseUrl + (language ? `${language}/` : '') + doc; - } - - render() { - return ( - - ); - } -} - -module.exports = Footer; diff --git a/docusaurus/website/docusaurus.config.js b/docusaurus/website/docusaurus.config.js new file mode 100644 index 00000000000..ad263b653cf --- /dev/null +++ b/docusaurus/website/docusaurus.config.js @@ -0,0 +1,118 @@ +/** + * 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 siteConfig = { + title: 'Create React App', + tagline: 'Set up a modern web app by running one command.', + url: 'https://create-react-app.dev', + baseUrl: '/', + projectName: 'create-react-app', + organizationName: 'facebook', + favicon: 'img/favicon/favicon.ico', + presets: [ + [ + '@docusaurus/preset-classic', + { + docs: { + path: '../docs', + sidebarPath: require.resolve('./sidebars.json'), + editUrl: + 'https://github.com/facebook/create-react-app/edit/master/docusaurus/docs/', + showLastUpdateAuthor: true, + showLastUpdateTime: true, + }, + theme: { + customCss: require.resolve('./src/css/custom.css'), + }, + }, + ], + ], + themeConfig: { + image: 'img/logo-og.png', + algolia: { + apiKey: '3be60f4f8ffc24c75da84857d6323791', + indexName: 'create-react-app', + }, + navbar: { + title: 'Create React App', + logo: { + alt: 'Create React App Logo', + src: 'img/logo.svg', + }, + links: [ + { to: 'docs/getting-started', label: 'Docs', position: 'right' }, + { + href: 'https://reactjs.org/community/support.html', + label: 'Help', + position: 'right', + }, + { + href: 'https://www.github.com/facebook/create-react-app', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Docs', + items: [ + { + label: 'Get Started', + to: 'docs/getting-started', + }, + { + label: 'Learn React', + href: 'https://reactjs.org/', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Stack Overflow', + href: + 'https://stackoverflow.com/questions/tagged/create-react-app', + }, + { + label: 'Spectrum', + href: 'https://spectrum.chat/create-react-app', + }, + { + label: 'Twitter', + href: 'https://twitter.com/reactjs', + }, + { + label: 'Contributor Covenant', + href: + 'https://www.contributor-covenant.org/version/1/4/code-of-conduct', + }, + ], + }, + { + title: 'Social', + items: [ + { + label: 'GitHub', + href: 'https://www.github.com/facebook/create-react-app', + }, + ], + }, + ], + logo: { + alt: 'Facebook Open Source Logo', + src: 'img/oss_logo.png', + }, + copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, + }, + }, +}; + +module.exports = siteConfig; diff --git a/docusaurus/website/i18n/en.json b/docusaurus/website/i18n/en.json deleted file mode 100644 index b1c1ca9d038..00000000000 --- a/docusaurus/website/i18n/en.json +++ /dev/null @@ -1,178 +0,0 @@ -{ - "_comment": "This file is auto-generated by write-translations.js", - "localized-strings": { - "next": "Next", - "previous": "Previous", - "tagline": "Set up a modern web app by running one command.", - "docs": { - "adding-a-css-modules-stylesheet": { - "title": "Adding a CSS Modules Stylesheet", - "sidebar_label": "Adding CSS Modules" - }, - "adding-a-router": { - "title": "Adding a Router" - }, - "adding-a-sass-stylesheet": { - "title": "Adding a Sass Stylesheet", - "sidebar_label": "Adding Sass Stylesheets" - }, - "adding-a-stylesheet": { - "title": "Adding a Stylesheet", - "sidebar_label": "Adding Stylesheets" - }, - "adding-bootstrap": { - "title": "Adding Bootstrap" - }, - "adding-css-reset": { - "title": "Adding a CSS Reset", - "sidebar_label": "Adding CSS Reset" - }, - "adding-custom-environment-variables": { - "title": "Adding Custom Environment Variables", - "sidebar_label": "Environment Variables" - }, - "adding-flow": { - "title": "Adding Flow" - }, - "adding-images-fonts-and-files": { - "title": "Adding Images, Fonts, and Files" - }, - "adding-relay": { - "title": "Adding Relay" - }, - "adding-typescript": { - "title": "Adding TypeScript" - }, - "advanced-configuration": { - "title": "Advanced Configuration" - }, - "alternatives-to-ejecting": { - "title": "Alternatives to Ejecting" - }, - "analyzing-the-bundle-size": { - "title": "Analyzing the Bundle Size", - "sidebar_label": "Analyzing Bundle Size" - }, - "available-scripts": { - "title": "Available Scripts", - "sidebar_label": "Available Scripts" - }, - "can-i-use-decorators": { - "title": "Can I Use Decorators?" - }, - "code-splitting": { - "title": "Code Splitting" - }, - "debugging-tests": { - "title": "Debugging Tests", - "sidebar_label": "Debugging Tests" - }, - "deployment": { - "title": "Deployment", - "sidebar_label": "Deployment" - }, - "developing-components-in-isolation": { - "title": "Developing Components in Isolation" - }, - "documentation-intro": { - "title": "About the Documentation", - "sidebar_label": "About Docs" - }, - "fetching-data-with-ajax-requests": { - "title": "Fetching Data with AJAX Requests", - "sidebar_label": "Fetching Data" - }, - "folder-structure": { - "title": "Folder Structure" - }, - "getting-started": { - "title": "Getting Started" - }, - "importing-a-component": { - "title": "Importing a Component" - }, - "installing-a-dependency": { - "title": "Installing a Dependency" - }, - "integrating-with-an-api-backend": { - "title": "Integrating with an API Backend", - "sidebar_label": "Integrating with an API" - }, - "loading-graphql-files": { - "title": "Loading .graphql Files", - "sidebar_label": "Loading .graphql Files" - }, - "making-a-progressive-web-app": { - "title": "Making a Progressive Web App" - }, - "post-processing-css": { - "title": "Post-Processing CSS" - }, - "pre-rendering-into-static-html-files": { - "title": "Pre-Rendering into Static HTML Files", - "sidebar_label": "Pre-Rendering Static HTML" - }, - "production-build": { - "title": "Creating a Production Build" - }, - "proxying-api-requests-in-development": { - "title": "Proxying API Requests in Development", - "sidebar_label": "Proxying in Development" - }, - "running-tests": { - "title": "Running Tests" - }, - "setting-up-your-editor": { - "title": "Setting Up Your Editor", - "sidebar_label": "Editor Setup" - }, - "supported-browsers-features": { - "title": "Supported Browsers and Features", - "sidebar_label": "Supported Browsers and Features" - }, - "title-and-meta-tags": { - "title": "Title and Meta Tags", - "sidebar_label": "Title & Meta Tags" - }, - "troubleshooting": { - "title": "Troubleshooting", - "sidebar_label": "Troubleshooting" - }, - "updating-to-new-releases": { - "title": "Updating to New Releases" - }, - "using-global-variables": { - "title": "Using Global Variables" - }, - "using-https-in-development": { - "title": "Using HTTPS in Development", - "sidebar_label": "HTTPS in Development" - }, - "using-the-public-folder": { - "title": "Using the Public Folder" - } - }, - "links": { - "Docs": "Docs", - "Help": "Help", - "GitHub": "GitHub" - }, - "categories": { - "Welcome": "Welcome", - "Getting Started": "Getting Started", - "Development": "Development", - "Styles and Assets": "Styles and Assets", - "Building your App": "Building your App", - "Testing": "Testing", - "Back-End Integration": "Back-End Integration", - "Deployment": "Deployment", - "Advanced Usage": "Advanced Usage", - "Support": "Support" - } - }, - "pages-strings": { - "Help Translate|recruit community translators for your project": "Help Translate", - "Edit this Doc|recruitment message asking to edit the doc source": "Edit", - "Translate this Doc|recruitment message asking to translate the docs": "Translate" - } -} diff --git a/docusaurus/website/package.json b/docusaurus/website/package.json index 7d66debef68..a7158b8bba7 100644 --- a/docusaurus/website/package.json +++ b/docusaurus/website/package.json @@ -1,14 +1,27 @@ { "scripts": { - "examples": "docusaurus-examples", - "start": "docusaurus-start", - "build": "docusaurus-build", - "publish-gh-pages": "docusaurus-publish", - "write-translations": "docusaurus-write-translations", - "version": "docusaurus-version", - "rename-version": "docusaurus-rename-version" + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy" }, - "devDependencies": { - "docusaurus": "^1.7.2" + "dependencies": { + "@docusaurus/core": "^2.0.0-alpha.26", + "@docusaurus/preset-classic": "^2.0.0-alpha.26", + "classnames": "^2.2.6", + "react": "^16.10.2", + "react-dom": "^16.10.2" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/docusaurus/website/pages/en/index.js b/docusaurus/website/pages/en/index.js deleted file mode 100755 index c7904f73e36..00000000000 --- a/docusaurus/website/pages/en/index.js +++ /dev/null @@ -1,187 +0,0 @@ -/** - * 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 React = require('react'); - -const CompLibrary = require('../../core/CompLibrary.js'); - -const Container = CompLibrary.Container; -const GridBlock = CompLibrary.GridBlock; - -const siteConfig = require(`${process.cwd()}/siteConfig.js`); - -function imgUrl(img) { - return `${siteConfig.baseUrl}img/${img}`; -} - -function docUrl(doc, language) { - return `${siteConfig.baseUrl}docs/${language ? `${language}/` : ''}${doc}`; -} - -class Button extends React.Component { - render() { - return ( -
- - {this.props.children} - -
- ); - } -} - -Button.defaultProps = { - target: '_self', -}; - -const SplashContainer = props => ( -
-
-
{props.children}
-
-
-); - -const Logo = props => ( -
- Project Logo -
-); - -const ProjectTitle = () => ( -

- {siteConfig.title} - {siteConfig.tagline} -

-); - -const PromoSection = props => ( -
-
-
{props.children}
-
-
-); - -class HomeSplash extends React.Component { - render() { - const language = this.props.language || ''; - return ( - - -
- - - - -
- - ); - } -} - -const Block = props => ( - - - -); -Block.defaultProps = { - padding: ['bottom', 'top'], -}; - -const Features = props => ( - - {[ - { - title: 'Less to Learn', - content: - "You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically.", - }, - { - title: 'Only One Dependency', - content: - 'Your app only needs one build dependency. We test Create React App to make sure that all of its underlying pieces work together seamlessly – no complicated version mismatches.', - }, - { - title: 'No Lock-In', - content: - 'Under the hood, we use Webpack, Babel, ESLint, and other amazing projects to power your app. If you ever want an advanced configuration, you can ”eject” from Create React App and edit their config files directly.', - }, - ]} - -); - -const GetStarted = props => ( - - {[ - { - title: 'Get started in seconds', - content: `Whether you’re using React or another library, Create React App lets you **focus on code, not build tools**. - -To create a project called \`my-app\`, run this command: - -\`\`\`sh -npx create-react-app my-app -\`\`\` -`, - }, - { - image: - 'https://camo.githubusercontent.com/29765c4a32f03bd01d44edef1cd674225e3c906b/68747470733a2f2f63646e2e7261776769742e636f6d2f66616365626f6f6b2f6372656174652d72656163742d6170702f323762343261632f73637265656e636173742e737667', - imageAlign: 'right', - }, - ]} - -); - -const Update = props => ( - - {[ - { - image: imgUrl('update.png'), - imageAlign: 'left', - }, - { - title: 'Easy to maintain', - content: `Updating your build tooling is typically a daunting and time-consuming task. When new versions of Create React App are released, you can upgrade using a single command: - -\`\`\`sh -npm install react-scripts@latest -\`\`\``, - }, - ]} - -); - -class Index extends React.Component { - render() { - const language = this.props.language || ''; - - return ( -
- -
- - - -
-
- ); - } -} - -module.exports = Index; diff --git a/docusaurus/website/siteConfig.js b/docusaurus/website/siteConfig.js deleted file mode 100644 index f848791f4a1..00000000000 --- a/docusaurus/website/siteConfig.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * 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. - */ - -// See https://docusaurus.io/docs/site-config for all the possible -// site configuration options. - -const siteConfig = { - title: 'Create React App', // Title for your website. - tagline: 'Set up a modern web app by running one command.', - // For github.io type URLs, you would set the url and baseUrl like: - url: 'https://create-react-app.dev', - baseUrl: '/', - cname: 'create-react-app.dev', - editUrl: - 'https://github.com/facebook/create-react-app/edit/master/docusaurus/docs/', - - // Used for publishing and more - projectName: 'create-react-app', - organizationName: 'facebook', - // For top-level user or org sites, the organization is still the same. - // e.g., for the https://JoelMarcey.github.io site, it would be set like... - // organizationName: 'JoelMarcey' - - // For no header links in the top nav bar -> headerLinks: [], - headerLinks: [ - { doc: 'getting-started', label: 'Docs' }, - { href: 'https://reactjs.org/community/support.html', label: 'Help' }, - { - href: 'https://www.github.com/facebook/create-react-app', - label: 'GitHub', - }, - ], - - /* path to images for header/footer */ - headerIcon: 'img/logo.svg', - footerIcon: 'img/logo.svg', - favicon: 'img/favicon/favicon.ico', - - /* Colors for website */ - colors: { - primaryColor: '#20232a', - secondaryColor: '#61dafb', - }, - - /* Custom fonts for website */ - /* - fonts: { - myFont: [ - "Times New Roman", - "Serif" - ], - myOtherFont: [ - "-apple-system", - "system-ui" - ] - }, - */ - - // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. - copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`, - - highlight: { - // Highlight.js theme to use for syntax highlighting in code blocks. - theme: 'default', - }, - - // Add custom scripts here that would be placed in