Merge pull request #1411 from google/getting-started-with-templates

Simplify the templates zip file so they are easier to grasp.

docs/_templates/templates.html

@@ -10,7 +10,7 @@
     <p class="mdl-cell mdl-cell--12-col">
       {{ template.description }}
     </p>
-    <a href="https://storage.googleapis.com/code.getmdl.io/$$version$$/mdl-templates.zip" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+    <a href="$$hosted_libs_prefix$$/$$version$$/$$template_archive_prefix$${{ template.name }}.zip" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
         <i class="material-icons">file_download</i>
       </button>

gulpfile.js

@@ -36,6 +36,7 @@ var pkg = require('./package.json');
 var through = require('through2');
 var swig = require('swig');
 var hostedLibsUrlPrefix = 'https://storage.googleapis.com/code.getmdl.io';
+var templateArchivePrefix = 'mdl-template-';
 var bucketProd = 'gs://www.getmdl.io';
 var bucketStaging = 'gs://mdl-staging';
 var bucketCode = 'gs://code.getmdl.io';
@@ -403,6 +404,7 @@ gulp.task('pages', ['components'], function() {
     .pipe(applyTemplate())
     .pipe($.replace('$$version$$', pkg.version))
     .pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
+    .pipe($.replace('$$template_archive_prefix$$', templateArchivePrefix))
     /* Replacing code blocks class name to match Prism's. */
     .pipe($.replace('class="lang-', 'class="language-'))
     /* Translate html code blocks to "markup" because that's what Prism uses. */
@@ -491,37 +493,35 @@ gulp.task('zip:mdl', function() {
     .pipe(gulp.dest('dist'));
 });
 
-// Generate release archive containing the library, templates and assets
+// Returns the list of children directories inside the given directory.
-// for templates. Note that it is intentional for some templates to include
+function getSubDirectories(dir) {
-// a customised version of the material.min.css file for their own needs.
+  return fs.readdirSync(dir)
-// Others (e.g the Android template) simply use the default built version of
+    .filter(function(file) {
-// the library.
+      return fs.statSync(dir + '/' + file).isDirectory();
-
+    });
-// Define a filter containing only the build assets we want to pluck from the
+}
-// `dist` stream. This enables us to preserve the correct final dir structure,
-// which was not occurring when simply using `gulp.src` in `zip:templates`
-
-var fileFilter = $.filter([
-  'material?(.min)@(.js|.css)?(.map)',
-  'templates/**/*.*',
-  'assets/**/*.*',
-  'LICENSE',
-  'bower.json',
-  'package.json']);
 
+// Generate release archives containing the templates and assets for templates.
 gulp.task('zip:templates', function() {
-  // Stream of all `dist` files and other package manager files from root
+  var templates = getSubDirectories('dist/templates');
-  return gulp.src(['dist/**/*.*', 'LICENSE', 'bower.json', 'package.json'])
+
-  .pipe(fileFilter)
+  // Generate a zip file for each template.
-  .pipe($.zip('mdl-templates.zip'))
+  var generateZips = templates.map(function(template) {
-  .pipe(fileFilter.restore())
+    return gulp.src(['dist/templates/' + template + '/**/*.*', 'LICENSE'])
+      .pipe($.rename(function(path) {
+        path.dirname = path.dirname.replace('dist/templates/' + template, '');
+      }))
+      .pipe($.zip(templateArchivePrefix + template + '.zip'))
       .pipe(gulp.dest('dist'));
   });
 
+  return merge(generateZips);
+});
+
 gulp.task('zip', ['zip:templates', 'zip:mdl']);
 
 gulp.task('genCodeFiles', function() {
-  return gulp.src(['dist/material.*@(js|css)?(.map)', 'dist/mdl.zip', 'dist/mdl-templates.zip'],
+  return gulp.src(['dist/material.*@(js|css)?(.map)', 'dist/mdl.zip', 'dist/' + templateArchivePrefix + '*.zip'],
       {read: false})
     .pipe($.tap(function(file, t) {
       codeFiles += ' dist/' + path.basename(file.path);
@@ -638,23 +638,6 @@ gulp.task('publish:staging', function() {
   mdlPublish('staging');
 });
 
-gulp.task('templates:mdl', function() {
-  return gulp.src([
-    'templates/**/*.scss'
-  ])
-    .pipe($.sass({
-      precision: 10,
-      onError: console.error.bind(console, 'Sass error:')
-    }))
-    .pipe($.cssInlineImages({
-      webRoot: 'src'
-    }))
-    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
-    .pipe($.csso())
-    .pipe($.rename({suffix: '.min'}))
-    .pipe(gulp.dest('dist/templates'));
-});
-
 gulp.task('_release', function() {
   return gulp.src(['dist/material?(.min)@(.js|.css)?(.map)', 'LICENSE',
     'README.md', 'bower.json', 'package.json', './sr?/**/*', 'gulpfile.js'])
@@ -685,6 +668,8 @@ gulp.task('templates:static', function() {
   return gulp.src([
     'templates/**/*.html',
   ])
+  .pipe($.replace('$$version$$', pkg.version))
+  .pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
   .pipe(gulp.dest('dist/templates'));
 });
 
@@ -706,7 +691,7 @@ gulp.task('templates:fonts', function() {
   .pipe(gulp.dest('dist/templates/'));
 });
 
-gulp.task('templates', ['templates:static', 'templates:images', 'templates:mdl',
+gulp.task('templates', ['templates:static', 'templates:images',
     'templates:fonts', 'templates:styles']);
 
 gulp.task('styles:gen', ['styles'], function() {

templates/android-dot-com/index.html

@@ -27,7 +27,7 @@
     <!-- Page styles -->
     <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;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.0/material.min.css">
+    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -324,8 +324,6 @@
       </div>
     </div>
     <a href="https://github.com/google/material-design-lite/blob/master/templates/android-dot-com/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
-    <script src="../../material.min.js"></script>
+    <script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
-
-
   </body>
 </html>

templates/article/index.html

@@ -45,7 +45,7 @@
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
-    <link rel="stylesheet" href="material.min.css">
+    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.teal-red.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -133,6 +133,6 @@
       </main>
     </div>
     <a href="https://github.com/google/material-design-lite/blob/master/templates/article/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
-    <script src="../../material.min.js"></script>
+    <script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
   </body>
 </html>

templates/article/material.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../src/_color-definitions.scss';
-$color-primary: $palette-teal-500;
-$color-primary-dark: $palette-teal-800;
-$color-accent: $palette-red-A200;
-$color-primary-contrast: $color-dark-contrast;
-$color-accent-contrast: $color-dark-contrast;
-@import '../../src/material-design-lite';

templates/blog/entry.html

@@ -45,7 +45,7 @@
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
-    <link rel="stylesheet" href="material.min.css">
+    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.grey-orange.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -202,7 +202,7 @@
       </main>
       <div class="mdl-layout__obfuscator"></div>
     </div>
-    <a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
+    <a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--white">View Source</a>
-    <script src="../../material.min.js"></script>
+    <script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
   </body>
 </html>

templates/blog/index.html

@@ -44,7 +44,7 @@
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" href="material.min.css">
+    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.grey-orange.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -176,8 +176,8 @@
       </main>
       <div class="mdl-layout__obfuscator"></div>
     </div>
-    <a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
+    <a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--white">View Source</a>
-    <script src="../../material.min.js"></script>
+    <script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
   </body>
   <script>
     Array.prototype.forEach.call(document.querySelectorAll('.mdl-card__media'), function(el) {

templates/blog/material.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../src/_color-definitions.scss';
-$color-primary: $palette-grey-500;
-$color-primary-dark: $palette-grey-300;
-$color-accent: $palette-orange-A200;
-/* $color-primary-contrast: $color-light-contrast; */
-/* $color-accent-contrast: $color-light-contrast; */
-@import '../../src/material-design-lite';

templates/dashboard/index.html

@@ -44,7 +44,7 @@
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" href="material.min.css">
+    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.cyan-light_blue.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -242,7 +242,7 @@
           </g>
         </defs>
       </svg>
-      <a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
+      <a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">View Source</a>
-    <script src="../../material.min.js"></script>
+    <script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
   </body>
 </html>

templates/dashboard/material.scss

@@ -1,26 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../src/_color-definitions.scss';
-$color-primary: $palette-cyan-500;
-$color-primary-dark: $palette-cyan-700;
-$color-accent: $palette-cyan-600;
-$color-primary-contrast: $color-dark-contrast;
-$color-accent-contrast: $color-dark-contrast;
-$grid-desktop-gutter: 32px;
-
-
-@import '../../src/material-design-lite';

templates/text-only/index.html

@@ -45,7 +45,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
-    <link rel="stylesheet" href="material.min.css">
+    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.deep_purple-pink.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -291,6 +291,6 @@
       </main>
     </div>
     <a href="https://github.com/google/material-design-lite/blob/master/templates/text-only/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
-    <script src="../../material.min.js"></script>
+    <script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
   </body>
 </html>

templates/text-only/material.scss

@@ -1,24 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../src/_color-definitions.scss';
-$color-primary: $palette-deep-purple-600;
-$color-primary-dark: $palette-deep-purple-800;
-$color-accent: $palette-pink-A200;
-$color-primary-contrast: $color-dark-contrast;
-$color-accent-contrast: $color-dark-contrast;
-
-@import '../../src/material-design-lite';