Update ESLint and README.md files

README.md

@@ -4,7 +4,7 @@
 [![NPM downloads](http://img.shields.io/npm/dm/generator-react-static.svg?style=flat-square)](https://www.npmjs.com/package/generator-react-static)
 [![Build Status](http://img.shields.io/travis/koistya/react-static-boilerplate/master.svg?style=flat-square)](https://travis-ci.org/koistya/react-static-boilerplate)
 [![Dependency Status](http://img.shields.io/david/koistya/react-static-boilerplate.svg?branch=master&style=flat-square)](https://david-dm.org/koistya/react-static-boilerplate)
-[![GitHub Issues](https://img.shields.io/github/issues/koistya/react-static-boilerplate.svg?style=flat-square)](https://github.com/koistya/react-static-boilerplate/issues)
+[![GitHub Issues](https://img.shields.io/github/issues/koistya/react-static-boilerplate.svg?style=flat-square)](https://github.com/koistya/react-static-boilerplate/issues?q=is:open)
 [![To-do](https://img.shields.io/waffle/label/koistya/react-static-boilerplate/to-do.svg?style=flat-square)](https://waffle.io/koistya/react-static-boilerplate)
 [![In progress](https://img.shields.io/waffle/label/koistya/react-static-boilerplate/in%20progress.svg?style=flat-square)](https://waffle.io/koistya/react-static-boilerplate)
 
@@ -49,8 +49,7 @@
 
 ### Directory Layout
 
-
-```
+```shell
 .
 ├── /build/                     # The folder for compiled output
 ├── /node_modules/              # 3rd-party libraries and utilities
@@ -80,7 +79,7 @@
 
 Just clone the repo, install Node.js modules and run `npm start`:
 
-```
+```shell
 $ git clone -o react-static-boilerplate -b master --single-branch \
       https://github.com/koistya/react-static-boilerplate.git MyApp
 $ cd MyApp
@@ -94,7 +93,7 @@ $ npm start             # Build and launch the app, same as "node tools/start.js
 
 The unit tests are powered by [chai](http://chaijs.com/) and [mocha](http://mochajs.org/).
 
-```
+```shell
 $ npm test
 ```
 
@@ -173,9 +172,9 @@ Love **React Static Boilerplate** work and community? Help us keep it alive by [
 
 * [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
 * [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
-* [React App](https://github.com/kriasoft/react-app) — Bootstrap React application with routing, navigation, context variables and document metadata management
+* [React App](https://github.com/kriasoft/react-app) — Bootstrap React app with routing, navigation, context variables and title/meta management
 * [Universal Router](https://github.com/kriasoft/universal-router) — Isomorphic router for web and single-page applications (SPA)
-* [History](https://github.com/mjackson/history) — A wrapper library for HTML5 History API
+* [History](https://github.com/mjackson/history) — HTML5 History API wrapper library
 * [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, roles and auth tokens
 
 
@@ -194,4 +193,4 @@ Copyright © 2015-2016 Konstantin Tarkus. This source code is licensed under the
 [LICENSE.txt](https://github.com/koistya/react-static-boilerplate/blob/master/LICENSE.txt) file.
 
 ---
-Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/koistya/react-static-boilerplate/graphs/contributors)  |  MIT License
+Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/koistya/react-static-boilerplate/graphs/contributors)

package.json

@@ -19,10 +19,10 @@
     "babel-runtime": "^6.6.1",
     "browser-sync": "^2.12.8",
     "chai": "^3.5.0",
-    "cpy": "^4.0.0",
+    "cpy": "^4.0.1",
     "css-loader": "^0.23.1",
     "del": "^2.2.0",
-    "eslint": "^2.9.0",
+    "eslint": "^2.10.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.8.0",
     "eslint-plugin-jsx-a11y": "^1.2.0",

routes/README.md

@@ -0,0 +1,60 @@
+## Application Routes
+
+Each routes is just a plain JavaScript object having `path` (string or regular expression), `action`
+(function) and optionally `children` (array with child routes) attributes, for example:
+
+```js
+import AboutPage from './AboutPage';
+
+export default {
+
+  path: '/about',
+
+  action: () => ({
+    title: 'About Us',
+    component: AboutPage,
+  }),
+
+};
+```
+
+The `action()` (aka route handler) must return an object having `title` (string), `component`
+(React component) and optionally `props` fields. It can be asynchronous, as the following example
+demonstrates:
+
+```js
+import Post from './Post';
+
+export default {
+
+  path: '/posts/:id',
+
+  async action({ params }) {
+    const resp = await fetch(`/api/posts/${params.id}`);
+    const data = await resp.json();
+    return {
+      title: data.title,
+      component: Post,
+      props: data,
+    };
+  },
+
+};
+```
+
+In order to keep your project more organized, create a separate folder for each route (view/screen),
+where each route may contain routing and data fetching logic, as well as all the UI components and
+graphics required to render that particular view, for example:
+
+```shell
+├── /routes/                    # View/screen UI components + routing information
+│   ├── /profile/               # User profile page, e.g. www.example.com/username
+│   │   ├── /index.js           # Routing and fetching, e.g. { path: '/:username', action() { .. } }
+│   │   ├── /ProfilePage.css    # Styles for the profile page
+│   │   ├── /ProfilePage.js     # Profile page component
+│   │   ├── /ProfilePicture.css # Styles for user's photo component
+│   │   ├── /ProfilePicture.js  # User's photo component
+│   │   ├── /UserAcitivy.css    # Style for user's activity component
+│   │   └── /UserAcitivy.js     # User's activity component
+│   └── /...                    # etc.
+```

tools/webpack.config.js

@@ -116,14 +116,32 @@ const config = {
   // https://github.com/postcss/postcss
   postcss(bundler) {
     return [
+      // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
+      // https://github.com/postcss/postcss-import
       require('postcss-import')({ addDependencyTo: bundler }),
+      // W3C custom properties for variables, e.g. :root { --color: red; } div { background: var(--color); }
+      // https://github.com/postcss/postcss-custom-properties
       require('postcss-custom-properties')(),
+      // W3C calc() function, e.g. div { height: calc(100px - 2em); }
+      // https://github.com/postcss/postcss-calc
       require('postcss-calc')(),
+      // W3C color() function, e.g. div { background: color(red alpha(90%)); }
+      // https://github.com/postcss/postcss-color-function
       require('postcss-color-function')(),
+      // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
+      // https://github.com/iamvdo/pleeease-filters
       require('pleeease-filters')(),
+      // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
+      // https://github.com/robwierzbowski/node-pixrem
       require('pixrem')(),
+      // Pseudo elements such as a:before { }
+      // https://github.com/axa-ch/postcss-pseudoelements
       require('postcss-pseudoelements')(),
+      // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
+      // https://github.com/postcss/postcss-selector-not
       require('postcss-selector-not')(),
+      // Add vendor prefixes to CSS rules using values from caniuse.com
+      // https://github.com/postcss/autoprefixer
       require('autoprefixer')(),
     ];
   },