wip

.babelrc

@@ -0,0 +1,3 @@
+{
+  presets: ['es2015', 'react']
+}

README.md

@@ -1,6 +1,17 @@
 # Clipy
 
+## Setup
 ```
 $ npm install
+```
+
+## Development
+```
+$ npm start
+$ open http://localhost:8080
+```
+
+## Production
+```
 $ npm run build
 ```

package.json

@@ -5,7 +5,7 @@
   "main": "src/javascripts/index.js",
   "scripts": {
     "build": "webpack -p",
-    "watch": "webpack --watch",
+    "start": "webpack-dev-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -24,9 +24,11 @@
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "css-loader": "^0.23.1",
+    "react-hot-loader": "^1.3.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1"
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
     "bootstrap": "^3.3.6",

src/javascripts/components/Hero.js

@@ -12,14 +12,14 @@ export default class extends React.Component {
           <div className="col-sm-8">
             <div>
               <div className="col-sm-12">
-                <h1 className={`${styles.name} col-sm-5`}>Clipy</h1>
-                <span className={`${styles.description} col-sm-7`}>
+                <h1 className={`${styles.name} col-sm-2 col-xs-12`}>Clipy</h1>
+                <span className={`${styles.description} col-sm-7 col-xs-12`}>
                   クリップボード拡張・<br />スニペット機能を搭載
                 </span>
               </div>
               <div className="col-sm-12">
                 <button className={styles.downloadButton}>ダウンロード</button>
-                <span>Mac 版(OS X 10.9以降)</span>
+                <span className={styles.downloadDescription}>Mac 版(OS X 10.9以降)</span>
               </div>
             </div>
           </div>

src/stylesheets/common.css

@@ -4,11 +4,15 @@
   align-items: center;
 }
 
+.mainColor {
+  color: #3f9ad6;
+}
+
 .blueButton {
   outline: none;
   background: rgba(0, 0, 0, 0);
   border-radius: 10px;
-  border: solid 3px #3d90c9;
+  border: solid 3px #3f9ad6;
 }
 
 .whiteButton {

src/stylesheets/hero.css

@@ -5,35 +5,41 @@
 }
 
 .icon {
-  width: 342px;
-  height: 456px;
-  box-shadow: -26px 27px 14px 0 rgba(20, 35, 53, 0.31);
+  width: 170px;
+  height: 230px;
+  margin: auto;
+  box-shadow: -13px 13px 7px 0 rgba(20, 35, 53, 0.31);
   background: url("../../images/clipy_logo.png");
   background-size: cover;
 }
 
 .description {
-  width: 342px;
-  height: 116px;
+  margin-top: 10px;
+  height: 50px;
   font-family: HiraKakuPro-W3;
-  font-size: 30px;
+  font-size: 15px;
   font-weight: 400;
   line-height: 1.44;
   color: #4a4a4a;
 }
 
 .downloadButton {
   composes: blueButton from './common.css';
-  width: 282px;
-  height: 82px;
+  composes: mainColor from './common.css';
+  width: 140px;
+  height: 40px;
   font-family: HiraKakuProN-W6;
-  font-size: 30px;
+  font-size: 15px;
   font-weight: 400;
   text-align: center;
-  color: #3d90c9;
+}
+
+.downloadDescription {
+  font-size: 9px;
 }
 
 .name {
-  font-size: 90px;
-  margin: 0;
+  composes: mainColor from './common.css';
+  font-size: 45px;
+  margin: 0 0 15px 0;
 }

webpack.config.js

@@ -1,25 +1,29 @@
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
   cache: true,
-  entry: path.resolve(__dirname, 'src', 'javascripts', 'index.js'),
+  target: 'web',
+  entry: [
+    path.resolve(__dirname, 'src', 'javascripts', 'index.js'),
+    'webpack-dev-server/client?http://0.0.0.0:8080',
+    'webpack/hot/only-dev-server',
+  ],
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js'
+    filename: 'bundle.js',
+    publicPath: '/dist/'
   },
   module: {
     loaders: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel',
-        query:{
-          presets: ['es2015', 'react']
-        }
+        loader: 'react-hot!babel',
       },
       {
         test: /\.css$/,
-        loader: 'style!css?modules'
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]__[name]__[local]__[hash:base64:5]'
       },
       {
         test: /\.png$/,
@@ -30,5 +34,16 @@ module.exports = {
   devtool: 'source-map',
   resolve: {
     extensions: ['', '.js', '.css']
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(), // if you don't specify `--hot`
+  ],
+  devServer: {
+    hot: true,
+    port: 8080,
+    cache: true,
+    inline: true,
+    colors: true,
+    contentBase: '.'
   }
 };