betterscientificsoftware / bssw.io

Better Scientific Software Homepage
https://bssw.io
Other
140 stars 90 forks source link

Can we add link symbols to make anchors explicit in rendered HTML? #1432

Open bernhold opened 2 years ago

bernhold commented 2 years ago

Now that we're generating id attributes on headings in article bodies, the natural follow-on is to try to make them more readily visible/accessible. Many sites do this by putting a link symbol before or after the text with the id attribute and linking the symbol to the anchor. That way you can grab the direct link using the copy-link function in your browser.

I realized that this might be doable in pure CSS and might not be that hard. I've asked Parallactic about this, and we're waiting on their response to see whether it is possible and how hard it would be. Then we can decide if we want to pursue it and prioritize it against other things Parallactic is doing for us.

P.S. credit @bartlettroscoe with suggesting this in the first place.

bartlettroscoe commented 2 years ago

Here was the email I sent out about this.


Hello David,

Can they also turn on the link anchor icon like you see in the GitHub rendering of Markdown?

For example, at:

https://github.com/betterscientificsoftware/bssw.io/blob/master/CuratedContent/GitTutorialAndReferenceCollection.md

If you hover our mouse near the “Introduction” paragraph header you see the anchor symbol to the left of “Introduction”:

image

But that is not the case with the rendered article on bssw.io at:

showing:

image

Therefore, you will need to manually provide a TOC at the top that links to the different sections to get an easy-to-get hyperlink.

NOTE: If you view the page source you can see the ‘id’ field being set like for:

<h3 id="links-to-git-tutorial-and-reference-material">Links to Git tutorial and reference material</h3>

So you can copy and paste that on the end of the page URL to give:

But that is not a great way to get these and the user would need to know how to look for these.

-Ross

bernhold commented 2 years ago

Apparently this can't be done simply with CSS, and Clara thinks it would be a fair amount of work to implement. So as far as I'm concerned we can keep this idea around for future consideration, but there's no free lunch.