docs: share 'styles.css' across all samples all langs; fix styles

Author: wardbell

gulpfile.js

@@ -67,7 +67,16 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
   return new Minimatch(excludePattern)
 });
 
-var _exampleBoilerplateFiles = ['package.json', 'tsconfig.json', 'typings.json', 'karma.conf.js', 'karma-test-shim.js' ];
+var _exampleBoilerplateFiles = [
+  'karma.conf.js', 
+  'karma-test-shim.js', 
+  'package.json', 
+  'styles.css', 
+  'tsconfig.json', 
+  'typings.json' 
+ ];
+
+var _exampleDartWebBoilerPlateFiles = ['styles.css'];
 
 // --filter may be passed in to filter/select _example app subdir names
 // i.e. gulp run-e2e-tests --filter=foo  ; would select all example apps with
@@ -241,24 +250,35 @@ gulp.task('add-example-boilerplate', function() {
     fsUtils.addSymlink(realPath, linkPath);
   });
 
-  copyExampleBoilerplate();
+  return copyExampleBoilerplate();
 });
 
 // copies boilerplate files to locations
 // where an example app is found
+// also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web
 // also copies protractor.config.js file
 function copyExampleBoilerplate() {
   var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
     return path.join(EXAMPLES_PATH, fn);
   });
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
-  // copies protractor.config.js from _examples dir to each subdir that
-  // contains a e2e-spec file.
-  return copyFiles(sourceFiles, examplePaths).then(function() {
-    var sourceFiles = [ path.join(EXAMPLES_PATH, 'protractor.config.js') ];
-    var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
-    return copyFiles(sourceFiles, e2eSpecPaths);
+  
+  var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){
+    return path.join(EXAMPLES_PATH, fn);
   });
+  var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
+
+  return copyFiles(sourceFiles, examplePaths)
+    .then(function() {
+      return copyFiles(dartWebSourceFiles, dartExampleWebPaths);
+    })
+    // copy protractor.config.js from _examples dir to each subdir that
+    // contains a e2e-spec file.
+    .then(function() {
+      var sourceFiles = [ path.join(EXAMPLES_PATH, 'protractor.config.js') ];
+      var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
+      return copyFiles(sourceFiles, e2eSpecPaths);
+    });
 }
 
 gulp.task('remove-example-boilerplate', function() {
@@ -273,10 +293,16 @@ gulp.task('remove-example-boilerplate', function() {
   });  
 
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
-  return deleteFiles(_exampleBoilerplateFiles, examplePaths).then(function() {
-    var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
-    return deleteFiles(['protractor.config.js'], e2eSpecPaths);
-  })
+  var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
+  
+  return deleteFiles(_exampleBoilerplateFiles, examplePaths)
+    .then(function() {
+      return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
+    })
+    .then(function() {
+      var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
+      return deleteFiles(['protractor.config.js'], e2eSpecPaths);
+    })
 });
 
 gulp.task('serve-and-sync', ['build-docs'], function (cb) {
@@ -300,7 +326,9 @@ gulp.task('build-and-serve', ['build-docs'], function (cb) {
   watchAndSync({localFiles: true}, cb);
 });
 
-gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
+gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers']);
+// Stop zipping examples Feb 28, 2016
+//gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
 
 gulp.task('build-api-docs', ['build-js-api-docs', 'build-ts-api-docs', 'build-dart-cheatsheet']);
 
@@ -317,7 +345,10 @@ gulp.task('build-js-api-docs', ['_shred-api-examples'], function() {
 });
 
 gulp.task('build-plunkers', function() {
-  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+  return copyExampleBoilerplate()  
+    .then(function() {
+      return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+    });
 });
 
 gulp.task('build-dart-cheatsheet', [], function() {
@@ -557,6 +588,11 @@ function getExamplePaths(basePath, includeBase) {
   return getPaths(basePath, "example-config.json", includeBase)
 }
 
+function getDartExampleWebPaths(basePath) {
+  var paths = globby.sync([path.join(basePath,"**/dart/**/web")])
+  return paths;
+}
+
 function getPaths(basePath, filename, includeBase) {
   var filenames = getFilenames(basePath, filename, includeBase);
   var paths = filenames.map(function(fileName) {

public/docs/_examples/.gitignore

@@ -1,3 +1,4 @@
+styles.css
 typings
 typings.json
 *.js.map

public/docs/_examples/architecture/dart/web/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Intro to Angular 2</title>
+  <link rel="stylesheet" href="styles.css">  
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/architecture/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Intro to Angular 2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/attribute-directives/dart/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Attribute Directives</title>
+    <link rel="stylesheet" href="styles.css">    
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/attribute-directives/ts/index.html

@@ -4,7 +4,8 @@
   <head>
     <title>Attribute Directives</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-          
+    <link rel="stylesheet" href="styles.css">
+
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css

@@ -1,9 +1,3 @@
-/* route-link anchor tags */
-nav a {padding: 5px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
-nav a:visited, a:link {color: #444;}
-nav a:hover {color: white; background-color: #1171a3; }
-nav a.router-link-active {color: white; background-color: #52b9e9; }
-
 .active {font-style: italic;}
 .shazam {font-weight: bold;}
 

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css

@@ -7,7 +7,7 @@ table {
   font-family:Arial, Helvetica, sans-serif;
   color:#666;
   font-size:14px;
-  text-shadow: 1px 1px 0px #fff;
+  text-shadow: 1px 1px 0 #fff;
   margin:20px;
   border:#ccc 1px solid;
 

public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html

@@ -4,6 +4,9 @@
     <base href="/">
     <title>Angular 1 to Angular 2 Quick Reference</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #docregion style -->
+    <link rel="stylesheet" href="styles.css">
+    <!-- #enddocregion style -->
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/cb-component-communication/ts/index.html

@@ -6,6 +6,7 @@
     <style>
       .to-top {margin-top: 8px; display: block;}
     </style>
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/dependency-injection/dart/web/index.html

@@ -4,7 +4,7 @@
 <head>
   <title>Dependency Injection</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
+  <link rel="stylesheet" href="styles.css">
   <script type="application/dart" src="main.dart"></script>
 </head>
 <body>

public/docs/_examples/dependency-injection/ts/index.html

@@ -4,6 +4,7 @@
  <head>
     <title>Dependency Injection</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/displaying-data/dart/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Displaying Data</title>
+    <link rel="stylesheet" href="styles.css">    
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/displaying-data/ts/index.1.html

@@ -3,6 +3,7 @@
   <head>
     <title>Displaying Data</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/displaying-data/ts/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Displaying Data</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/forms/js/styles.css renamed to public/docs/_examples/forms/dart/web/forms.css

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="bootstrap.min.css">
 	  <!-- #enddocregion bootstrap-and-script -->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="forms.css">    
 	  <!-- #enddocregion styles -->
 	  <!-- #docregion initial -->
 	  <!-- #docregion bootstrap-and-script -->

public/docs/_examples/forms/dart/web/index.html

@@ -11,6 +11,7 @@
     <!-- #enddocregion bootstrap -->
     <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="form.css">
     <!-- #enddocregion styles -->
 
    <!-- IE required polyfill -->

public/docs/_examples/forms/dart/web/styles.css

@@ -0,0 +1,9 @@
+/* #docregion */
+.ng-valid[required] {
+  border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid {
+  border-left: 5px solid #a94442; /* red */
+}
+/* #enddocregion */

public/docs/_examples/forms/ts/styles.css renamed to public/docs/_examples/forms/js/forms.css

@@ -10,6 +10,7 @@
      <!-- #enddocregion bootstrap -->
      <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="forms.css">
      <!-- #enddocregion styles -->
 
     <!-- IE required polyfills, in this exact order -->

public/docs/_examples/forms/js/index.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hierarchical Injector</title>
+    <link rel="stylesheet" href="styles.css">
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/forms/ts/forms.css

@@ -3,6 +3,7 @@
   <head>
     <title>Hierarchical Injectors</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/forms/ts/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Hello World</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->

public/docs/_examples/hierarchical-dependency-injection/dart/web/index.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Hello World</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/hierarchical-dependency-injection/ts/index.html

@@ -4,8 +4,8 @@
   <head>
     <title>Angular 2 Tabs</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->

public/docs/_examples/homepage-hello-world/ts/index.1.html

@@ -4,8 +4,8 @@
   <head>
     <title>Angular 2 Tabs</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/homepage-hello-world/ts/index.html

@@ -4,8 +4,8 @@
   <head>
     <title>Angular 2 Todos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->

public/docs/_examples/homepage-tabs/ts/index.1.html

@@ -4,9 +4,9 @@
   <head>
     <title>Angular 2 Todos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
-        
+    <link rel="stylesheet" href="styles.css">
+
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

public/docs/_examples/homepage-tabs/ts/index.html

@@ -4,6 +4,7 @@
 
 <head>
   <title>Angular 2 Lifecycle Hooks</title>
+  <link rel="stylesheet" href="styles.css">
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/homepage-todo/ts/index.1.html

@@ -4,6 +4,7 @@
   <head>
     <title>Angular 2 Lifecycle Hooks</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/homepage-todo/ts/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Pipes Example</title>
+  <link rel="stylesheet" href="styles.css">
   <script defer src="main.dart" type="application/dart"></script>
   <script defer src="packages/browser/dart.js"></script>
 </head>

public/docs/_examples/lifecycle-hooks/dart/web/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>Pipes</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

public/docs/_examples/lifecycle-hooks/ts/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Getting Started</title>
+    <link rel="stylesheet" href="styles.css">
 
     <!-- #docregion loaddart -->
     <script async src="main.dart" type="application/dart"></script>

public/docs/_examples/pipes/dart/web/index.html

@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Getting Started</title>
+    <link rel="stylesheet" href="styles.css">
 
     <!-- #docregion loaddart -->
     <script async src="main.dart" type="application/dart"></script>