Merge pull request #3 from Codebrahma/docs-infra

Docs infra

Author: prasanna1211

.circleci/config.yml

@@ -26,7 +26,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: yarn install
+      - run: yarn install && cd docs && yarn install
 
       - save_cache:
           paths:

docs/client/App.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import HomePage from './components/HomePage';
+import GettingStartedPage from './components/GettingStartedPage';
+import ComponentsPage from './components/ComponentsPage';
+import AppNavbar from './components/AppNavbar';
+
+const App = () => (
+  <div>
+    <AppNavbar />
+    <Route exact path="/home" component={HomePage} />
+    <Route exact path="/getting-started" component={GettingStartedPage} />
+    <Route exact path="/components" component={ComponentsPage} />
+  </div>
+);
+
+export default App;

docs/client/components/AppNavbar/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './styles.scss';
+
+const AppBar = () => (
+  <div className={styles.navbar}>
+    Navbar
+  </div>
+);
+
+export default AppBar;

docs/client/components/AppNavbar/styles.scss

@@ -0,0 +1,3 @@
+:local(.navbar) {
+  font-size: 20px;
+}

docs/client/components/ComponentsPage/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ComponentsPage = () => (
+  <div>
+    Components Page
+  </div>
+);
+
+export default ComponentsPage;

docs/client/components/GettingStartedPage/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const GettingStartedPage = () => (
+  <div>
+    GettingStarted Page
+  </div>
+);
+
+export default GettingStartedPage;

docs/client/components/HomePage/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const HomePage = () => (
+  <div>
+    Home Page
+  </div>
+);
+
+export default HomePage;

docs/client/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 
+import App from './App';
 
-const App = () => (
-  <div>
-    Welcome to Docs
-  </div>
+const Routes = () => (
+  <Router>
+    <App />
+  </Router>
 );
 
-ReactDOM.render((<App />), document.getElementById('app'));
+ReactDOM.render((<Routes />), document.getElementById('app'));

docs/package.json

@@ -13,10 +13,12 @@
     "babel-standalone": "^6.7.7",
     "classnames": "^2.2.5",
     "codemirror": "^5.14.2",
+    "css-loader": "^0.28.11",
     "history": "^2.1.1",
+    "postcss-loader": "^2.1.5",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "webpack": "^4.12.0"
   },
   "devDependencies": {
@@ -30,7 +32,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-2": "^6.13.0",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.26.1",
+    "css-loader": "^0.28.11",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "gh-pages": "^0.12.0",
@@ -40,13 +42,13 @@
     "html-webpack-plugin": "^2.16.1",
     "markdown-loader": "^0.1.7",
     "node-sass": "^3.7.0",
-    "postcss-loader": "^1.2.1",
+    "postcss-loader": "^2.1.5",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.4",
     "sass-loader": "^4.0.0",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.21.0",
     "transfer-webpack-plugin": "^0.1.4",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"

docs/webpack.config.development.js

@@ -28,17 +28,26 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /(node_modules)/,
-        loader: 'babel-loader'
+        use: 'babel-loader'
       }, {
         test: /\.(scss|css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+            },
+          },
+        ],
+        include: [ path.join(__dirname, 'client')],
       }, {
         test: /\.(txt)$/,
-        loader: 'raw-loader',
+        use: 'raw-loader',
         include: path.resolve(__dirname, './app/components/layout/main/modules')
       }, {
         test: /\.(md)$/,
-        loader: 'html-loader!highlight-loader!markdown-loader'
+        use: 'html-loader!highlight-loader!markdown-loader'
       }
     ]
   },