chore(docs): Re-format docs with prettier (kriasoft#1577)

arnigudj · Mar 24, 2018 · d20cd7d · d20cd7d
1 parent 6c3f7d6
commit d20cd7d
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 98 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -157,8 +157,7 @@ The deployment script `tools/deploy.js` is configured to push the contents of
 the `/build` folder to a remote server via Git. You can easily deploy your app
 to
 [Azure Web Apps](https://azure.microsoft.com/en-us/services/app-service/web/),
-or [Heroku](https://www.heroku.com/) this way. Both will execute `yarn install
---production` upon receiving new files from you. Note, you should only deploy
+or [Heroku](https://www.heroku.com/) this way. Both will execute `yarn install --production` upon receiving new files from you. Note, you should only deploy
 the contents of the `/build` folder to a remote server.
 
 ### How to Update

diff --git a/docs/how-to-configure-text-editors.md b/docs/how-to-configure-text-editors.md
@@ -26,8 +26,7 @@ Enable **CSSComb** by following the instructions
 [here](https://github.com/csscomb/jetbrains-csscomb).
 
 **If you have trouble with autoreloading** try to disable "safe write" in
-`File > Settings > System Settings > Use "safe write" (save changes to a
-temporary file first)`
+`File > Settings > System Settings > Use "safe write" (save changes to a temporary file first)`
 
 ### Atom
 

diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md
@@ -22,8 +22,7 @@
   This will make your code more maintainable, easy to refactor.
 * Add `package.json` file into each component's folder.\
   This will allow to easily reference such components from other places in your code.\
-  Use `import Nav from '../Navigation'` instead of `import Nav from
-  '../Navigation/Navigation.js'`
+  Use `import Nav from '../Navigation'` instead of `import Nav from '../Navigation/Navigation.js'`
 
 ```
 /components/Navigation/icon.svg

diff --git a/docs/recipes/how-to-configure-facebook-login.md b/docs/recipes/how-to-configure-facebook-login.md
@@ -1,11 +1,11 @@
 How to configure Facebook Login
 
-1. Navigate and Login to https://developers.facebook.com/apps
-2. Click "Add New App"
-3. Enter your app name and contact email
-4. In App Dashboard, click `Set Up` in Facebook Login section
-5. Chose "Web" as your Platform
-6. Set Site URL to `http://localhost:3000/` for local testing. (Port of your Node server, not the port of the BrowserSync proxy)
-7. Click Facebook Login on the left panel
-8. Turn on Client OAuth Login and Web OAuth Login. Enter `http://localhost:3000/login/facebook/return` for Valid OAuth redirect URIs.
-9. Get your App ID and Secret and copy it to [`src/config.js`](../src/config.js)
+1.  Navigate and Login to https://developers.facebook.com/apps
+2.  Click "Add New App"
+3.  Enter your app name and contact email
+4.  In App Dashboard, click `Set Up` in Facebook Login section
+5.  Chose "Web" as your Platform
+6.  Set Site URL to `http://localhost:3000/` for local testing. (Port of your Node server, not the port of the BrowserSync proxy)
+7.  Click Facebook Login on the left panel
+8.  Turn on Client OAuth Login and Web OAuth Login. Enter `http://localhost:3000/login/facebook/return` for Valid OAuth redirect URIs.
+9.  Get your App ID and Secret and copy it to [`src/config.js`](../src/config.js)
diff --git a/docs/recipes/how-to-implement-routing.md b/docs/recipes/how-to-implement-routing.md
@@ -54,8 +54,7 @@ function matchURI(path, uri) {
   if (!match) return null;
   const params = Object.create(null);
   for (let i = 1; i < match.length; i++) {
-    params[keys[i - 1].name] =
-      match[i] !== undefined ? match[i] : undefined;
+    params[keys[i - 1].name] = match[i] !== undefined ? match[i] : undefined;
   }
   return params;
 }
@@ -138,10 +137,12 @@ function renderRouteOutput({ title, component }) {
 }
 
 function render(location) {
-  router.resolve(routes, location)
+  router
+    .resolve(routes, location)
     .then(renderRouteOutput)
-    .catch(error => router.resolve(routes, { ...location, error })
-    .then(renderRouteOutput));
+    .catch(error =>
+      router.resolve(routes, { ...location, error }).then(renderRouteOutput),
+    );
 }
 
 render(history.getCurrentLocation()); // render the current URL
@@ -164,15 +165,27 @@ class App extends React.Component {
     event.preventDefault();
     history.push({
       pathname: event.currentTarget.pathname,
-      search: event.currentTarget.search
+      search: event.currentTarget.search,
     });
   };
   render() {
     return (
       <ul>
-        <li><a href="/" onClick={this.transition}>Home</a></li>
-        <li><a href="/one" onClick={this.transition}>One</a></li>
-        <li><a href="/two" onClick={this.transition}>Two</a></li>
+        <li>
+          <a href="/" onClick={this.transition}>
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="/one" onClick={this.transition}>
+            One
+          </a>
+        </li>
+        <li>
+          <a href="/two" onClick={this.transition}>
+            Two
+          </a>
+        </li>
       </ul>
     );
   }
@@ -193,25 +206,25 @@ module that is built around the same concepts demonstrated earlier with the majo
 it supports nested routes and provides you with the helper `Link` React component. It can be seen as
 a lightweight more flexible alternative to React Router.
 
-- It has simple code with minimum dependencies (just `path-to-regexp` and `babel-runtime`)
-- It can be used with any JavaScript framework such as React, Vue.js etc
-- It uses the same middleware approach used in Express and Koa, making it easy to learn
-- It uses the exact same API and implementation to be used in both Node.js and browser environments
+* It has simple code with minimum dependencies (just `path-to-regexp` and `babel-runtime`)
+* It can be used with any JavaScript framework such as React, Vue.js etc
+* It uses the same middleware approach used in Express and Koa, making it easy to learn
+* It uses the exact same API and implementation to be used in both Node.js and browser environments
 
 The [Getting Started page](https://github.com/kriasoft/universal-router/blob/master/docs/getting-started.md)
 has a few examples how to use it.
 
 ### Related Articles
 
-- [You might not need React Router](https://medium.freecodecamp.com/you-might-not-need-react-router-38673620f3d) by Konstantin Tarkus
+* [You might not need React Router](https://medium.freecodecamp.com/you-might-not-need-react-router-38673620f3d) by Konstantin Tarkus
 
 ### Related Projects
 
-- [`path-to-regexp`](https://github.com/pillarjs/path-to-regexp)
-- [`history`](https://github.com/ReactTraining/history)
-- [Universal Router](https://github.com/kriasoft/universal-router)
+* [`path-to-regexp`](https://github.com/pillarjs/path-to-regexp)
+* [`history`](https://github.com/ReactTraining/history)
+* [Universal Router](https://github.com/kriasoft/universal-router)
 
 ### Related Discussions
 
-- [How to Implement Routing and Navigation](https://github.com/kriasoft/react-starter-kit/issues/748)
-- [How to Add a Route to RSK?](https://github.com/kriasoft/react-starter-kit/issues/754)
+* [How to Implement Routing and Navigation](https://github.com/kriasoft/react-starter-kit/issues/748)
+* [How to Add a Route to RSK?](https://github.com/kriasoft/react-starter-kit/issues/754)
diff --git a/docs/recipes/how-to-integrate-disqus.md b/docs/recipes/how-to-integrate-disqus.md
@@ -18,22 +18,23 @@ function renderDisqus() {
     script.src = 'https://' + SHORTNAME + '.disqus.com/embed.js';
     document.getElementsByTagName('head')[0].appendChild(script);
   } else {
-    window.DISQUS.reset({reload: true});
+    window.DISQUS.reset({ reload: true });
   }
 }
 
-class DisqusThread extends React.Component{
-
+class DisqusThread extends React.Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
-    path: PropTypes.string.isRequired
+    path: PropTypes.string.isRequired,
   };
 
   shouldComponentUpdate(nextProps) {
-    return this.props.id !== nextProps.id ||
+    return (
+      this.props.id !== nextProps.id ||
       this.props.title !== nextProps.title ||
-      this.props.path !== nextProps.path;
+      this.props.path !== nextProps.path
+    );
   }
 
   componentDidMount() {
@@ -45,7 +46,7 @@ class DisqusThread extends React.Component{
   }
 
   render() {
-    let { id, title, path, ...other} = this.props;
+    let { id, title, path, ...other } = this.props;
 
     if (process.env.BROWSER) {
       window.disqus_shortname = SHORTNAME;
@@ -56,7 +57,6 @@ class DisqusThread extends React.Component{
 
     return <div {...other} id="disqus_thread" />;
   }
-
 }
 
 export default DisqusThread;
@@ -68,18 +68,18 @@ export default DisqusThread;
 import React from 'react';
 import DisqusThread from './DisqusThread.js';
 
-class MyComponent extends React.Component{
-
+class MyComponent extends React.Component {
   render() {
     return (
       <div>
-        <DisqusThread id="e94d73ff-fd92-467d-b643-c86889f4b8be"
-                      title="How to integrate Disqus into ReactJS App"
-                      path="/blog/123-disquss-integration" />
+        <DisqusThread
+          id="e94d73ff-fd92-467d-b643-c86889f4b8be"
+          title="How to integrate Disqus into ReactJS App"
+          path="/blog/123-disquss-integration"
+        />
       </div>
     );
   }
-
 }
 
 export default MyComponent;

diff --git a/docs/recipes/how-to-integrate-react-intl.md b/docs/recipes/how-to-integrate-react-intl.md
@@ -1,24 +1,29 @@
 ## How to Integrate [React Intl](https://github.com/yahoo/react-intl#react-intl)
 
- 1. Merge `feature/react-intl` branch with git.
+1.  Merge `feature/react-intl` branch with git.
     Because react-intl integration is built on top of `feature/redux`, you'll also get all the features.
 
- 2. Adjust `INTL_REQUIRE_DESCRIPTIONS` constant in `tools/webpack.config.js` around line 17:
+2.  Adjust `INTL_REQUIRE_DESCRIPTIONS` constant in `tools/webpack.config.js` around line 17:
+
     ```js
     const INTL_REQUIRE_DESCRIPTIONS = true;
     ```
+
     When this boolean is set to true, the build will only succeed if a `description` is set for every message descriptor.
 
- 3. Adjust `locales` settings in `src/config.js`:
+3.  Adjust `locales` settings in `src/config.js`:
+
     ```js
     // default locale is the first one
     export const locales = ['en-GB', 'cs-CZ'];
     ```
+
     Note that you should follow
     [BCP 47](https://tools.ietf.org/html/bcp47)
     ([RFC 5646](https://tools.ietf.org/html/rfc5646)).
 
- 4. Add locale support in `src/client.js`:
+4.  Add locale support in `src/client.js`:
+
     ```js
     import en from 'react-intl/locale-data/en';
     import cs from 'react-intl/locale-data/cs';
@@ -27,42 +32,46 @@
     [en, cs].forEach(addLocaleData);
     ```
 
- 5. Execute `yarn run messages` or `yarn start` to strip out messages.
+5.  Execute `yarn run messages` or `yarn start` to strip out messages.
     Message files are created in `src/messages` directory.
 
- 6. Edit `src/messages/*.json` files, change only `message` property.
+6.  Edit `src/messages/*.json` files, change only `message` property.
 
- 7. Execute `yarn run build`,
+7.  Execute `yarn run build`,
     your translations should be copied to `build/messages/` directory.
 
-
 ### How to write localizable components
 
 Just import the appropriate [component](https://github.com/yahoo/react-intl/wiki#the-react-intl-module) from `react-intl`
 
-- For localizable text use
-[`<FormattedMessage>`](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage).
-- You can also use it with
-the [`defineMessages()`](https://github.com/yahoo/react-intl/wiki/API#definemessages) helper.
+* For localizable text use
+  [`<FormattedMessage>`](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage).
+* You can also use it with
+  the [`defineMessages()`](https://github.com/yahoo/react-intl/wiki/API#definemessages) helper.
 
-- For date and time:
-[`<FormattedDate>`](https://github.com/yahoo/react-intl/wiki/Components#formatteddate)
-[`<FormattedTime>`](https://github.com/yahoo/react-intl/wiki/Components#formattedtime)
-[`<FormattedRelative>`](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)
+* For date and time:
+  [`<FormattedDate>`](https://github.com/yahoo/react-intl/wiki/Components#formatteddate)
+  [`<FormattedTime>`](https://github.com/yahoo/react-intl/wiki/Components#formattedtime)
+  [`<FormattedRelative>`](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)
 
-- For numbers and currencies:
-[`<FormattedNumber>`](https://github.com/yahoo/react-intl/wiki/Components#formattednumber)
-[`<FormattedPlural>`](https://github.com/yahoo/react-intl/wiki/Components#formattedplural)
+* For numbers and currencies:
+  [`<FormattedNumber>`](https://github.com/yahoo/react-intl/wiki/Components#formattednumber)
+  [`<FormattedPlural>`](https://github.com/yahoo/react-intl/wiki/Components#formattedplural)
 
-- If possible, do not use `<FormattedHTMLMessage>`, see how to use *Rich Text Formatting* with
-[`<FormattedMessage>`](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage)
+* If possible, do not use `<FormattedHTMLMessage>`, see how to use _Rich Text Formatting_ with
+  [`<FormattedMessage>`](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage)
 
-- When you need an imperative formatting API, use the [`injectIntl`](https://github.com/yahoo/react-intl/wiki/API#injectintl) High-Order Component.
+* When you need an imperative formatting API, use the [`injectIntl`](https://github.com/yahoo/react-intl/wiki/API#injectintl) High-Order Component.
 
 #### Example
 
 ```jsx
-import { defineMessages, FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import {
+  defineMessages,
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from 'react-intl';
 
 const messages = defineMessages({
   text: {
@@ -78,7 +87,9 @@ const messages = defineMessages({
 });
 
 function Example(props) {
-  const text = props.intl.formatMessage(messages.textTemplate, { name: 'Pavel'});
+  const text = props.intl.formatMessage(messages.textTemplate, {
+    name: 'Pavel',
+  });
   return (
     <div>
       <FormattedMessage
@@ -90,7 +101,7 @@ function Example(props) {
       <FormattedMessage
         {...messages.textTemplate}
         values={{
-          name: <b>Pavel</b>
+          name: <b>Pavel</b>,
         }}
       />
     </div>
@@ -99,7 +110,7 @@ function Example(props) {
 
 Example.propTypes = {
   intl: intlShape,
-}
+};
 
 export default injectIntl(Example);
 ```
@@ -117,6 +128,6 @@ When editing a translation file, it should be copied to `build/messages/` direct
 
 ### Other References
 
- * [`Intl documentation on MDN`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl)
- * [express-request-language](https://github.com/tinganho/express-request-language#readme)
+* [`Intl documentation on MDN`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+* [express-request-language](https://github.com/tinganho/express-request-language#readme)
   – for more details how initial language negotiation works.