add anchor tags for species in collections pages

[adf-ncgr]

It would be nice to be able to reference for example https://www.legumeinfo.org/collections/vigna#unguiculata could also be extended to https://www.legumeinfo.org/collections/vigna#unguiculata_expression etc.

[sammyjava]

I don't see how to do this. Everything is already linked over to the Datastore, so what text do I apply the anchor to? Please provide an example.

[adf-ncgr]

I may not be understanding what you're asking me for, but I was just thinking about an anchor to facilitate linking into the appropriate part of the page (not linking out to somewhere else) ie in my examples above you'd just have an element preceding the text you already have hyperlinked to the datastore. So that if I send a cowpea fanperson to https://www.legumeinfo.org/collections/vigna#unguiculata it then saves them the effort of scrolling through things preceding alphabetically. You could make it fancier if you want, like the magic anchors that get little icons on hover like this: https://github.com/legumeinfo/gcv#running-gcv I guess that sort of thing gives people something to grab onto if they want to tell their friends, but it's probably overkill for what I had in mind.

[sammyjava]

This doesn't seem to have general applicability. Unless we put a list of inline "Jump to" links at the top, for example. In order to bookmark or copy a URL one needs to see something. Typically one has a "Jump to" list at the top of the page.

<!-- <a> element links to the section below, but we don't currently have any of these -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to has a tag that isn't visible to the user -->
<h2 id="Section_further_down">Section further down</h2>

I can certainly add the id but it's not visible to the general user, it's the link at the top you'd copy or copy the URL in your location bar after you've clicked said link.

So I interpret your request as asking for a list of "Jump to" links at the top that users could bookmark or share to get to a particular species, etc. on the page.

[sammyjava]

(Note: you may be familiar with the <a name=> form but that's been deprecated in favor of using id on any element.)

[alancleary]

I originally ripped off the UIkit theme we're using from UIkit's own documentation website. As luck would have it, this theme includes a custom tm-heading-fragment class for adding an anchor icon to an <h2> tag that has an id and contains a link to that id, which means it's already present and usable in the our Jekyll site. For example:

<h2 id="unguiculata" class="uk-h3 tm-heading-fragment">
    <a href="#unguiculata"><i>Vigna unguiculata</i></a>
</h2>

Notice, we're using the uk-h3 class to make this header the size of an <h3> tag even though it's an <h2> (I don't know why they just didn't define the tm-heading-fragment class for all headers instead of just <h2> but I'm sure there's a good reason for it). This renders as follows: Clicking on the header now adds the header's id to the URL, as in @adf-ncgr's example: https://www.legumeinfo.org/collections/vigna#unguiculata. Clicking this header previously took the user to the data store so a separate link will need to be added for that, which I think is a reasonable concession here.

[adf-ncgr]

great, that's pretty much what I had in mind with my "magic anchors" example from the github space. As for the "jump to" @sammyjava suggested, it might also be a good idea, but wasn't what I was originally thinking of.

[sammyjava]

That concession was my whole point. I don't have any non-linked text since the species name links the species directory on the DS. I'm gonna back off of this one, @adf-ncgr can code it or assign it to someone else.

[adf-ncgr]

OK, will be a good opportunity for me to try to get some practice with the new site.