Refactor the directory strucure

README.md

@@ -40,12 +40,14 @@ utilizing a unidirectional data flow.
 ├── /src/                       # The source code of the application
 │   ├── /actions/               # Action creators that allow to trigger a dispatch to stores
 │   ├── /assets/                # Static files which are copied to ./build on compile
-│   ├── /components/            # React components. E.g. Navbar.jsx, Calendar.jsx
+│   ├── /components/            # React components
+│   │   ├── /common/            # - Shared components. E.g. Link.js
+│   │   ├── /forms/             # - Form components. E.g. TextBox.js
+│   │   ├── /layout/            # - Layout components. E.g. Navbar.js
+│   │   └── /pages/             # - Web-page components. E.g. About.js
 │   ├── /constants/             # Enumerations used in action creators and stores
 │   ├── /core/                  # Core components (Flux dispatcher, base classes)
 │   ├── /images/                # Graphics (.png, .jpg, .svg etc.)
-│   ├── /layouts/               # Shared layouts for top-level components
-│   ├── /pages/                 # Top-level, URL-bound React components
 │   ├── /stores/                # Stores contain the application state and logic
 │   ├── /styles/                # CSS style sheets (or LESS, SASS, Stylus)
 │   ├── /app.js                 # The application's main file (entry point)

gulpfile.js

@@ -107,7 +107,7 @@ gulp.task('images', function() {
 
 // HTML pages
 gulp.task('pages', function() {
-  src.pages = ['src/pages/**/*.js', 'src/pages/404.html'];
+  src.pages = ['src/components/pages/**/*.js', 'src/components/pages/404.html'];
 
   var currentPage = {};
   var Dispatcher = require('./src/core/Dispatcher');
@@ -123,7 +123,7 @@ gulp.task('pages', function() {
   });
 
   var render = $.render({
-      template: './src/pages/_template.html',
+      template: './src/components/pages/_template.html',
       data: function() { return currentPage; }
     })
     .on('error', function(err) { console.log(err); render.end(); });
@@ -137,6 +137,7 @@ gulp.task('pages', function() {
       collapseWhitespace: true,
       minifyJS: true
     }), $.jsbeautifier()))
+    .pipe($.if('**/home.html', $.rename('index.html')))
     .pipe(gulp.dest(DEST))
     .pipe($.size({title: 'pages'}));
 });

package.json

@@ -31,6 +31,7 @@
     "gulp-load-plugins": "^0.8.0",
     "gulp-minify-css": "^0.3.11",
     "gulp-plumber": "^0.6.6",
+    "gulp-rename": "^1.2.0",
     "gulp-render": "^0.2.1",
     "gulp-replace": "^0.5.0",
     "gulp-size": "^1.1.0",

src/app.js

@@ -54,8 +54,8 @@ function render(page) {
 // Define URL routes
 // See https://github.com/flatiron/director
 var routes = {
-  '/': () => render(require('./pages/Index')),
-  '/privacy': () => render(require('./pages/Privacy'))
+  '/': () => render(require('./components/pages/Home')),
+  '/privacy': () => render(require('./components/pages/Privacy'))
 };
 
 // Initialize a router

src/components/Link.js → src/components/common/Link.js

@@ -9,7 +9,7 @@
 'use strict';
 
 var React = require('react');
-var RouteActions = require('../actions/RouteActions');
+var RouteActions = require('../../actions/RouteActions');
 
 var Link = React.createClass({
   propTypes: {

src/layouts/DefaultLayout.js → src/components/layout/App.js

@@ -9,9 +9,9 @@
 'use strict';
 
 var React = require('react');
-var PageStore = require('../stores/PageStore');
-var Link = require('../components/Link');
-var Navbar = require('../components/Navbar');
+var PageStore = require('../../stores/PageStore');
+var Link = require('../common/Link');
+var Navbar = require('../layout/Navbar');
 
 /**
  * Retrieves the current page metadata from the PageStore.

src/components/Navbar.js → src/components/layout/Navbar.js

@@ -9,7 +9,7 @@
 'use strict';
 
 var React = require('react');
-var Link = require('./Link');
+var Link = require('../common/Link');
 
 var Navbar = React.createClass({
   render() {

src/pages/Index.js → src/components/pages/Home.js

@@ -9,13 +9,13 @@
 'use strict';
 
 var React = require('react');
-var PageActions = require('../actions/PageActions');
-var DefaultLayout = require('../layouts/DefaultLayout');
+var PageActions = require('../../actions/PageActions');
+var App = require('../layout/App');
 
 var HomePage = React.createClass({
 
   statics: {
-    layout: DefaultLayout
+    layout: App
   },
 
   componentWillMount() {

src/pages/Privacy.js → src/components/pages/Privacy.js

@@ -9,14 +9,14 @@
 'use strict';
 
 var React = require('react');
-var PageActions = require('../actions/PageActions');
-var DefaultLayout = require('../layouts/DefaultLayout');
-var Link = require('../components/Link');
+var PageActions = require('../../actions/PageActions');
+var App = require('../layout/App');
+var Link = require('../common/Link');
 
 var PrivacyPage = React.createClass({
 
   statics: {
-    layout: DefaultLayout,
+    layout: App,
     breadcrumb: (
       <ol className="breadcrumb">
         <li><Link to="/">Home</Link></li>