The rehype-external-links from rehypejs

rehype-external-links's Issues

Option to add aria-label

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Problem

For external links I'd like to add aria-label="(opens in a new window)" to the <a> tag. It would be great if there was an option to do this, e.g.:

  markdown: {
    rehypePlugins: [
      [
        rehypeExternalLinks, {
          ariaLabel: '(opens in new window)',
          protocols: ['http', 'https', 'mailto'],
          rel: [],
          target: '_blank',
        }
      ],
    ],
  },

Solution

Add ariaLabel option as seen above.

Alternatives

For more flexibility, maybe offer a way to add any custom attribute, similar to options.contentProperties but which applies to <a>.

Add option to include relative links

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Problem

I'd like to use this plugin to add target and rel properties to links with relative urls. Currently only absolute urls are supported.

Solution

I suggest the test option to be responsible for that. By default it filters links with absolute urls, and you can override it. This is a breaking change.

Alternatives

Add a new option includeRelative
Remove filtering completely

Change defaults to not add `target`, `rel` should just be `['nofollow']`

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Problem

This plugin’s defaults behavior disagrees with reasonable web recommendations (https://css-tricks.com/use-target_blank/) accessibility recommendation (https://www.w3.org/TR/WCAG20-TECHS/G201.html), or precedence set by sites such as GitHub.

Solution

do not add target
rel should just be ['nofollow']

Alternatives

n/a

feat: exclude certain links with a `no-external` attribute

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Right now all external links get targeted but there are instances where users may want to exclude a specific link.

In my use case, I use rehype-external-links for all externals links, I then attach an icon to the external links to indicate that the link takes the user out of the page.

The problem comes when attaching an external link to images, an extra icon appears messing up layout. In my use case being able to exclude links individually would go a long way.

Solution

Add the option to use an attribute to exclude links individually

Alternatives

Exclude links that have images as the primary content
I can't think of any other alternatives that aren't awkward to use or implement.

Thanks for creating this plugin.

Links to protocol-relative URLs are not marked rel=nofollow

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

1.0.0-2.0.0

Link to runnable example

https://codesandbox.io/s/relaxed-sound-irixmt?file=/src/index.js

Steps to reproduce

Based on the example in the README:

import {unified} from 'unified'
import rehypeParse from 'rehype-parse'
import rehypeExternalLinks from 'rehype-external-links'
import rehypeStringify from 'rehype-stringify'

const file = await unified()
  .use(rehypeParse)
  .use(rehypeExternalLinks, {rel: ['nofollow']})
  .use(rehypeStringify)
  .process('<a href="//github.com/rehypejs/rehype">rehype</a>')

console.log(String(file))

This example uses a protocol-relative URL, which is widely considered an anti-pattern in actual development, but is still supported by browsers.

Expected behavior

Protocol-relative URLs include the domain name, and thus on web sites are just like an external http/https URL. Thus we expect:

<html><head></head><body><a href="//github.com/rehypejs/rehype" rel="nofollow">rehype</a></body></html>

Actual behavior

Because there is no protocol, this particular line determines the protocol for this URL is //github.com/rehypejs/rehyp which is not in any reasonably-configured protocol list, so rel="nofollow" is not added.

<html><head></head><body><a href="//github.com/rehypejs/rehype">rehype</a></body></html>

This behavior was introduced in, best I can tell, remarkjs/remark-external-links#10, which added this option because of weird interactions between mailto: links and target="_blank", the latter of which has since been removed from this codebase.

Runtime

Node v16

Package manager

npm 8

OS

macOS

Build and bundle tools

No response

The package in npm is not same with Github

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Problem

The package in npm is not same with Github， npm package can't support dynamic target。

Solution

publish latest version to npm

Alternatives

。

rehypejs / rehype-external-links Goto Github PK

rehype-external-links's People

Contributors

Stargazers

Watchers

Forkers

rehype-external-links's Issues

Initial checklist

Problem

Solution

Alternatives

Initial checklist

Problem

Solution

Alternatives

Initial checklist

Problem

Solution

Alternatives

Initial checklist

Problem

Solution

Alternatives

Initial checklist

Affected packages and versions

Link to runnable example

Steps to reproduce

Expected behavior

Actual behavior

Runtime

Package manager

OS

Build and bundle tools

Initial checklist

Problem

Solution

Alternatives

Recommend Projects

Recommend Topics

Recommend Org