Make headings and figures more easily referenced with anchor link UI

[tunetheweb]

We're intending the Web Almanac to be a a quotable resource. However we don't make it easy for people to link to specific parts of a chapter.

It's common to have links to chapter headings and we discussed this in #199 and resolved that by creating the links in #257, but didn't expose this to the user, as suggested in #199 .

GitHub uses this for markdown pages, with a link icon that appears before the chapter heading on hover (and appears all the time on mobile). For example I've hovered over Expensing queries in below example from our Analysts Guide

As does web.dev, with a # icon that appears before the chapter heading on hover (and on tap on mobile). for example I've hovered over Field Data in below example from their How to Measure Speed article.

Clicking on both of these simple anchor links, changes the URLs in the URL bar to the direct link to that anchor for easy copy and pasting. Not sure if this is the most obvious UX, but it is a fairly common pattern - though link icons like /GitHub uses rather than # icons like web.dev is more common (perhaps the # is more reflective of web/dev's technical readership?).

As an alternative, I was certain MDN used to do it to, but when you clicked on it on desktop it offered a "Copy to Clipboard", but can't reproduce this now so maybe I imagined it? Or maybe it was it another site? Probably simple anchor links are more widely understood despite not being the most obvious to those not familiar with this pattern.

Also not sure whether should show on hover or all the time - not the most obvious that this functionality exists when only done on hover or tap. Definitely need to think about accessibility here and make sure UX is keyboard accessible. Maybe if worried about it taking from the design, then we do only show on hover/tap/focus?

Now with the ToC (and especially if we land #732 ) maybe this isn't such a big deal - Wikipedia doesn't do this, but is a heavily cited source. However I think it's a good thing and think we should implement it before 2020 edition is released.

Also while the ToC is good for chapter headings, the figures also have anchor links that aren't exposed at all, except with someone inspecting the HMTL. We should expose them in similar way.

[rviscomi]

We could also make the headings links to themselves with no visible link styling until focused.

[tunetheweb]

We could also make the headings links to themselves with no visible link styling until focused.

Hmmm... not as keen on that to be honest as not seen that used (neither example above does that). Would we do same for figures?

Personally I think the GitHub option is the way to go.