build(aio): render heading anchors on the right

This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes #22131

aio/src/styles/2-modules/_heading-anchors.scss

@@ -1,48 +1,18 @@
 .sidenav-content {
   h1, h2, h3, h4, h5, h6 {
 
-    &.no-anchor .header-link {
-      display: none;
-    }
-
     .header-link {
-      box-sizing: border-box;
       color: $mediumgray;
-      display: inline-block;
+      margin-left: 8px;
-      margin-left: -42px;
-      padding: 0 8px;
       text-decoration: none;
       user-select: none;
-      vertical-align: middle;
       visibility: hidden;
-      width: 40px;
+      display: inline-block;
-
+      vertical-align: text-top;
-      @media (max-width: 600px) {
-        float: right;
-        margin-left: 0;
-      }
     }
 
     &:hover .header-link {
       visibility: visible;
     }
   }
-
-  .l-sub-section {
-    h1, h2, h3, h4, h5, h6 {
-      a {
-        padding-right: 64px;
-        margin-left: -74px;
-      }
-    }
-  }
-
-  .alert {
-    h1, h2, h3, h4, h5, h6 {
-      a {
-        padding-right: 80px;
-        margin-left: -90px;
-      }
-    }
-  }
 }

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

@@ -20,7 +20,7 @@ const hasClass = (node, cls) => {
 const link = options =>
   tree => visit(tree, node => {
     if (is(node, HEADINGS) && has(node, 'id') && !hasClass(node, NO_ANCHOR_CLASS)) {
-      node.children.unshift({
+      node.children.push({
         type: 'element',
         tagName: 'a',
         properties: Object.assign(clone(options.properties), {href: `#${node.properties.id}`}),

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

@@ -20,9 +20,9 @@ describe('autolink-headings postprocessor', () => {
       <h3>Heading with encoded chars &#x26;</h3>
     `;
     const processedContent = `
-      <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>
+      <h1 id="heading-1">Heading 1<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a></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>
+      <h2 id="heading-with-bold">Heading with <strong>bold</strong><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a></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>
+      <h3 id="heading-with-encoded-chars-">Heading with encoded chars &#x26;<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a></h3>
     `;
 
     const docs = [{docType: 'a', renderedContent: originalContent}];

aio/tools/transforms/templates/api/base.template.html

@@ -30,9 +30,7 @@
     {% if doc.experimental !== undefined %}<label class="api-status-label experimental">experimental</label>{% endif %}
     {% if doc.stable !== undefined %}<label class="api-status-label stable">stable</label>{% endif %}
     <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
-    <h1>
+    <h1>{$ doc.name $}</h1>
-      {$ doc.name $}
-    </h1>
     <span class="version">{$ version $}</span>
   </header>
   <div class="page-actions">