It might be fun to have a little margin note with
🔗 to indicate that that's a specially-linkable
section, which could be handy when I want to link
when mobile. It feels like that would be a left
margin thing on a large screen, so it'll just have
to squeeze in there with the sticky table of
contents. I've been meaning to add link icons to
sub-headings with IDs, anyway, so I can probably solve
both with a bit of Javascript.
function addLinkIcons() {
document.querySelectorAll('h1[id], h2[id], h3[id], p[id]').forEach((o) => {
const link = document.createElement('a');
const article = o.closest('article[data-url]');
link.href = window.location.origin + (article?.getAttribute('data-url') || window.location.pathname) + '#' + o.getAttribute('id');
link.innerHTML = '🔗';
link.title = 'anchor';
link.classList.add('anchor-icon');
link.addEventListener('click', copyLink);
o.prepend(link);
});
}
addLinkIcons();
And some CSS:
.entry h2, .entry h3, .entry h4, .entry p, .content h2, .content h3, .content h4, .content p { position: relative }
.content a.anchor-icon:link, .entry a.anchor-icon:link { font-size: 60%; text-decoration: none !important; font-size: small; float: right }
@media only screen and (min-width: 95rem) {
.content a.anchor-icon:link, .entry a.anchor-icon:link { display: block; position: absolute; left: -2em; top: 0.2em; float: none}
}