Merge pull request #7 from corgicode/feature/1-header

#1 fixed css problems, created a header component

Author: dvidsilva

config/webpack.config.common.js

@@ -12,7 +12,7 @@ module.exports = {
                 {
                     loader: 'css-loader',
                     options: {
-                        modules: true,
+                        modules: false,
                         localIdentName: 'assets/[name]---[local]---[hash:base64:5]',
                     }
                 },
@@ -26,7 +26,6 @@ module.exports = {
         },
         { test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
         { test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file-loader?name=assets/fonts/[name].[ext]' },
-        { test: /\.(gif|jpg|png)(\?[a-z0-9#=&.]+)?$/, loader: 'file-loader?name=assets/images/[name].[ext]' }
     ],
     }
 };

config/webpack.config.prod.js

@@ -14,6 +14,7 @@ const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const commonConfig = require('./webpack.config.common');
 const merge = require('webpack-merge');
+const CnameWebpackPlugin = require('cname-webpack-plugin');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -214,6 +215,7 @@ module.exports = merge(commonConfig, {
             ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
+          { test: /CNAME?$/, loader: 'file-loader?name=CNAME' },
         ],
       },
     ],
@@ -314,6 +316,9 @@ module.exports = merge(commonConfig, {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new CnameWebpackPlugin({
+        ___domain: 'frontend.codecorgi.co',
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

package-lock.json

@@ -26,6 +26,7 @@
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "cname-webpack-plugin": "^1.0.1",
     "dotenv": "4.0.0",
     "es6-promise": "^4.1.1",
     "eslint-config-react-app": "^2.0.1",

package.json

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import logoTextHover from '../../images/logo-text-hover.png';
+import logoText from '../../images/logo-text.png';
+import '../../styles/_header.scss';
+
+class Header extends React.Component {
+    constructor(props) {
+        super(props);
+        this.mouseOver = this.mouseOver.bind(this);
+        this.mouseOut = this.mouseOut.bind(this);
+        this.toggleVisibility = this.toggleVisibility.bind(this);
+        this.state = {
+            hover: false,
+            visible: false,
+        };
+    }
+
+    mouseOver = () => {
+        this.setState({hover: true});
+    }
+    mouseOut() {
+        this.setState({hover: false});
+    }
+
+    toggleVisibility() {
+        this.setState({ visible: !this.state.visible });
+    }
+
+    render() {
+        return (<header className="header">
+            <div className="navbar">
+                <div className="navbar-header">
+                    <div className="container">
+                        <ul className="social pull-right">
+                            {/* <li><a href="#"><i class="icon-s-facebook"></i></a></li>
+                            <li><a href="#"><i class="icon-s-gplus"></i></a></li>
+                            <li><a href="#"><i class="icon-s-twitter"></i></a></li>
+                            <li><a href="#"><i class="icon-s-pinterest"></i></a></li>
+                            <li><a href="#"><i class="icon-s-behance"></i></a></li>
+                            <li><a href="#"><i class="icon-s-dribbble"></i></a></li>*/}
+                        </ul>
+                        <Link className="navbar-brand" onClick={this.toggleVisibility} to="/">
+                            {this.state.hover && <img src={logoTextHover} width="168" className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
+                            {!this.state.hover && <img src={logoText} width="168" className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
+                        </Link>
+                        <a className="navbar-toggle btn responsive-menu pull-right red-button" onClick={this.toggleVisibility}><i className="icon-menu-1"/></a>
+                    </div>
+                </div>
+                <div className="yamm">
+                    <div className={'navbar-collapse visible-md visible-lg' + (this.state.visible ? 'visible-sm visible-xs' : '')}>
+                        <div className="container">
+                            <Link className="navbar-brand" onClick={this.toggleVisibility} to="/">
+                                {this.state.hover && <img src={logoTextHover} className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
+                                {!this.state.hover && <img src={logoText} className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
+                            </Link>
+                            <ul className="nav navbar-nav">
+                                <li>
+                                    <Link to="/challenges" onClick={this.toggleVisibility}>Challenges</Link>
+                                </li>
+                                <li>
+                                    <Link className="red-button" to="/app#!/signup" onClick={this.toggleVisibility}>Account</Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>);
+    }
+}
+
+export default Header;

src/challenges/0/homepage.png

@@ -1,16 +1,12 @@
 import React from 'react';
-import { Route, Link } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import Home from '../home';
 import About from '../about';
-import '../../styles/main.scss';
+import Header from '../../components/header';
 
 const App = () => (
     <div>
-        <header>
-            <Link to="/">Home</Link>
-            <Link to="/about-us">About</Link>
-        </header>
-
+        <Header />
         <main>
             <Route exact path="/" component={Home} />
             <Route exact path="/about-us" component={About} />