From ea84c7f417a5f7842135f39530184a31595d9084 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 8 Mar 2017 16:25:46 -0800
Subject: [PATCH 1/3] class alias tags in html generated from markdown

---
 package.json             |  1 +
 tools/gulp/tasks/docs.ts | 36 ++++++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 47cb62040134..9c3e7b764237 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "gulp-clean-css": "^3.0.3",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
+    "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
     "gulp-highlight-files": "0.0.4",
     "gulp-htmlmin": "^3.0.0",
diff --git a/tools/gulp/tasks/docs.ts b/tools/gulp/tasks/docs.ts
index 9007f9df2334..74e4c96007fc 100644
--- a/tools/gulp/tasks/docs.ts
+++ b/tools/gulp/tasks/docs.ts
@@ -9,6 +9,7 @@ const highlight = require('gulp-highlight-files');
 const rename = require('gulp-rename');
 const flatten = require('gulp-flatten');
 const hljs = require('highlight.js');
+const dom  = require('gulp-dom');
 
 // Our docs contain comments of the form `<!-- example(...) -->` which serve as placeholders where
 // example code should be inserted. We replace these comments with divs that have a
@@ -21,6 +22,24 @@ const EXAMPLE_PATTERN = /<!--\W*example\(([^)]+)\)\W*-->/g;
 // documentation page. Using a RegExp to rewrite links in HTML files to work in the docs.
 const LINK_PATTERN = /(<a[^>]*) href="([^"]*)"/g;
 
+// HTML tags in the markdown generated files that should receive a .docs-markdown-${tagName} class
+// for styling purposes.
+const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
+  'a',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'li',
+  'ol',
+  'p',
+  'table',
+  'tbody',
+  'td',
+  'th'
+];
+
 task('docs', ['markdown-docs', 'highlight-docs', 'api-docs']);
 
 task('markdown-docs', () => {
@@ -38,6 +57,15 @@ task('markdown-docs', () => {
         }
       }))
       .pipe(transform(transformMarkdownFiles))
+      .pipe(dom(function () {
+        MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {
+          Array.prototype.slice.call(this.querySelectorAll(tag)).forEach((el: any) => {
+            el.classList.add(`docs-markdown-${tag}`);
+          });
+        });
+
+        return this;
+      }))
       .pipe(dest('dist/docs/markdown'));
 });
 
@@ -49,10 +77,10 @@ task('highlight-docs', () => {
   };
 
   return src('src/examples/**/*.+(html|css|ts)')
-    .pipe(flatten())
-    .pipe(rename(renameFile))
-    .pipe(highlight())
-    .pipe(dest('dist/docs/examples'));
+      .pipe(flatten())
+      .pipe(rename(renameFile))
+      .pipe(highlight())
+      .pipe(dest('dist/docs/examples'));
 });
 
 task('api-docs', () => {

From 421d7b730ff3f5578775ed8dcb80d0e4f627e508 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 9 Mar 2017 10:45:46 -0800
Subject: [PATCH 2/3] addressed comments

---
 tools/gulp/tasks/docs.ts | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/tools/gulp/tasks/docs.ts b/tools/gulp/tasks/docs.ts
index 74e4c96007fc..a2a028830dba 100644
--- a/tools/gulp/tasks/docs.ts
+++ b/tools/gulp/tasks/docs.ts
@@ -37,7 +37,9 @@ const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
   'table',
   'tbody',
   'td',
-  'th'
+  'th',
+  'tr',
+  'ul'
 ];
 
 task('docs', ['markdown-docs', 'highlight-docs', 'api-docs']);
@@ -57,15 +59,7 @@ task('markdown-docs', () => {
         }
       }))
       .pipe(transform(transformMarkdownFiles))
-      .pipe(dom(function () {
-        MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {
-          Array.prototype.slice.call(this.querySelectorAll(tag)).forEach((el: any) => {
-            el.classList.add(`docs-markdown-${tag}`);
-          });
-        });
-
-        return this;
-      }))
+      .pipe(dom(createTagNameAliaser('docs-markdown')))
       .pipe(dest('dist/docs/markdown'));
 });
 
@@ -123,3 +117,20 @@ function fixMarkdownDocLinks(link: string, filePath: string): string {
   // guides can be loaded in the Material docs.
   return `guide/${baseName}`;
 }
+
+/**
+ * Returns a function to be called with an HTML document as its context that aliases HTML tags by
+ * adding a class consisting of a prefix + the tag name.
+ * @param classPrefix The prefix to use for the alias class.
+ */
+function createTagNameAliaser(classPrefix: string) {
+  return function() {
+    MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {
+      for (let el of this.querySelectorAll(tag)) {
+        el.classList.add(`${classPrefix}-${tag}`);
+      }
+    });
+
+    return this;
+  };
+}

From b218b6d88f7cd486a084154f0f73b0018379bdce Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 9 Mar 2017 11:08:55 -0800
Subject: [PATCH 3/3] address comments

---
 tools/gulp/tasks/docs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/gulp/tasks/docs.ts b/tools/gulp/tasks/docs.ts
index a2a028830dba..6f2c6e76418e 100644
--- a/tools/gulp/tasks/docs.ts
+++ b/tools/gulp/tasks/docs.ts
@@ -125,7 +125,7 @@ function fixMarkdownDocLinks(link: string, filePath: string): string {
  */
 function createTagNameAliaser(classPrefix: string) {
   return function() {
-    MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {
+    MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach(tag => {
       for (let el of this.querySelectorAll(tag)) {
         el.classList.add(`${classPrefix}-${tag}`);
       }