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

…ular#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 angular#32418

aio/src/app/shared/toc.service.spec.ts

@@ -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>.');

aio/src/app/shared/toc.service.ts

@@ -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 => {