Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove anchorjs in toc filter #639

Merged
merged 5 commits into from
Apr 9, 2021
Merged

Remove anchorjs in toc filter #639

merged 5 commits into from
Apr 9, 2021

Conversation

github-actions[bot]
Copy link

@github-actions github-actions bot commented Apr 8, 2021

This PR Closes #638 and replaces acnhorjs in the TOC filter with an accessible vanila css/html solution.

Anchors are implemented by making the headers links themselves, rather than a separate link for the following reasons:

  • it's a bigger tap area for mobile
  • it avoids those Google SERP, RSS and Reader Mode issues
  • it means you don't need to worry about the label text
  • it allows you to hide the anchor icon (inserted with a ::before { content: icon }) on mobile or only when focus/hovered or remove it completely (though there are discoverability issues with some of those options).
  • Its accessible with screenreaders. Voice Over reads it out as "This is a heading. Heading Level 2. Visited. In page link."

Reference implementation: https://codepen.io/johanjanssens/pen/PoWObpL

Related discussion: valeriangalliat/markdown-it-anchor#82

Config options

The TOC filter offers the following config options:

  • anchor: To turn the anchor link on or off, default `true``
  • icon: To set a different icon for; default # (*)
  • max_level: The max heading level to use for the table and for the anchors, default :6
  • min_level: The min heading level to use for the table and for the anchors, default :2

(*) Note that the icon accepts both a single character or anything else supported by the css contentproperty. For more info see: https://developer.mozilla.org/en-US/docs/Web/CSS/content

@johanjanssens johanjanssens changed the base branch from master to 0.19 April 8, 2021 18:03
@johanjanssens johanjanssens merged commit 279f593 into 0.19 Apr 9, 2021
@johanjanssens johanjanssens deleted the feature/638-anchor branch April 9, 2021 12:05
@johanjanssens johanjanssens self-assigned this Apr 9, 2021
johanjanssens added a commit that referenced this pull request Apr 9, 2021
johanjanssens added a commit that referenced this pull request Apr 9, 2021
@johanjanssens johanjanssens changed the title Remove anchorjs in toc filter Use anchorjs in toc filter Apr 21, 2021
@johanjanssens johanjanssens changed the title Use anchorjs in toc filter Remove anchorjs in toc filter Apr 21, 2021
@johanjanssens johanjanssens mentioned this pull request Apr 21, 2021
@johanjanssens johanjanssens added this to the v0.19.11 milestone Apr 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove anchorjs in toc filter
2 participants