remarkjs / remark-autolink-headings Goto Github PK

The related issue: remarkjs/remark-slug#9

Subject of the issue

Currently, an element without children is added by default. This is invalid hast.

Your environment

n/a

Steps to reproduce

Expected behaviour

children: []

Actual behaviour

in my language charter ş,iü,ğ ex. latin char not translate #id link .maybe use slugify package for address solved the problem

'behavior' (without the 'u') is the American spelling of 'behaviour'.

Usually code uses American spelling (e.g. color, not colour), but I'm not sure if it was an intentional choice to not use American spelling?

Subject of the issue

Generated header links are given an aria-hidden attribute, which removes them from the accessibility tree. If that is the goal, then they should also have a tabindex of -1. Currently, when a user tabs into a header link, VoiceOver reads back the name of the document rather than the heading text.

Alternatively (and, I believe, a better experience), you could consider either:

• Wrapping the link around the heading's text rather than having it adjacent to the text (and unhide it)

<h2 id="what-exactly-is-a-portal">
  <a href="#what-exactly-is-a-portal">
    <span class="icon icon-link"></span>What exactly is a portal?
  </a>
</h2>

• Adding an aria-labelledby attribute that points back to the generated ID of the heading.

<h2 id="what-exactly-is-a-portal">
  <a href="#what-exactly-is-a-portal" aria-labelledby="what-exactly-is-a-portal">
    <span class="icon icon-link"></span>
  </a>What exactly is a portal?
</h2>

The latter won't be as widely supported, but the former will probably require breaking a lot of existing projects and a new approach for handling styles. I'd probably suggest #2 until introducing a new major version.

I'm happy to submit a PR if someone wants to weigh in on the preferred approach here!

Your environment

• MacOS Catalina w/ VoiceOver
• N/A
• N/A

Steps to reproduce

Enable VoiceOver under Accessibility settings in System Preferences and tab through a site with generated headers.

Expected behaviour

Screen readers should read back what's in the heading when it receives focus, or they should be removed from focus altogether

Actual behaviour

Screen readers announce the title of the page or active landmark if one exists, creating a confusing experience.

Are you open to an option to ignore certain headings?

I'd really like to ignore h1's for example (as they're generally the top level and basically a post title).

something like { ignore: [ 1 ] } would be perfect.

I have a possible PR but wanted to check if you were open to it.

To avoid heading overlapping by fixed header it needs to move anchor link upper on header size. There is no way to make it works with this lib, so I needed to make my own plugin. It will be nice if you will add support out of the box.

Here is code

const visit = require('unist-util-visit');

function inject(node, id) {
  delete node.data.hProperties.id;

  const text = node.children[0] && node.children[0].value;
  node.data.hChildren = [
    { // the anchor
      type: 'element',
      tagName: 'a',
      properties: { id, className: ['anchor-link'] },
    },
    { // heading text
      type: 'text',
      value: text,
    },
    { // "#" symbol for linking
      type: 'element',
      tagName: 'a',
      children: [{ type: 'text', value: '#' }],
      properties: { href: '#' + id, className: ['anchor-link-style'] },
    },
  ];
}

module.exports = () => (tree, file) => {
  visit(tree, 'heading', node => {
    const { data } = node;
    const id = data && data.hProperties && data.hProperties.id;

    if (id) {
      inject(node, id);
    }
  });
};

And then in css

h1, h2, h3, h4, h5, h6 {
  position: relative
}

.anchor-link {
  position: absolute;
  top: -60px;
}

Subject of the issue

The generated link doesn't have any link icon and zero width when it gets appended/prepended to the heading.

So the DOM is technically correct, but there is no way to click for the user to jump to the selected anchor.

Are we supposed to add a link icon ourselves and attach it to the .link.icon class on the span element?

Expected behaviour

Nice link icon to click

Actual behaviour

Unclickable anchor link

Watch carfully the hovered link (it looks good), but when clicking, I got a weird URL. I assume that the emoji is still here, but hidden.

It seems that remark-slug is ok as you can see in the HTML. Ref remarkjs/remark-slug#2

[email protected] in npm

• dist/index.js

var base = function base(node, callback) {
    var data = node.data;

    if (!data || !data.htmlAttributes || !data.htmlAttributes.id) {
        return;
    }

    return callback('#' + data.htmlAttributes.id);
};

It's still htmlAttributes instead of hProperties in src/index.js

Subject of the feature

Missing documentation on how to style the link so it is visible.

Problem

It is unclear on how to style the icon icon-link. Would be good if the readme documents an example on how to style this to have the link show up in front of the headings.

Expected behavior

Documentation/README shows some example on how to style the icon-links.

Alternatives

Include an SVG in the span that is rendered by default.

I imported the plugin and added use(headings) in remark. It didn't add any id or href attribute in the headings tag.

am I missing something?

import headings from "remark-autolink-headings";

export async function getPostData(id: string) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  const matterResult = matter(fileContents);
  const processedContent = await remark()
    .use(headings)
    .use(highlight)
    .use(html)
    .process(matterResult.content);

  const contentHtml = processedContent.toString();

  return {
    id,
    contentHtml,
    ...(matterResult.data as {
      date: string;
      title: string;
      cover: string;
      tags: string[];
      author: string;
    }),
  };
}

I just tried the example from the README, and no links are added to the html.

I've created a repo demonstrating the issue https://github.com/rigor789/remark-autolink-headings-issue

Is there something I missed?

In the meantime I'll dig deeper, and submit a PR if I figure it out

Edit:

Looks like htmlAttributes has been deprecated and replaced with hProperties.

remark-slug has been updated to use hProperties and this needs to be updated as well.

PR is on it's way.