Added everything so far

calibreapp · May 13, 2016 · 3c220ed · 3c220ed
commit 3c220ed
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-0"]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,6 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+public
diff --git a/dev-server.js b/dev-server.js
@@ -0,0 +1,19 @@
+'use strict'
+
+let webpack = require('webpack');
+let WebpackDevServer = require('webpack-dev-server');
+let config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true,
+  inline: true,
+  progress: true
+}).listen(3000, '0.0.0.0', function (err, result) {
+  if (err) {
+    console.log(err);
+  }
+
+  console.log('Listening at 0.0.0.0:3000');
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "email.perf",
+  "version": "1.0.0",
+  "main": "index.jsx",
+  "private": true,
+  "scripts": {
+    "dev": "NODE_ENV=development node dev-server.js",
+    "postinstall": "NODE_ENV=production webpack -p --progress --colors --bail"
+  },
+  "dependencies": {
+    "babel-eslint": "^6.0.2",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^2.7.0",
+    "eslint-loader": "^1.3.0",
+    "express": "^4.13.4",
+    "file-loader": "^0.8.5",
+    "html-webpack-plugin": "^2.15.0",
+    "style-loader": "^0.13.1",
+    "svg-sprite-loader": "0.0.18",
+    "tachyons": "^4.0.0-beta.27",
+    "uglify": "^0.1.5",
+    "uglify-loader": "^1.3.0",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.15",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>perf.email</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+  </head>
+  <body class="w-100 w-75-m w-50-l center">
+    <div class="pa2 pa0-ns">
+      <h1 class="f4 f3-ns fw6 mb3 bright">perf.email</h1>
+    </div>
+
+    <div class="bg-white br br1 ba bw-1 b-bright-dimmed">
+      <div class="tc pa2 pa4-l center">
+        <p class="f4 f2-ns mt1 mb0">Important web performance tools, tips, talks and resources in your&nbsp;inbox.</p>
+        <p class="f5 lh-copy black-70">
+          perf.email is a bi-monthly newsletter bringing you the most interesting studies of all things web performance and user-experience. If it happens between the server and the human, you'll find it here.
+        </p>
+      </div>
+
+      <div class="tc bg-bright pa3 pa4-ns pt3 pb3">
+        <form>
+          <fieldset>
+            <h2 class="f3 white-90 mt2">Sign up now</h2>
+            <div class="dt w-100">
+              <input class="dtc w-60 w-75-ns f5 pa2 ba b--white bw2 br-left" type="email" placeholder="Your email address" />
+              <button class="dtc w-40 w-25-ns f5 pa2 bg-white ba b--white bw2 br-right ttu" type="button">Subscribe</button>
+            </div>
+            <p class="white-50">Don’t sweat it, we hate spam too.</p>
+          </fieldset>
+        </form>
+      </div>
+
+
+      <div class="tc pa2 pa4-l pb0-l center">
+        <h2 class="f3 mt1-ns">Previous issues</h2>
+
+        <ul class="list tl ma0 pa0">
+          <li class="ph3 pv3 bb b--black-10 bright">Issue #1</li>
+        </ul>
+      </div>
+
+      <div class="tc pa2 pa4-l pt0 center">
+        <h2 class="f3 mt1-ns">Sponsors</h2>
+
+        <p class="f5 lh-copy black-70">
+          perf.email has a single sponsorship oppurtunity for each issue.
+        </p>
+      </div>
+    </div>
+
+    <div class="center pa3 pa4-l tc">
+      <div>
+        <p class="f5 lh-copy black-40 ma0">
+          Follow <a class="link dim black-40 underline" href="https://twitter.com/perfemail">perfemail</a> on Twitter for updates, <a class="link dim black-40 underline" href="mailto:[email protected]">send in suggestions</a> for the next issue.
+        </p>
+      </div>
+
+      <div class="f6 black-60 mt4 cf">
+        <div class="fl w-50 tc">
+          <p class="black-40">Brought to you by</p>
+          <a href="https://twitter.com/benschwarz" class="link">
+            <div class="dt center w-50 tl">
+              <div class="dtc">
+                <div class="br-100 h2 w2 dib avatar" style="background-image: url(https://avatars.io/twitter/benschwarz);"></div>
+              </div>
+
+              <div class="dtc w-100 v-mid pl2">
+                <p class="black-50 b ma0">Ben Schwarz</p>
+                <p class="black-40 ma0">@benschwarz</p>
+              </div>
+            </div>
+          </a>
+        </div>
+
+        <div class="fl w-50 logo">
+          <p class="black-40">Eternally sponsored by</p>
+          <a class="bright-dimmed link" href="https://calibreapp.com">
+            <svg width="140" height="30" style="fill: currentColor">
+              <use xlink:href="#logo">
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,7 @@
+'use strict'
+
+// CSS
+import tachyons from 'tachyons/css/tachyons.css'
+import styles from './style.css'
+
+import logo from './logo.svg'
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,47 @@
+
+body {
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: rgba(78, 185, 110, .1);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.bright { color: rgba(78, 185, 110, 1); }
+.b-bright { border-color: rgba(78, 185, 110, 1); }
+.b-bright-dimmed { border-color: rgba(78, 185, 110, .5); }
+.bg-bright { background-color: rgba(78, 185, 110, 1); }
+.bright-dimmed { color: rgba(78, 185, 110, .5); }
+
+.br-left {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.br-right {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+button {
+  border-left: 1px solid rgba(0, 0, 0, .1) !important;
+  color: rgba(78, 185, 110, .8);
+  cursor: pointer;
+  transition: all .25s;
+}
+
+button:hover {
+  color: rgba(78, 185, 110, 1);
+}
+
+.avatar {
+  background-size: cover;
+  background-color: rgba(78, 185, 110, .5);
+  background-blend-mode: screen;
+  /*box-shadow: 0 0 0 2px rgba(78, 185, 110, .4);*/
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,53 @@
+'use strict'
+
+let webpack = require('webpack')
+let HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  context: __dirname + '/src',
+  entry: {
+    javascript: './index.jsx'
+  },
+  output: {
+    filename: 'index.js',
+    path: __dirname + '/public',
+    publicPath: '/'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: './index.html'
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      output: {
+        comments: false
+      }
+    })
+  ],
+  module: {
+    preLoaders: [
+      {
+        test: /\.js$/,
+        loader: 'eslint-loader',
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loaders: ['react-hot', 'babel-loader'],
+      },
+      {
+        test: /\.css?$/,
+        loaders: ['style/url', 'file']
+      },
+      {
+        test: /\.svg?$/,
+        loaders: [
+          'svg-sprite'
+        ]
+      }
+    ]
+  }
+}