allejo/jekyll-anchor-headings

A GitHub Pages compatible way of adding anchors to your headings without a plug-in or JavaScript :octocat:

jekyll-anchor-headings's Issues

Links do not have a discernible name

I am getting this accessibility error "Links do not have a discernible name" for all links created from headings (you can try testing a post from your test site using web.dev). Would you consider correcting it to address the issue? https://web.dev/link-name/?utm_source=lighthouse&utm_medium=lr

Don't generate anchor if there's no ID

If headings don't have an ID (creating manually with raw HTML), an anchor shouldn't be generated for them.

Headings inside header elements cause broken HTML with missing text to be rendered

My Markdown

<header>
  <h1 id="goodbye-world">Goodbye World</h1>
  <p>some header text</p>
</header>

Snippet Usage

{% capture markdown %}
<header>
  <h1 id="goodbye-world">Goodbye World</h1>
  <p>some header text</p>
</header>
{% endcapture %}
{% assign text = markdown | markdownify %}

<div>
{% include anchor_headings.html html=text %}
</div>

Expected HTML

<div>
  <header>
    <h1 id="goodbye-world">Goodbye World <a href="#goodbye-world"></a></h1>
    <p>some header text</p>
  </header>
</div>

Actual HTML

<div>
<header>
      <h1 id="goodbye-world">
        
        
          Goodbye World <a href="#goodbye-world"></a>
        
        
      </header>

</div>

Notes

Various Jekyll themes use this pattern of HTML for posts in blogs – even Minima. The test for the fix for issue #13 doesn't include nested elements.

">" should be added?

I don't have any confidence, but it seems to me that > should be added to the end of this line. When I open this source, my editor warns me that there is no >.

Excluding/limiting by class

@allejo: after making the switch I just noticed that the only way to limit the target anchors is their header level.

Do you think it would be possible to add a parent class as a limit, like .content > h2?

Example: https://twbs-bootstrap4.netlify.com/docs/4.1/utilities/image-replacement/#warning

No big deal if it's hard to add such feature, we'll use JS or CSS to handle this, but I thought I'd ask :)

/CC @MartijnCuppens

Aria, or other attribute support

Hey,

Great plugin. Very useful for a JS-free solution.

I was wondering if it was possible to add Aria support, or to pass along custom attributes?

I'm finding that screenreaders can take a lot longer to read out with an extra anchor after each header. I think it'd be easier to mark them as aria-hidden="true", or find another role to deemphasize them.

I'm not seeing how I'd pass this along without editing the script file itself though. Would you consider making an attribute for aria, or accepting arbitrary attributes+values?

Thanks!

Raw text outside tags causes broken HTML to be rendered

My Markdown HTML

Some text<p data-name="short_description">Defines which sample file the region will play.</p>

<p>Possibly the most important opcode, this is the one that tells the sampler which
sample file to actually play. This should include a relative file path from the
folder where the SFZ file is.</p>

<h2 id="examples">Examples</h2>

Snippet Usage

{% include anchor_headings.html html=content %}

Expected HTML

Some text<p data-name="short_description">Defines which sample file the region will play.</p>

<p>Possibly the most important opcode, this is the one that tells the sampler which
sample file to actually play. This should include a relative file path from the
folder where the SFZ file is.</p>

<h2 id="examples">Examples <a href="#examples"></a></h2>

Actual HTML

<hSome text<p data-name="short_description">Defines which sample file the region will play.</p>

<p>Possibly the most important opcode, this is the one that tells the sampler which
sample file to actually play. This should include a relative file path from the
folder where the SFZ file is.</p>

<h2 id="examples">Examples <a href="#examples"></a></h2>

Notes

Reported by the @sfzformat team

Messes with horizontal rules

The <hr> tag (and possibly other HTML tags starting with "h") is butchered.

All that is left turns out the be a sad and lonely

r />

:(

Accessibility issue: [aria-hidden="true"] elements contain focusable descendants

Hi. After the solution in issue #29, again a new accessibility issue https://web.dev/aria-hidden-focus/. I use the headings ID only for a few posts to create a Table of Contents. Is there a way to edit the code to retain the ID but remove the <a></a> link?

Strip HTML in %heading% for anchorTitle

First of all, thank you very much for this project as well as jekyll-TOC, your work is excellent and just filling the gap that is missing in jekyll for GH-Pages.

---

When having an anchor in headings and using %heading% in anchorTitle, the generated HTML breaks.

Markdown

### The [`match`](#match) Expression

Snippet Usage

{% include anchor_headings.html
  beforeHeading=false
  h_min=2
  html=content
  anchorClass="permalink icon-link"
  anchorBody=""
  anchorTitle="Permalink for '%heading%'"
%}

Expected HTML

<h3 id="the-match-expression">
    The <a href="#match"><code class="language-text highlighter-rouge">match</code></a> Expression
    <a href="#the-match-expression" class="permalink icon-link" title="Permalink for 'The match Expression'"></a>
</h3>

Actual HTML

<h3 id="the-match-expression">
    The <a href="#match"><code class="language-text highlighter-rouge">match</code></a> Expression
    <a href="#the-match-expression" class="permalink icon-link"
        title="Permalink for 'The <a href="#match"><code class="language-text highlighter-rouge">match</code></a> Expression'">
    </a>
</h3>

Notes

To fix this, I added | strip_html in line 111 for if include.anchorTitle:

{% if include.anchorTitle %}
  {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header | strip_html }}"{% endcapture %}
{% endif %}

---

I am not firm with liquid, I have had this issue only with anchorTitle, but maybe this will pop up elsewhere as well.

Thank you!

THANK YOU!

Really! For the simplicity of your idea, for addressing this issue, for making it available for others. I will definitively mind your Sponsor button, eheh.

Keep on the good work,
and thnks!

Restrict heading range

Similar to how jekyll-toc works, allow users to restrict the range of headings that will have anchors generated for them. e.g. Don't generate anchors for <h3> and below.

Wrap heading content support?

Hey, @allejo .

I'm gonna switch to your package for Bootstrap. While at it, I noticed we could use an optional element wrapping support for the a tags.

Do you think this would be possible without too many changes?

Thanks in advance!

/CC @MartijnCuppens

Does not process content before first heading

My Markdown

---
title: Getting started
layout: en

---

This is a very short guide to using Travis CI with your GitHub hosted code repository.
If you're new to continuous integration or would like some more information on
what Travis CI does, start with [Core Concepts for Beginners](/user/for-beginners)
instead.



## Prerequisites

To start using Travis CI, make sure you have *all* of the following:

Snippet Usage

{% include toc.html h_min=2 h_max=2 class="list-language" santize=true  html=content %}

Expected HTML

This is a very short guide to using Travis CI with your GitHub hosted code repository. If you’re new to continuous integration or would like some more information on what Travis CI does, start with Core Concepts for Beginners instead.

Prerequisites

To start using Travis CI, make sure you have all of the following:

Actual HTML

Prerequisites

To start using Travis CI, make sure you have all of the following:

Notes

Write here.

Exclude specific HTML headings with specific class

Description

Now that IDs are parsed also in HTML files, it would be super useful to exclude some headings with a specific class.

Sample Usage
<h3 class='exclude'>Heading to exclude</h3> won’t have any ID generated.