Avoid inserting section permalinks after DOM render, in DOM

[peterbe]

On https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video for example. The HTML sent from the server to the browser looks like this:

<h2 id="Attributes">Attributes</h2>

Then, a piece of (jQuery??) code kicks in after the .js has been downloaded, parsed and executed (after document.onload) that turns that into this:

<h2 id="Attributes">Attributes
   <a href="/en-US/docs/Web/HTML/Element/video$edit#Attributes" class="button section-edit only-icon" rel="nofollow, noindex">
    <svg class="icon icon-pencil" version="1.1" width="24" height="28" viewBox="0 0 24 28" aria-hidden="true" focusable="false"><path d="..."></path></svg>
    <span>Edit</span>
  </a>
  <a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes" data-heading-id="Attributes">
    <svg class="icon icon-link" version="1.1" width="24" height="28" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path d="..."></path></svg>
    <span>Section</span></a>
</h2>

Let's not do that in stumptown.

Not only does it cause the page to "flicker" as the little section chain-icons suddenly appears. That makes the site feel "wobbly". It can also cause a re-paint (aka. recalculate style).

Note: Using Chrome Performance dev tools, with 6x CPU slowdown, I found 4!! blocks of "Recalculate style" in the first 3.5 seconds! It's very hard to exactly see how large the repaint is due to the added extra <a> tags.

Either way, it should be avoidable. I.e. let's not modify the DOM shipped from the HTML from the server. At least not just to add section links.

I think (and hope) the permalink section can be done entirely with CSS.

[peterbe]

Whatever we do, the stumptown-content shouldn't have to do anything to cater to this.
If it does turn out that we need to inject more HTML next to the <h2> tag, then let's do something like:

  // PSEUDO CODE
  renderedHtml = renderedHtml.replace(/<\/h2>/g, '</h2> <a href="#anchor">Link</a>')

[joedarc]

Were you thinking maybe a utility type component for like <AnchorTag>? Could accept some props for what tag type it is an do the React.createElement to inject the extra goods?

[peterbe]

Were you thinking

To be honest, now I'm losing confidence in this one. We're about to massively change how the main document components are going to work. At this very moment, we're hardcoding how rendering is supposed to work. There's a React component called RenderHTMLElementDocument which just tied us over till we have a better idea.

Now, in mdn/stumptown-content#107 we're changing all of this. Soon, the renderer just needs to loop over the JSON content from stumptown-content/packaged and use that type key to decide which "ingredient React component" to use.

Either way, starting here there are some outstanding issues with regards to how we should make those <h> tags should be rendered with an ID attribute.

All in all, perhaps this is not a good issue to tackle at the moment.

[joedarc]

No worries, i understand. I'll check out some other issues. If there are areas in the BCD table that need ID set that way i can adjust.

[peterbe]

More of a note-to-self; but here's how npmjs.com does it. for example

<h2>
  <a id="user-content-using-the-node-cli" class="deep-link" href="#using-the-node-cli" aria-hidden="true" rel="nofollow">
  <svg aria-hidden="true" class="deep-link-icon" height="16" version="1.1" viewbox="0 0 16 16" width="16">
    <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
  </svg>
  </a>

  Using the Node CLI
</h2>

Here's how GitHub does it. for example

<h2>
  <a id="user-content-using-the-node-cli" class="anchor" aria-hidden="true" href="#using-the-node-cli">
    <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
      <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a>

  Using the Node CLI
</h2>

I guess, only by using inline SVGs can you style them.

Note that this is server-side rendered HTML. Avoiding DOM mutations after the HTML has been loaded is great but is there really no way to do this with CSS?

[peterbe]

Let's go here instead: #1004