Merge branch 'manipulation' of https://github.com/google/WebFundamentals

 into manipulation

gulp-tasks/test.js

@@ -27,12 +27,14 @@ const runSequence = require('run-sequence');
  *****************************************************************************/
 
 const MAX_DESCRIPTION_LENGTH = 485;
+const MAX_FILE_SIZE_WARN = 500;   // Max file size (in kB) before warning
+const MAX_FILE_SIZE_ERROR = 2500; // Max file size (in kB) before error
 const MD_FILES = ['.md', '.mdown', '.markdown'];
-const EXTENSIONS_TO_SKIP = [
-  '.css',
+const EXTENSIONS_TO_SKIP = ['.css', '.vtt', '.xml'];
+const MEDIA_FILES = [
   '.gif', '.ico', '.jpg', '.png', '.psd', '.svg',
-  '.mov', '.mp3', '.mp4', '.webm', '.vtt',
-  '.pdf', '.xml'
+  '.mov', '.mp3', '.mp4', '.webm',
+  '.pdf',
 ];
 const VALID_DATE_FORMATS = [
   'YYYY-MM-DD',
@@ -55,6 +57,11 @@ const VALID_VERTICALS = [
   'education', 'entertainment', 'media', 'real-estate', 'retail',
   'transportation', 'travel'
 ];
+const IS_TRAVIS = process.env.TRAVIS === 'true';
+const IS_TRAVIS_PUSH = process.env.TRAVIS_EVENT_TYPE === 'push';
+const IS_TRAVIS_ON_MASTER = process.env.TRAVIS_BRANCH === 'master';
+const TRAVIS_BRANCH = process.env.TRAVIS_BRANCH;
+const TRAVIS_EVENT_TYPE = process.env.TRAVIS_EVENT_TYPE;
 
 let remarkLintOptions = {
   external: [
@@ -186,7 +193,7 @@ function printSummary() {
   gutil.log(' - with issues:', chalk.yellow(cFilesWithIssues));
   gutil.log('Errors  : ', chalk.red(allErrors.length));
   gutil.log('Warnings: ', chalk.yellow(allWarnings.length));
-  if (process.env.TRAVIS === 'true') {
+  if (IS_TRAVIS) {
     let result = {
       summary: {
         filesTested: filesTested,
@@ -315,7 +322,7 @@ function getFiles() {
   } else {
     gutil.log(' ', 'Searching for changed files');
     let cmd = 'git --no-pager diff --name-only ';
-    if (process.env.TRAVIS === 'true') {
+    if (IS_TRAVIS) {
       cmd += 'FETCH_HEAD $(git merge-base FETCH_HEAD master)';
     } else {
       cmd += '$(git merge-base master HEAD)';
@@ -884,6 +891,35 @@ function testFile(filename, opts) {
       return;
     }
 
+    // Check media files & verify they're not too big
+    if (MEDIA_FILES.indexOf(filenameObj.ext) >= 0) {
+      let fsOK = true;
+      try {
+        // Read the file size and check if it exceeds the known limits
+        const stats = fs.statSync(filename);
+        const fileSize = Math.round(parseInt(stats.size, 10) / 1024);
+        if (fileSize > MAX_FILE_SIZE_ERROR) {
+          fsOK = false;
+          msg = `Exceeds maximum files size (${MAX_FILE_SIZE_ERROR}K)`;
+          // For builds of master on Travis, warn only, do not error.
+          if (IS_TRAVIS && IS_TRAVIS_PUSH && IS_TRAVIS_ON_MASTER) {
+            logWarning(filename, null, `${msg} - was ${fileSize}K`);
+          } else {
+            logError(filename, null, `${msg} - was ${fileSize}K`);
+          }
+        } else if (fileSize > MAX_FILE_SIZE_WARN) {
+          fsOK = false;
+          msg = `Try to keep files below (${MAX_FILE_SIZE_WARN}K)`;
+          logWarning(filename, null, `${msg} - was ${fileSize}K`);
+        }
+      } catch (ex) {
+        fsOK = false;
+        logWarning(filename, null, `Unable to read file stats: ${ex.message}`);
+      }
+      resolve(fsOK);
+      return;
+    }
+
     // Attempt to read the file contents
     let contents = readFile(filename);
     if (!contents) {
@@ -955,9 +991,7 @@ function testFile(filename, opts) {
  *****************************************************************************/
 
 gulp.task('test', function() {
-  const travisEventType = process.env.TRAVIS_EVENT_TYPE;
-  const travisBranch = process.env.TRAVIS_BRANCH;
-  if (travisEventType === 'push' && travisBranch === 'master') {
+  if (IS_TRAVIS && IS_TRAVIS_PUSH && IS_TRAVIS_ON_MASTER) {
     GLOBAL.WF.options.testAll = true;
   }
   let opts = {

gulp-tasks/wfTemplateHelper.js

@@ -66,15 +66,15 @@ function getFullFeedEntries(articles) {
         article.feedAuthor = authorName.trim();
       }
     }
-    var rssPubDate = moment(article.datePublished);
+    var rssPubDate = moment.utc(article.datePublished);
     article.rssPubDate = rssPubDate.format('DD MMM YYYY HH:mm:ss [GMT]');
   });
   return articles;
 }
 
 function generateFeeds(files, options) {
   gutil.log(' ', 'Generating RSS and ATOM feeds...');
-  var lastUpdated = files[0].datePublished;
+  var lastUpdated = files[0].dateUpdated;
   var context = {
     title: options.title,
     description: options.description,
@@ -90,8 +90,9 @@ function generateFeeds(files, options) {
     context.baseUrl += options.section + '/';
     context.analyticsQS = context.analyticsQS.replace('root_feed', options.section + '_feed');
   }
-  context.rssPubDate = moment(lastUpdated).format('DD MMM YYYY HH:mm:ss [GMT]');
-  context.atomPubDate = moment(lastUpdated).format('YYYY-MM-DDTHH:mm:ss[Z]');
+  const now = moment.utc(lastUpdated);
+  context.rssPubDate = now.format('DD MMM YYYY HH:mm:ss [GMT]');
+  context.atomPubDate = now.format('YYYY-MM-DDTHH:mm:ss[Z]');
 
   var template = path.join(GLOBAL.WF.src.templates, 'atom.xml');
   var outputFile = path.join(options.outputPath, 'atom.xml');
@@ -118,7 +119,7 @@ function generatePodcastFeed(files, options) {
   if (options.baseUrl) {
     context.baseUrl = options.baseUrl;
   }
-  context.rssPubDate = moment(lastUpdated).format('DD MMM YYYY HH:mm:ss [GMT]');
+  context.rssPubDate = moment.utc(lastUpdated).format('DD MMM YYYY HH:mm:ss [GMT]');
   var template = path.join(GLOBAL.WF.src.templates, 'shows', 'podcast.xml');
   var outputFile = path.join(options.outputPath, 'feed.xml');
   renderTemplate(template, context, outputFile);

src/content/en/fundamentals/accessibility/semantics-builtin/index.md

@@ -134,7 +134,7 @@ screen reader on OS X, called VoiceOver. See [this
 video](https://www.youtube.com/watch?v=QW_dUs9D1oQ) of Victor using VoiceOver.
 
 Now, it's your turn to try using a screen reader. Here is a page with *ChromeVox
-Lite*, a minimal but functioning screen reader written in Javascript. The screen
+Lite*, a minimal but functioning screen reader written in JavaScript. The screen
 is purposefully blurred to simulate a low-vision experience and force the user
 to complete the task with a screen reader. Of course, you'll need to use the
 Chrome browser for this exercise.

src/content/en/fundamentals/architecture/howto-components/glossary.md

@@ -2,7 +2,7 @@ project_path: /web/_project.yaml
 book_path: /web/fundamentals/_book.yaml
 description: "HowTo: Components"
 
-{# wf_updated_on: 2017-06-01 #}
+{# wf_updated_on: 2017-06-12 #}
 {# wf_published_on: 2017-04-06 #}
 # Glossary {: .page-title }
 {% include "web/_shared/contributors/robdodson.html" %}

src/content/en/fundamentals/architecture/howto-components/howto-checkbox.md

@@ -1,7 +1,7 @@
 project_path: /web/_project.yaml
 book_path: /web/fundamentals/_book.yaml
 
-{# wf_updated_on: 2017-06-01#}
+{# wf_updated_on: 2017-06-12#}
 {# wf_published_on: 2017-04-06 #}
 
 # HowTo: Components – howto-checkbox {: .page-title }
@@ -189,10 +189,6 @@ attributeChangedCallback(name, oldValue, newValue) {
 
 ## Demo {: #demo }
 {% framebox height="auto" width="100%" class="demo" suppress_site_styles="true" %}
-<!doctype html>
-<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=false,minimum-scale=1.0">
-<meta encoding="utf8">
 <!--
 Copyright 2017 Google Inc. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -205,7 +201,6 @@ 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.
 -->
-<!doctype html>
 <style>
   howto-checkbox {
     display: inline-block;
@@ -215,22 +210,18 @@ limitations under the License.
     height: 24px;
     vertical-align: middle;
   }
-
   howto-checkbox[aria-checked="true"] {
     background: url('/web/fundamentals/architecture/howto-components/./images/checked-checkbox.svg') no-repeat;
     background-size: contain;
   }
-
   howto-checkbox[aria-disabled="true"] {
     background: url('/web/fundamentals/architecture/howto-components/./images/unchecked-checkbox-disabled.svg') no-repeat;
     background-size: contain;
   }
-
   howto-checkbox[aria-checked="true"][aria-disabled="true"] {
     background: url('/web/fundamentals/architecture/howto-components/./images/checked-checkbox-disabled.svg') no-repeat;
     background-size: contain;
   }
-
   #join-label {
     vertical-align: middle;
     display: inline-block;
@@ -436,8 +427,7 @@ limitations under the License.
 
 <li class="linecomment ">
 <div class="literate-text empty"></div>
-<pre><code class="literate-code ">&lt;!doctype html&gt;
-&lt;style&gt;
+<pre><code class="literate-code ">&lt;style&gt;
 <sPan class="indent">&nbsp;&nbsp;</span>howto-checkbox {
 <sPan class="indent">&nbsp;&nbsp;</span><sPan class="indent">&nbsp;&nbsp;</span>display: inline-block;
 <sPan class="indent">&nbsp;&nbsp;</span><sPan class="indent">&nbsp;&nbsp;</span>background: url('./images/unchecked-checkbox.svg') no-repeat;

src/content/en/fundamentals/architecture/howto-components/howto-tooltip.md

@@ -1,7 +1,7 @@
 project_path: /web/_project.yaml
 book_path: /web/fundamentals/_book.yaml
 
-{# wf_updated_on: 2017-06-01#}
+{# wf_updated_on: 2017-06-12#}
 {# wf_published_on: 2017-04-06 #}
 
 # HowTo: Components – howto-tooltip {: .page-title }
@@ -50,10 +50,6 @@ connectedCallback() {
 
 ## Demo {: #demo }
 {% framebox height="auto" width="100%" class="demo" suppress_site_styles="true" %}
-<!doctype html>
-<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=false,minimum-scale=1.0">
-<meta encoding="utf8">
 <!--
 Copyright 2017 Google Inc. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -66,8 +62,6 @@ 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.
 -->
-<!doctype html>
-
 <style>
   /* The tooltip is by default unstyled. */
   howto-tooltip {
@@ -77,7 +71,6 @@ limitations under the License.
     color: #fff;
     border-radius: 3px;
   }
-
 </style>
 
 <div class="text">
@@ -192,9 +185,7 @@ window.customElements.define('howto-tooltip', HowtoTooltip);
 
 <li class="linecomment ">
 <div class="literate-text empty"></div>
-<pre><code class="literate-code ">&lt;!doctype html&gt;
-
-&lt;style&gt;</code></pre>
+<pre><code class="literate-code ">&lt;style&gt;</code></pre>
 </li>
 
 <li class="blockcomment ">

src/content/en/fundamentals/architecture/howto-components/overview.md

@@ -2,7 +2,7 @@ project_path: /web/_project.yaml
 book_path: /web/fundamentals/_book.yaml
 description: "HowTo: Components"
 
-{# wf_updated_on: 2017-06-01 #}
+{# wf_updated_on: 2017-06-12 #}
 {# wf_published_on: 2017-04-06 #}
 # HowTo: Components – Overview {: .page-title }
 {% include "web/_shared/contributors/ewagasperowicz.html" %}

src/content/en/fundamentals/discovery-and-monetization/payment-request/android-pay.md

@@ -150,7 +150,7 @@ your behalf and returns a chargeable gateway token.
 
     var supportedInstruments = [
       {
-        supportedMethods: ['basic-card']
+        supportedMethods: ['basic-card'],
         data: {
           supportedNetworks: ['amex', 'discover', 'mastercard', 'visa']
         }
@@ -233,7 +233,7 @@ refer to the specific gateway's documentation for more details.
 
       var supportedInstruments = [
         {
-          supportedMethods: ['basic-card']
+          supportedMethods: ['basic-card'],
           data: {
             supportedNetworks: ['amex', 'discover','mastercard','visa'],
             supportedTypes: ['credit']
@@ -380,7 +380,7 @@ in the PaymentRequest.
 
     var supportedInstruments = [
       {
-        supportedMethods: ['basic-card']
+        supportedMethods: ['basic-card'],
         data: {
           supportedNetworks: ['amex', 'discover','mastercard','visa'],
           supportedTypes: ['credit']
@@ -396,7 +396,7 @@ in the PaymentRequest.
             tokenizationType: 'NETWORK_TOKEN',
             parameters: {
               //public key to encrypt response from Android Pay
-              'publicKey': 'BC9u7amr4kFD8qsdxnEfWV7RPDR9v4gLLkx3jfyaGOvxBoEuLZKE0Tt5O/2jMMxJ9axHpAZD2Jhi4E74nqxr944='
+              publicKey: 'BC9u7amr4kFD8qsdxnEfWV7RPDR9v4gLLkx3jfyaGOvxBoEuLZKE0Tt5O/2jMMxJ9axHpAZD2Jhi4E74nqxr944='
             }
           }
         }