gatsby-remark-external-links icon indicating copy to clipboard operation
gatsby-remark-external-links copied to clipboard

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

Open ianbale opened this issue 5 years ago • 3 comments

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?

ianbale avatar May 21 '19 14:05 ianbale

I believe it only works for markdown links

KhanMaytok avatar Dec 18 '19 23:12 KhanMaytok

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.

shortdark avatar May 02 '20 18:05 shortdark

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

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

karlhorky avatar May 06 '20 11:05 karlhorky