diff --git a/aio/package.json b/aio/package.json index 4015a08465d..e07bd2521cb 100644 --- a/aio/package.json +++ b/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", diff --git a/aio/tools/transforms/angular-api-package/index.js b/aio/tools/transforms/angular-api-package/index.js index b86b541a9ee..9dd26f5653e 100644 --- a/aio/tools/transforms/angular-api-package/index.js +++ b/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); }); diff --git a/aio/tools/transforms/angular-base-package/index.js b/aio/tools/transforms/angular-base-package/index.js index 0ee75eb0ee0..126ae0437b8 100644 --- a/aio/tools/transforms/angular-base-package/index.js +++ b/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 = []; }); diff --git a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js new file mode 100644 index 00000000000..5b9c353f780 --- /dev/null +++ b/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' }] + } + }] +]; diff --git a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js new file mode 100644 index 00000000000..aa40561d8e0 --- /dev/null +++ b/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: ` +

Heading 1

+

Heading with bold

+

Heading with encoded chars &

+ ` + }]; + processor.$process(docs); + expect(docs[0].renderedContent).toEqual(` +

Heading 1

+

Heading with bold

+

Heading with encoded chars &

+ `); + }); +}); + diff --git a/aio/tools/transforms/angular-content-package/index.js b/aio/tools/transforms/angular-content-package/index.js index 013e020a005..e5bed771a90 100644 --- a/aio/tools/transforms/angular-content-package/index.js +++ b/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'); }); diff --git a/aio/tools/transforms/remark-package/services/renderMarkdown.js b/aio/tools/transforms/remark-package/services/renderMarkdown.js index acfa9ab4f83..5791bd5f909 100644 --- a/aio/tools/transforms/remark-package/services/renderMarkdown.js +++ b/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 * diff --git a/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js b/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js index c74e9573a65..989512bb578 100644 --- a/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js +++ b/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js @@ -16,7 +16,7 @@ describe('remark: renderMarkdown service', () => { const output = renderMarkdown(content); expect(output).toEqual( - '

heading 1

\n' + + '

heading 1

\n' + '

A paragraph with bold and italic.

\n' + '