Feature request: anchor links on hover

[ottok]

What happened?

Sometimes people want to link directly to a section in a post. This could be made easy with an anchor link that comes visible on hover would. See example of hover effect/link in The Stack docs.

Hugo version

0.122.0

Theme version

1.0.0

What browsers are you seeing the problem on?

Chrome

More information about the browser

No response

Relevant log output

No response

Link to Minimal Reproducible Example

https://optimizedbyotto.com

[ottok]

I confirm anchor links were introduced in 539c39d, but seems they are always visible instead of appearing on hover like they do on in for example The Stack docs. I am double-checking if this is a result of my own customizations conflicting or what is going on.

[CaiJimmy]

I confirm anchor links were introduced in 539c39d, but seems they are always visible instead of appearing on hover like they do on in for example The Stack docs. I am double-checking if this is a result of my own customizations conflicting or what is going on.

It was not actually implemented. I'll make a patch for it. It looks better if it only appears on hover, which reduces visual clutter.

[ottok]

Ok, good to know, I will then wait for you to do it as you are likely to do it better than me.

If it helps, here are my notes:

# The Stack theme markup currently
<h2 id="example-4">
    <a href="#example-4">#</a>
    Example 4
</h2>

# Documentation site markup
<h2 id="cover" tabindex="-1">
  cover 
  <a class="header-anchor" href="#cover" aria-label="Permalink to &quot;cover&quot;">​</a>
</h2>

# CSS on documentation site that places '#' character in :before of the h2 title
.vp-doc .header-anchor {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -.87em;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
    text-decoration: none;
    transition: color .25s, opacity .25s;
}
.vp-doc h2 .header-anchor {
    top: 24px;
}
.vp-doc .header-anchor:before {
    content: var('#');
}

# By default the '#' character is same color as background, and on hover it becomes visible with transition animation
.vp-doc a:hover {
    color: var('green');
}

[CaiJimmy]

It's available already (https://github.com/CaiJimmy/hugo-theme-stack/pull/999), thanks for the tip!

[ottok]

I noticed that the HTML markup you have in the implementation now adds a link permanently in the page. For example:

<h2 id="learnings-from-heartbleed"><a href="#learnings-from-heartbleed" class="header-anchor">#</a>
Learnings from Heartbleed</h2>

This results in RSS feed readers and screen readers seeing an extra # now. The implementation on the theme docs site (e.g. https://stack.jimmycai.com/config/image-processing#cover) is better as it is based on CSS :before rule, and does not pollute anything visible in the output. It also has a aria-label for screen readers.

[getvictor]

I agree. The extra # does not look good and looks like a bug. Example: https://demo.stack.jimmycai.com/p/image-gallery/

What's the easiest way to get rid of it? Downgrade to the previous version?

[CaiJimmy]

I agree. The extra # does not look good and looks like a bug. Example: https://demo.stack.jimmycai.com/p/image-gallery/

What's the easiest way to get rid of it? Downgrade to the previous version?

This has been fixed now with #1016.