Skip to content

Commit de25cfc

Browse files
petebacondarwinmhevery
petebacondarwin
authored and
mhevery
committed
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
1 parent de36a9b commit de25cfc

9 files changed

Lines changed: 95 additions & 46 deletions

File tree

‎aio/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,10 @@
8383
"lodash": "^4.17.4",
8484
"protractor": "~5.1.0",
8585
"rehype": "^4.0.0",
86+
"rehype-autolink-headings": "^2.0.0",
87+
"rehype-slug": "^2.0.0",
8688
"remark": "^7.0.0",
87-
"remark-autolink-headings": "^4.0.0",
8889
"remark-html": "^6.0.0",
89-
"remark-slug": "^4.2.2",
9090
"rho": "https://github.com/petebacondarwin/rho#master",
9191
"rimraf": "^2.6.1",
9292
"shelljs": "^0.7.7",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,10 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
107107
});
108108
})
109109

110-
.config(function(convertToJsonProcessor, EXPORT_DOC_TYPES) {
110+
.config(function(convertToJsonProcessor, postProcessHtml, EXPORT_DOC_TYPES) {
111111
const DOCS_TO_CONVERT = EXPORT_DOC_TYPES.concat([
112112
'decorator', 'directive', 'pipe', 'module'
113113
]);
114114
convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
115+
postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
115116
});

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,13 @@ module.exports = new Package('angular-base', [
113113
];
114114
})
115115

116+
117+
.config(function(postProcessHtml) {
118+
postProcessHtml.plugins = [
119+
require('./post-processors/autolink-headings')
120+
];
121+
})
122+
116123
.config(function(convertToJsonProcessor) {
117124
convertToJsonProcessor.docTypes = [];
118125
});

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const slug = require('rehype-slug');
2+
const link = require('rehype-autolink-headings');
3+
4+
/**
5+
* Get remark to inject anchors into headings
6+
*/
7+
module.exports = [
8+
slug,
9+
[link, {
10+
properties: {
11+
title: 'Link to this heading',
12+
className: ['header-link'],
13+
'aria-hidden': 'true'
14+
},
15+
content: {
16+
type: 'element',
17+
tagName: 'i',
18+
properties: {className: ['material-icons']},
19+
children: [{ type: 'text', value: 'link' }]
20+
}
21+
}]
22+
];

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const processorFactory = require('../../post-process-package/processors/post-process-html');
2+
const plugin = require('./autolink-headings');
3+
4+
describe('autolink-headings postprocessor', () => {
5+
let processor;
6+
7+
beforeEach(() => {
8+
processor = processorFactory();
9+
processor.docTypes = ['a'];
10+
processor.plugins = [plugin];
11+
});
12+
13+
it('should add anchors to headings', () => {
14+
const docs = [ {
15+
docType: 'a',
16+
renderedContent: `
17+
<h1>Heading 1</h2>
18+
<h2>Heading with <strong>bold</strong></h2>
19+
<h3>Heading with encoded chars &#x26;</h3>
20+
`
21+
}];
22+
processor.$process(docs);
23+
expect(docs[0].renderedContent).toEqual(`
24+
<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>
25+
<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>
26+
<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>
27+
`);
28+
});
29+
});
30+

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ module.exports = new Package('angular-content', [basePackage, contentPackage])
112112
})
113113

114114
// We want the content files to be converted
115-
.config(function(convertToJsonProcessor) {
115+
.config(function(convertToJsonProcessor, postProcessHtml) {
116116
convertToJsonProcessor.docTypes.push('content');
117+
postProcessHtml.docTypes.push('content');
117118
});

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
const remark = require('remark');
2-
const slug = require('remark-slug');
3-
const autolinkHeadings = require('remark-autolink-headings');
42
const html = require('remark-html');
53

64
/**
@@ -17,8 +15,6 @@ module.exports = function renderMarkdown() {
1715
// .use(() => tree => {
1816
// console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
1917
// })
20-
.use(slug)
21-
.use(autolinkHeadings)
2218
.use(html);
2319

2420
return function renderMarkdownImpl(content) {
@@ -107,13 +103,6 @@ module.exports = function renderMarkdown() {
107103
}
108104
};
109105

110-
111-
112-
113-
114-
115-
116-
117106
/**
118107
* matchRecursiveRegExp
119108
*

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe('remark: renderMarkdown service', () => {
1616
const output = renderMarkdown(content);
1717

1818
expect(output).toEqual(
19-
'<h1 id="heading-1"><a href="#heading-1" aria-hidden="true"><span class="icon icon-link"></span></a>heading 1</h1>\n' +
19+
'<h1>heading 1</h1>\n' +
2020
'<p>A paragraph with <strong>bold</strong> and <em>italic</em>.</p>\n' +
2121
'<ul>\n' +
2222
'<li>List item 1</li>\n' +
@@ -67,14 +67,4 @@ describe('remark: renderMarkdown service', () => {
6767
const output = renderMarkdown(content);
6868
expect(output).toEqual('<p>some text</p>\n<p> indented text</p>\n<p>other text</p>\n');
6969
});
70-
71-
it('should add id slugs and links to headings', () => {
72-
const content = '# heading 1\n\nSome text\n\n## heading 2\n\nMore text';
73-
const output = renderMarkdown(content);
74-
expect(output).toEqual(
75-
'<h1 id="heading-1"><a href="#heading-1" aria-hidden="true"><span class="icon icon-link"></span></a>heading 1</h1>\n' +
76-
'<p>Some text</p>\n' +
77-
'<h2 id="heading-2"><a href="#heading-2" aria-hidden="true"><span class="icon icon-link"></span></a>heading 2</h2>\n' +
78-
'<p>More text</p>\n');
79-
});
8070
});

‎aio/yarn.lock‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2778,7 +2778,7 @@ getpass@^0.1.1:
27782778
dependencies:
27792779
assert-plus "^1.0.0"
27802780

2781-
github-slugger@^1.0.0:
2781+
github-slugger@^1.1.1:
27822782
version "1.1.1"
27832783
resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.1.1.tgz#5444671f65e5a5a424cfa8ba3255cc1f7baf07ea"
27842784
dependencies:
@@ -3024,6 +3024,10 @@ hast-util-from-parse5@^1.0.0:
30243024
property-information "^3.1.0"
30253025
vfile-location "^2.0.0"
30263026

3027+
hast-util-has-property@^1.0.0:
3028+
version "1.0.0"
3029+
resolved "https://registry.yarnpkg.com/hast-util-has-property/-/hast-util-has-property-1.0.0.tgz#211f9d7f7640898244a33f5d16f5c5d1880c8e40"
3030+
30273031
hast-util-is-element@^1.0.0:
30283032
version "1.0.0"
30293033
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:
30563060
unist-util-is "^2.0.0"
30573061
xtend "^4.0.1"
30583062

3063+
hast-util-to-string@^1.0.0:
3064+
version "1.0.0"
3065+
resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-1.0.0.tgz#16c07671f0f2ac7735e455cdae32c7c1b8963f2a"
3066+
30593067
hast-util-whitespace@^1.0.0:
30603068
version "1.0.0"
30613069
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:
43274335
unist-util-visit "^1.1.0"
43284336
xtend "^4.0.1"
43294337

4330-
mdast-util-to-string@^1.0.0:
4331-
version "1.0.2"
4332-
resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.2.tgz#dc996a24d2b521178d3fac3993680c03a683e1dd"
4333-
43344338
media-typer@0.3.0:
43354339
version "0.3.0"
43364340
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5651,6 +5655,15 @@ regjsparser@^0.1.4:
56515655
dependencies:
56525656
jsesc "~0.5.0"
56535657

5658+
rehype-autolink-headings@^2.0.0:
5659+
version "2.0.0"
5660+
resolved "https://registry.yarnpkg.com/rehype-autolink-headings/-/rehype-autolink-headings-2.0.0.tgz#105ae3f44ee78f9cd618f16eb0aea3bc61582f00"
5661+
dependencies:
5662+
hast-util-has-property "^1.0.0"
5663+
hast-util-is-element "^1.0.0"
5664+
unist-util-visit "^1.1.0"
5665+
xtend "^4.0.1"
5666+
56545667
rehype-parse@^3.0.0:
56555668
version "3.1.0"
56565669
resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-3.1.0.tgz#7f5227a597a3f39fc4b938646161539c444ee728"
@@ -5659,6 +5672,16 @@ rehype-parse@^3.0.0:
56595672
parse5 "^2.1.5"
56605673
xtend "^4.0.1"
56615674

5675+
rehype-slug@^2.0.0:
5676+
version "2.0.0"
5677+
resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-2.0.0.tgz#b52f6c69faefc61420cb9ea8ba268e48531c61b9"
5678+
dependencies:
5679+
github-slugger "^1.1.1"
5680+
hast-util-has-property "^1.0.0"
5681+
hast-util-is-element "^1.0.0"
5682+
hast-util-to-string "^1.0.0"
5683+
unist-util-visit "^1.1.0"
5684+
56625685
rehype-stringify@^3.0.0:
56635686
version "3.0.0"
56645687
resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-3.0.0.tgz#9fef0868213c2dce2f780b76f3d0488c85e819eb"
@@ -5678,12 +5701,6 @@ relateurl@0.2.x:
56785701
version "0.2.7"
56795702
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
56805703

5681-
remark-autolink-headings@^4.0.0:
5682-
version "4.0.0"
5683-
resolved "https://registry.yarnpkg.com/remark-autolink-headings/-/remark-autolink-headings-4.0.0.tgz#1edabab6636e8cb26a36bf4c06caaec28355d3fc"
5684-
dependencies:
5685-
unist-util-visit "^1.0.1"
5686-
56875704
remark-html@^6.0.0:
56885705
version "6.0.0"
56895706
resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-6.0.0.tgz#ade7d94b60e452158f28615218450682601dbfc1"
@@ -5714,14 +5731,6 @@ remark-parse@^3.0.0:
57145731
vfile-location "^2.0.0"
57155732
xtend "^4.0.1"
57165733

5717-
remark-slug@^4.2.2:
5718-
version "4.2.2"
5719-
resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-4.2.2.tgz#3cfaa02e2e24d98405b296072f2ebbdfad279eb6"
5720-
dependencies:
5721-
github-slugger "^1.0.0"
5722-
mdast-util-to-string "^1.0.0"
5723-
unist-util-visit "^1.0.0"
5724-
57255734
remark-stringify@^3.0.0:
57265735
version "3.0.0"
57275736
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:
70127021
dependencies:
70137022
has "^1.0.1"
70147023

7015-
unist-util-visit@^1.0.0, unist-util-visit@^1.0.1, unist-util-visit@^1.1.0:
7024+
unist-util-visit@^1.0.0, unist-util-visit@^1.1.0:
70167025
version "1.1.1"
70177026
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.1.tgz#e917a3b137658b335cb4420c7da2e74d928e4e94"
70187027

0 commit comments

Comments
 (0)