jlongley / gatsby-remark-external-links

Adds the target and rel attributes to external links in markdown.

gatsby-remark-external-links

Adds the target and rel attributes to external links in markdown.

This is a gatsby port of the remark-external-links remark plugin.

Usage

1. Install plugin to your site:

yarn add gatsby-remark-external-links

2. Add following to your gatsby-config.js:

    plugins: [      
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_self",
              rel: "nofollow"
            }
          }
          ]
        }
      },

3. Restart gatsby.

API

options

target

Type: string Default: _blank

Specifies where to display the linked URL. The value should be one of : _self, _blank, _parent, _top

You can specify null to not add the target attribute to your links

rel

Type: string Default: nofollow noopener noreferrer

Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.

You can specify null to not add the rel attribute to your links

When using target, consider adding rel="noopener noreferrer" to avoid exploitation of the window.opener API.

License

MIT

gatsby-remark-external-links's Issues

Use remark-external-links as dependency

Hello, I'm the creator of remark-external-links

Why not require the official plugin as a dependency and do not rewrite it ?
There are some officials plugins using this feature: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-custom-blocks/src/index.js

Detect protocol less urls

Contentful upload links are like //mysupercoollink.pdf can you add detection for urls that start with a double slash and no protocol like these?

No longer needed?

Edit: As @afucher pointed out below, it may still be needed for gatsby-transformer-remark

---

As of @mdx-js/mdx v1.6.1, gatsby-remark-external-links is no longer needed - you can use remark-external-links by itself 🎉

More details here: gatsbyjs/gatsby#22719 (comment)

I would recommend removing this from the Gatsby Plugins page and/or mark it as "Deprecated", and point at remark-external-links.

Please publish the latest package on npm

The version on npm / yarn is from 2 years ago and doesn't have the change to use remark-external-links code. Could you please release the latest version of gatsby-remark-external-links to npm?

Please update remark-external-links dependency

There is an issue using this plugin when you have mailto links. Please see this issue for discussion:
remarkjs/remark-external-links#9

This issue was addressed in [email protected] (no breaking API changes, just behavior):
https://github.com/remarkjs/remark-external-links/releases/tag/4.0.0

Can you please update the dependency?

Doesn't work on reference style link

With

This is [GatsbyJS][ref] link

[ref]: https://www.gatsbyjs.org

The resulting HTML will be

This is <a href="https://www.gatsbyjs.org">GatsbyJS</a> link

No attribute added, while the normal style ([]()) works as expected.

Stumped. I cant get this to work at all...

plugins: [
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-less",
    "gatsby-transformer-json",
    {
    resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-external-links',
            options: {
              target: '_blank',
              rel: 'noopener nofollow'
            }
          }
        ]
      }
    },
    "gatsby-plugin-catch-links",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images`,
      },
    },
    // Plugin to read files in /src/pages
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/src/pages/`,
      },
    },    
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "hazardous-frog-website",
        short_name: "HF",
        start_url: "/",
        background_color: "#663399",
        theme_color: "#663399",
        display: "minimal-ui",
        icon: "src/images/hf-icon.png", // This path is relative to the root of the site.
      },
    },

  ],

Sample link in code:
<a href="https://www.apple.com">apple</a>

I'm expecting this to be replaced with

<a href="https://www.apple.com" target="_blank" rel="noopener nofollow">apple</a>

but the link remains unchanged : no target or rel attributes added.

from my package.json

    "gatsby-transformer-remark": "^2.3.12",
    "gatsby-remark-external-links": "0.0.4",

What am I doing wrong?