build(aio): move autolink-headings to post-processing (angular#16336)

The autolinking is now done on the `renderedContent` which means it also
captures and autolinks headings that were generated outside of markdown.

PR Close angular#16336

aio/package.json

@@ -83,10 +83,10 @@
     "lodash": "^4.17.4",
     "protractor": "~5.1.0",
     "rehype": "^4.0.0",
+    "rehype-autolink-headings": "^2.0.0",
+    "rehype-slug": "^2.0.0",
     "remark": "^7.0.0",
-    "remark-autolink-headings": "^4.0.0",
     "remark-html": "^6.0.0",
-    "remark-slug": "^4.2.2",
     "rho": "https://github.com/petebacondarwin/rho#master",
     "rimraf": "^2.6.1",
     "shelljs": "^0.7.7",

aio/tools/transforms/angular-api-package/index.js

@@ -107,9 +107,10 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     });
   })
 
-  .config(function(convertToJsonProcessor, EXPORT_DOC_TYPES) {
+  .config(function(convertToJsonProcessor, postProcessHtml, EXPORT_DOC_TYPES) {
     const DOCS_TO_CONVERT = EXPORT_DOC_TYPES.concat([
       'decorator', 'directive', 'pipe', 'module'
     ]);
     convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
+    postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
   });

aio/tools/transforms/angular-base-package/index.js

@@ -113,6 +113,13 @@ module.exports = new Package('angular-base', [
     ];
   })
 
+
+  .config(function(postProcessHtml) {
+    postProcessHtml.plugins = [
+      require('./post-processors/autolink-headings')
+    ];
+  })
+
   .config(function(convertToJsonProcessor) {
     convertToJsonProcessor.docTypes = [];
   });

aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js

@@ -0,0 +1,22 @@
+const slug = require('rehype-slug');
+const link = require('rehype-autolink-headings');
+
+/**
+ * Get remark to inject anchors into headings
+ */
+module.exports = [
+  slug,
+  [link, {
+    properties: {
+      title: 'Link to this heading',
+      className: ['header-link'],
+      'aria-hidden': 'true'
+    },
+    content: {
+      type: 'element',
+      tagName: 'i',
+      properties: {className: ['material-icons']},
+      children: [{ type: 'text', value: 'link' }]
+    }
+  }]
+];

aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js

@@ -0,0 +1,30 @@
+const processorFactory = require('../../post-process-package/processors/post-process-html');
+const plugin = require('./autolink-headings');
+
+describe('autolink-headings postprocessor', () => {
+  let processor;
+
+  beforeEach(() => {
+    processor = processorFactory();
+    processor.docTypes = ['a'];
+    processor.plugins = [plugin];
+  });
+
+  it('should add anchors to headings', () => {
+    const docs = [ {
+      docType: 'a',
+      renderedContent: `
+        <h1>Heading 1</h2>
+        <h2>Heading with <strong>bold</strong></h2>
+        <h3>Heading with encoded chars &#x26;</h3>
+    `
+    }];
+    processor.$process(docs);
+    expect(docs[0].renderedContent).toEqual(`
+        <h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
+        <h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
+        <h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
+    `);
+  });
+});
+

aio/tools/transforms/angular-content-package/index.js

@@ -112,6 +112,7 @@ module.exports = new Package('angular-content', [basePackage, contentPackage])
   })
 
   // We want the content files to be converted
-  .config(function(convertToJsonProcessor) {
+  .config(function(convertToJsonProcessor, postProcessHtml) {
     convertToJsonProcessor.docTypes.push('content');
+    postProcessHtml.docTypes.push('content');
   });

aio/tools/transforms/remark-package/services/renderMarkdown.js

@@ -1,6 +1,4 @@
 const remark = require('remark');
-const slug = require('remark-slug');
-const autolinkHeadings = require('remark-autolink-headings');
 const html = require('remark-html');
 
 /**
@@ -17,8 +15,6 @@ module.exports = function renderMarkdown() {
                     // .use(() => tree => {
                     //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
                     // })
-                    .use(slug)
-                    .use(autolinkHeadings)
                     .use(html);
 
   return function renderMarkdownImpl(content) {
@@ -107,13 +103,6 @@ module.exports = function renderMarkdown() {
   }
 };
 
-
-
-
-
-
-
-
 /**
  * matchRecursiveRegExp
  *

aio/tools/transforms/remark-package/services/renderMarkdown.spec.js

@@ -16,7 +16,7 @@ describe('remark: renderMarkdown service', () => {
     const output = renderMarkdown(content);
 
     expect(output).toEqual(
-        '<h1 id="heading-1"><a href="#heading-1" aria-hidden="true"><span class="icon icon-link"></span></a>heading 1</h1>\n' +
+        '<h1>heading 1</h1>\n' +
         '<p>A paragraph with <strong>bold</strong> and <em>italic</em>.</p>\n' +
         '<ul>\n' +
         '<li>List item 1</li>\n' +
@@ -67,14 +67,4 @@ describe('remark: renderMarkdown service', () => {
     const output = renderMarkdown(content);
     expect(output).toEqual('<p>some text</p>\n<p>    indented text</p>\n<p>other text</p>\n');
   });
-
-  it('should add id slugs and links to headings', () => {
-    const content = '# heading 1\n\nSome text\n\n## heading 2\n\nMore text';
-    const output = renderMarkdown(content);
-    expect(output).toEqual(
-      '<h1 id="heading-1"><a href="#heading-1" aria-hidden="true"><span class="icon icon-link"></span></a>heading 1</h1>\n' +
-      '<p>Some text</p>\n' +
-      '<h2 id="heading-2"><a href="#heading-2" aria-hidden="true"><span class="icon icon-link"></span></a>heading 2</h2>\n' +
-      '<p>More text</p>\n');
-  });
 });

aio/yarn.lock

@@ -2778,7 +2778,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-github-slugger@^1.0.0:
+github-slugger@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.1.1.tgz#5444671f65e5a5a424cfa8ba3255cc1f7baf07ea"
   dependencies:
@@ -3024,6 +3024,10 @@ hast-util-from-parse5@^1.0.0:
     property-information "^3.1.0"
     vfile-location "^2.0.0"
 
+hast-util-has-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-has-property/-/hast-util-has-property-1.0.0.tgz#211f9d7f7640898244a33f5d16f5c5d1880c8e40"
+
 hast-util-is-element@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.0.0.tgz#3f7216978b2ae14d98749878782675f33be3ce00"
@@ -3056,6 +3060,10 @@ hast-util-to-html@^3.0.0:
     unist-util-is "^2.0.0"
     xtend "^4.0.1"
 
+hast-util-to-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-1.0.0.tgz#16c07671f0f2ac7735e455cdae32c7c1b8963f2a"
+
 hast-util-whitespace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.0.tgz#bd096919625d2936e1ff17bc4df7fd727f17ece9"
@@ -4327,10 +4335,6 @@ mdast-util-to-hast@^2.1.1:
     unist-util-visit "^1.1.0"
     xtend "^4.0.1"
 
-mdast-util-to-string@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.2.tgz#dc996a24d2b521178d3fac3993680c03a683e1dd"
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5651,6 +5655,15 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-autolink-headings@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-autolink-headings/-/rehype-autolink-headings-2.0.0.tgz#105ae3f44ee78f9cd618f16eb0aea3bc61582f00"
+  dependencies:
+    hast-util-has-property "^1.0.0"
+    hast-util-is-element "^1.0.0"
+    unist-util-visit "^1.1.0"
+    xtend "^4.0.1"
+
 rehype-parse@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-3.1.0.tgz#7f5227a597a3f39fc4b938646161539c444ee728"
@@ -5659,6 +5672,16 @@ rehype-parse@^3.0.0:
     parse5 "^2.1.5"
     xtend "^4.0.1"
 
+rehype-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-2.0.0.tgz#b52f6c69faefc61420cb9ea8ba268e48531c61b9"
+  dependencies:
+    github-slugger "^1.1.1"
+    hast-util-has-property "^1.0.0"
+    hast-util-is-element "^1.0.0"
+    hast-util-to-string "^1.0.0"
+    unist-util-visit "^1.1.0"
+
 rehype-stringify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-3.0.0.tgz#9fef0868213c2dce2f780b76f3d0488c85e819eb"
@@ -5678,12 +5701,6 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
-remark-autolink-headings@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/remark-autolink-headings/-/remark-autolink-headings-4.0.0.tgz#1edabab6636e8cb26a36bf4c06caaec28355d3fc"
-  dependencies:
-    unist-util-visit "^1.0.1"
-
 remark-html@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-6.0.0.tgz#ade7d94b60e452158f28615218450682601dbfc1"
@@ -5714,14 +5731,6 @@ remark-parse@^3.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-slug@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-4.2.2.tgz#3cfaa02e2e24d98405b296072f2ebbdfad279eb6"
-  dependencies:
-    github-slugger "^1.0.0"
-    mdast-util-to-string "^1.0.0"
-    unist-util-visit "^1.0.0"
-
 remark-stringify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-3.0.0.tgz#f1720893a3e7c845824d95bb573d628d1346ba2a"
@@ -7012,7 +7021,7 @@ unist-util-stringify-position@^1.0.0:
   dependencies:
     has "^1.0.1"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.0.1, unist-util-visit@^1.1.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.1.tgz#e917a3b137658b335cb4420c7da2e74d928e4e94"