Bootstrap pages

docs/app/app-routes.jsx

@@ -0,0 +1,18 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import Layout from './pages/layout';
+import Home from './pages/home';
+import Playground from './pages/playground';
+import Components from './pages/components';
+import { Route, IndexRoute } from 'react-router';
+
+const Routes = (
+  <Route path="/" component={Layout}>
+    <Route path="home" component={Home} />
+    <Route path="components" component={Components} />
+    <Route path="playground" component={Playground} />
+    <IndexRoute component={Home}/>
+  </Route>
+);
+
+export default Routes;

docs/app/app.jsx

@@ -1,16 +1,16 @@
 /*eslint-disable no-unused-vars*/
 import React from 'react';
 import ReactDOM from 'react-dom';
-import style from 'react-toolbox/commons';
-import code from './examples/example.txt';
-import Playground from './components/playground';
+import Router from 'react-router';
+import AppRoutes from './app-routes';
+import createHashHistory from 'history/lib/createHashHistory';
 
-const App = () => {
+const Docs = () => {
   return (
-    <app className={style.app}>
-      <Playground codeText={code} />
-    </app>
+    <Router history={createHashHistory({queryKey: false})}>
+      {AppRoutes}
+    </Router>
   );
 };
 
-ReactDOM.render(<App/>, document.getElementById('app'));
+ReactDOM.render(<Docs/>, document.getElementById('app'));

docs/app/pages/components.jsx

@@ -0,0 +1,8 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+
+const Components = () => {
+  return <p>List of components here</p>;
+};
+
+export default Components;

docs/app/pages/home.jsx

@@ -0,0 +1,14 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import style from './style';
+
+const Home = () => {
+  return (
+    <div>
+      <p>This will be the home page</p>
+      <div className={style.test}></div>
+    </div>
+  );
+};
+
+export default Home;

docs/app/pages/layout.jsx

@@ -0,0 +1,20 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import style from 'react-toolbox/commons';
+import { Link } from 'react-router';
+
+const Layout = (props) => {
+  return (
+    <app className={style.app}>
+      <h5>React Toolbox</h5>
+      <ul>
+        <li><Link to="/home">Home</Link></li>
+        <li><Link to="/playground">Playground</Link></li>
+        <li><Link to="/components">Components</Link></li>
+      </ul>
+      {props.children}
+    </app>
+  );
+};
+
+export default Layout;

docs/app/pages/playground.jsx

@@ -0,0 +1,15 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import code from '../examples/example.txt';
+import Playground from '../components/playground';
+
+const Components = () => {
+  return (
+    <section>
+      <p>Here should be the playground</p>
+      <Playground codeText={code} />
+    </section>
+  );
+};
+
+export default Components;

docs/app/pages/style.scss

@@ -0,0 +1,7 @@
+.test {
+  width: 100%;
+  height: 400px;
+  background: linear-gradient(45deg, #a177ff 0%, #02ceff 100%);
+  background-position: top right;
+  background-size: 120%;
+}

docs/package.json

@@ -8,8 +8,10 @@
   },
   "dependencies": {
     "codemirror": "^5.8.0",
+    "history": "^1.12.6",
     "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react-dom": "^0.14.0",
+    "react-router": "^1.0.0-rc3"
   },
   "devDependencies": {
     "autoprefixer": "^6.0.3",

package.json

@@ -17,7 +17,7 @@
   ],
   "main": "./lib",
   "scripts": {
-    "start": "node ./server",
+    "start": "UV_THREADPOOL_SIZE=100 node ./server",
     "babel": "babel ./components --out-dir ./lib",
     "build": "npm run lint && npm run babel && npm run sass",
     "clean": "rimraf ./lib",