JLongley / gatsby-remark-external-links

Adds the target and rel attributes to external links in markdown.
MIT License
21 stars 8 forks source link

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

Open ianbale opened 5 years ago

ianbale commented 5 years ago
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?

KhanMaytok commented 4 years ago

I believe it only works for markdown links

shortdark commented 4 years ago

I'm new to Gatsby and modern javascript frameworks. For me, I had two different resolve: `gatsby-transformer-remark plugins in my "gatsby-config.js". I chained these two within the one "gatsby-transformer-remark" item, making "gatsby-remark-external-links" the first one. I removed the options and just had the below.

                    {
                        resolve: "gatsby-remark-external-links",
                    },

My markdown links were all in the format, below, which didn't work.

[gatsby-remark-external-links](//www.gatsbyjs.org/packages/gatsby-remark-external-links/)

I noticed that this plugin would not work unless I put the HTTPS: in the URL. So, the below worked for me...

[gatsby-remark-external-links](https://www.gatsbyjs.org/packages/gatsby-remark-external-links/)

I hope this is useful to someone. Thank you very much for your plugin.

karlhorky commented 4 years ago

Try using the remark-external-links instead - it works now properly with the latest Gatsby:

https://github.com/gatsbyjs/gatsby/issues/22719#issuecomment-624605087