fix(docs-infra): do not include GitHub links in Table of Content (#32418)

The docs template for cli commands ([cli-command.template.html][1])
includes an `h2` element with GitHub links for [long description][2].
Since the content of `h2` elements is replicated in the auto-generated
Table of Contents, the GitHub links were replicated as well (which is
undesirable).

This commit fixes it by explicitly excluding `.github-links` elements,
when extracting the content for the ToC (in
[TocService#extractHeadingSafeHtml()][3]). This is similar to what we do
for the auto-generated `.header-link` anchors.

[1]: https://github.com/angular/angular/blob/1537791f0/aio/tools/transforms/templates/cli/cli-command.template.html
[2]: https://github.com/angular/angular/blob/1537791f0/aio/tools/transforms/templates/cli/cli-command.template.html#L18
[3]: https://github.com/angular/angular/blob/1537791f0/aio/src/app/shared/toc.service.ts#L56

PR Close #32418
This commit is contained in:
George Kalpakas 2019-08-30 22:18:26 +03:00 committed by Matias Niemelä
parent 007282d2bb
commit d4003452c7
2 changed files with 8 additions and 4 deletions

View File

@ -305,6 +305,10 @@ describe('TocService', () => {
<a class="header-link" href="tutorial/toh-pt1#setup-to-develop-locally" aria-hidden="true">
<span class="icon">icon-link</span>
</a>
<div class="github-links">
<a>GitHub</a>
<a>links</a>
</div>
</h2>
`, docId);
@ -319,7 +323,7 @@ describe('TocService', () => {
expect(tocItem.title).toEqual('Setup to develop locally.');
});
it('should have removed anchor link from tocItem html content', () => {
it('should have removed anchor link and GitHub links from tocItem html content', () => {
expect((tocItem.content as TestSafeHtml)
.changingThisBreaksApplicationSecurity)
.toEqual('Setup to develop <i>locally</i>.');

View File

@ -57,15 +57,15 @@ export class TocService {
}
// Transform the HTML content to be safe to use in the ToC:
// - Strip off the auto-generated heading anchor links).
// - Strip off certain auto-generated elements (such as GitHub links and heading anchor links).
// - Strip off any anchor links (but keep their content)
// - Mark the HTML as trusted to be used with `[innerHTML]`.
private extractHeadingSafeHtml(heading: HTMLHeadingElement) {
const div: HTMLDivElement = this.document.createElement('div');
div.innerHTML = heading.innerHTML;
// Remove any `.header-link` elements (along with their content).
div.querySelectorAll('.header-link').forEach(removeNode);
// Remove any `.github-links` or `.header-link` elements (along with their content).
div.querySelectorAll('.github-links, .header-link').forEach(removeNode);
// Remove any remaining `a` elements (but keep their content).
div.querySelectorAll('a').forEach(anchorLink => {