hasura / gatsby-gitbook-starter

Generate GitBook style modern docs/tutorial websites using Gatsby + MDX
https://hasura.io/learn/graphql/react/introduction/
MIT License
983 stars 378 forks source link

Internal references open in new tab by default #104

Closed benkrikler closed 2 years ago

benkrikler commented 3 years ago

I'm new to this project, but I've found something that seems odd to me when trying to link to another section of the same markdown-written page and I'm not sure what's the best and most "correct" solution.

The anchorTag component renders all markdown links with target="_blank" which I can understand for external links, and possibly also for internal links, but if I just want to add a link to another section of the same page e.g. as seen in [section bla bla](#sectionblabla] the result <a> tag gets target="_blank" so clicking it creates a new tab.

Would you be interested in a PR to check for this use case and set up the blank target iff the href is not simply an anchor on the same page?

praveenweb commented 3 years ago

@benkrikler - Hi, definitely a PR is welcome. I think initially it has been written to always open in a new tab. But a choice between internal and external links make sense.

Check the code here for reference - https://github.com/hasura/gatsby-gitbook-starter/blob/master/src/components/mdxComponents/anchor.js#L6. Feel free to open a PR :)

reselbob commented 3 years ago

Here is the exact code to turn off the default Open in New Tab behavior:

in src/components/mdxComponents/anchor.js

import * as React from 'react';

const AnchorTag = ({ children: link, ...props }) => {
  if (link) {
    return (
      <a href={props.href} target="_self" rel="noopener noreferrer">
        {link}
      </a>
    );
  } else {
    return null;
  }
};

export default AnchorTag;
terriann commented 2 years ago

I needed relative links for my project so I've submitted a pull request for your consideration. Happy to address any feedback you may have.