Website build update

.eslintrc

@@ -2,7 +2,7 @@
     "rules": {
         "indent": [2],
         "quotes": [2, "double"],
-        "linebreak-style": [2, "unix"],
+        // "linebreak-style": [2, "unix"],
         "semi": [2, "always"]
     },
     "globals": {

.gitignore

@@ -7,6 +7,9 @@ pids
 *.pid
 *.seed
 
+# Ignore the built website directory
+# website/
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

bower.json

@@ -18,7 +18,7 @@
     "tests"
   ],
   "dependencies": {
-    "angular-material": "~0.11",
+    "angular-material": "~1.0.0",
     "angular-sanitize": "*"
   }
 }

gulpfile.js

@@ -14,12 +14,75 @@ var replace = require("gulp-replace");
 var protractor = require("gulp-protractor").protractor;
 var Karma = require("karma").Server;
 var rename = require("gulp-rename");
+var wiredep = require('wiredep');
+var plugins = require('gulp-load-plugins')();
+
+// helper vars for font end build
+var js_src = ['dist/angular-material-calendar.js', 'site_src/js/*.js'];
+var css_src = ['site_src/css/*.css'];
 
 function p(path) {
     return __dirname + (path.charAt(0) === "/" ? "" : "/") + path;
 }
 
-gulp.task("js", function() {
+function processHtml(path) {
+    return gulp.src(path)
+        .pipe(wiredep.stream({
+            fileTypes: {
+                html: {
+                    replace: {
+                        js: function (filePath) {
+                            return '<script src="' + '/js/' + filePath.split('/').pop() + '"></script>';
+                        },
+                        css: function (filePath) {
+                            return '<link rel="stylesheet" href="' + '/css/' + filePath.split('/').pop() + '"/>';
+                        }
+                    }
+                }
+            }
+        }))
+
+        .pipe(plugins.inject(
+            // Just reference the non-minified version of our code
+            gulp.src(js_src, { read: true }), {
+                addRootSlash: false,
+                transform: function (filePath, file, i, length) {
+                    if (filePath.indexOf('dist/') > -1) {
+                        return '<script src="' + filePath.replace('dist', '/js') + '"></script>';
+                    }
+                    return '<script src="' + filePath.replace('site_src', '') + '"></script>';
+                }
+            }))
+
+        .pipe(plugins.inject(
+            // No need to include dist here as the CSS is embedded in the js
+            gulp.src(css_src, { read: false }), {
+                addRootSlash: false,
+                transform: function (filePath, file, i, length) {
+                    return '<link rel="stylesheet" href="' + filePath.replace('site_src', '') + '"/>';
+                }
+            }))
+        // .pipe(concat('index.html')) // this is to let us control the name of the output file
+        .pipe(gulp.dest('website'));
+}
+
+gulp.task('vendor-scripts', function () {
+    return gulp.src(wiredep().js.concat(js_src))
+        .pipe(gulp.dest('website/js'));
+});
+
+gulp.task('vendor-css', function () {
+    return gulp.src(wiredep().css.concat(css_src))
+        .pipe(gulp.dest('website/css'));
+});
+
+gulp.task('index', ['scss', 'html', 'js', 'vendor-scripts', 'vendor-css'], function () {
+    processHtml('site_src/index.html');
+    processHtml('site_src/fullscreen.html');
+    processHtml('site_src/404.html');
+});
+
+gulp.task("js", function () {
     return gulp
         .src(p("src/angular-material-calendar.js"))
         .pipe(eslint())
@@ -37,7 +100,7 @@ gulp.task("js", function() {
         .pipe(gulp.dest(""));
 });
 
-gulp.task("html", function() {
+gulp.task("html", function () {
     return gulp
         .src(p("src/angular-material-calendar.html"))
         .pipe(htmlmin({ collapseWhitespace: true }))
@@ -47,22 +110,22 @@ gulp.task("html", function() {
         .pipe(connect.reload());
 });
 
-gulp.task("js:lint", function() {
+gulp.task("js:lint", function () {
     return gulp
-      .src(p("src/angular-material-calendar.js"))
-      .pipe(eslint())
-      .pipe(eslint.format());
+        .src(p("src/angular-material-calendar.js"))
+        .pipe(eslint())
+        .pipe(eslint.format());
 });
 
-gulp.task("js:lint-ci", function() {
+gulp.task("js:lint-ci", function () {
     return gulp
-      .src(p("src/angular-material-calendar.js"))
-      .pipe(eslint())
-      .pipe(eslint.format())
-      .pipe(eslint.failOnError());
+        .src(p("src/angular-material-calendar.js"))
+        .pipe(eslint())
+        .pipe(eslint.format())
+        .pipe(eslint.failOnError());
 });
 
-gulp.task("scss", function() {
+gulp.task("scss", function () {
     return gulp
         .src(p("src/**/*.scss"))
         .pipe(sass()).on("error", sass.logError)
@@ -79,32 +142,37 @@ gulp.task("scss", function() {
         .pipe(connect.reload());
 });
 
-gulp.task("karma:tdd", function(done) {
+gulp.task("karma:tdd", function (done) {
     new Karma({
         configFile: __dirname + "/karma.conf.js",
         singleRun: false
     }, done).start();
 });
 
-gulp.task("test", ["js:lint-ci"], function() {
+gulp.task("test", ["js:lint-ci"], function () {
     connect.server({ root: "website", port: 3000 });
     gulp
-      .src(["./tests/e2e/**/*.spec.js"])
-      .pipe(protractor({ configFile: p("protractor.conf.js") }))
-      .on("error", function(e) { throw e; })
-      .on("end", connect.serverClose);
+        .src(["./tests/e2e/**/*.spec.js"])
+        .pipe(protractor({
+            configFile: p("protractor.conf.js"),
+            args: ["--troubleshoot", "true"],
+            deug: true
+        }))
+        .on("error", function (e) { throw e; })
+        .on("end", connect.serverClose);
 });
 
-gulp.task("build", function() {
-    runSequence("scss", "html", "js");
+gulp.task("build", function () {
+    runSequence('index');
 });
 
-gulp.task("connect", function() {
+gulp.task("connect", function () {
     connect.server({ livereload: true, root: "website", port: 3000 });
 });
 
-gulp.task("watch", function() {
-    gulp.watch(p("src/**/*"), ["js:lint", "build"]);
+gulp.task("watch", function () {
+    gulp.watch([p("src/**/*"),p("site_src/**/*")], ["js:lint", "build"]);
 });
-
-gulp.task("default", ["karma:tdd", "connect", "watch"]);
+// build first for the case where
+// the developer has been hacking before starting the server
+gulp.task("default", ["build", "karma:tdd", "connect", "watch"]);

package.json

@@ -44,6 +44,8 @@
     "gulp-eslint": "~1.0",
     "gulp-file-insert": "~1.0",
     "gulp-htmlmin": "~1.1",
+    "gulp-inject": "^3.0.0",
+    "gulp-load-plugins": "^1.0.0",
     "gulp-minify-css": "~1.2",
     "gulp-minify-html": "~1.0",
     "gulp-protractor": "~1.0",
@@ -61,7 +63,8 @@
     "node-sass": "^3.3",
     "protractor": "~2.2",
     "replacestream": "~4.0",
-    "run-sequence": "~1.1"
+    "run-sequence": "~1.1",
+    "wiredep": "^2.2.2"
   },
   "dependencies": {
     "angular": "~1.4",

protractor.conf.js

@@ -2,6 +2,7 @@
 exports.config = {
     specs: [ "test/e2e/**/*.spec.js" ],
     seleniumServerJar: "./node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar",
+    // seleniumAddress: 'http://localhost:4444/wd/hub',
     multiCapabilities: [
       {"browserName": "chrome"}
     ],

site_src/404.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="Alertify.js is a lightweight brower alert and dialog plugin.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Angular Material Calendar</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:light&lang=en" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.light_green-lime.min.css" />
+    <!-- inject:css -->
+    <!-- endinject -->
+    <link rel="stylesheet" id="toggleCSS">
+  </head>
+  <body>
+
+    <div class="layout-transparent mdl-layout mdl-js-layout">
+      <header class="mdl-layout__header mdl-layout__header--transparent">
+        <div class="mdl-layout__header-row">
+          <span class="mdl-layout-title ">Angular Material Calendar</span>
+          <div class="mdl-layout-spacer"></div>
+          <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" href="/#getting-started">Getting Started</a>
+            <a class="mdl-navigation__link" href="https://github.com/bradberger/angular-material-calendar">View on GitHub</a>
+          </nav>
+        </div>
+      </header>
+      <div class="mdl-layout__drawer">
+        <span class="mdl-layout-title">Angular Material Calendar</span>
+        <nav class="mdl-navigation">
+          <a class="mdl-navigation__link" href="/#getting-started">Getting Started</a>
+          <a class="mdl-navigation__link" href="https://github.com/bradberger/angular-material-calendar">View on GitHub</a>
+        </nav>
+      </div>
+      <main class="mdl-layout__content">
+        <div class="container text-center">
+            <h1 class="text--bold-shadow mdl-typography--display-4">Angular Material Calendar</h1>
+            <h3 class="text--bold-shadow mdl-typography--display-2">404 Not Found</h3>
+        </div>
+        <div class="page-content" style="box-shadow: inset 0 0 20px rgba(0,0,0,.5)">
+          <div class="container">
+            <h2 class="mdl-typeography--display-3" id="getting-started">This page doesn't exist (yet)</h2>
+            <p>
+              Sorry, you've reached a page that doesn't exist. Don't worry,
+              though. The Angular Material Calendar is open source and you
+              can hack on website on
+              <a href="bradberger/angular-material-calendar">GitHub</a>
+              if you want to add something to it.
+            </p>
+            <p>
+              We'll be waiting for your PR!
+            </p>
+        </div>
+        <footer>
+          <div class="container">
+            <p>Alertify.js is released under the <a href="http://opensource.org/licenses/MPL-2.0">MPL-2.0 license</a>. &copy; 2015 <a href="https://bradb.net">Brad Berger</a> and contributors.
+          </div>
+        </footer>
+      </main>
+    </div>
+    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
+  </body>
+</html>