Automatic Link Formatting

By default, links in Markdown are not styled, nor do they behave the way I'd like. If a link is external, I'd like it to open in a new window. If it is internal, I'd like it to replace the current page.

I found an implementation of a component called MarkdownLink from zslabs. This component provides more functionality than my existing ExternalLink component and I'll use it for Mdx translations.

This just has to be added to gatsby-browser.js and gatsby-ssr.js files, under components.

Copy
1const components = {
2  table: Table,
3  pre: (preProps) => {
4    const props = preToCodeBlock(preProps)
5    if (props) {
6      return <Code {...props} />
7    }
8    return <pre {...preProps} />
9  },
10  a: (props) => <MarkdownLink {...props} />,
11  wrapper: ({ children }) => <>{children}</>,
12}

With this in place, an Mdx link can be normal and it will appear with the style and behavior I require.

Issue!

Internal links, like footnotes, seem to require being clicked on twice. Perhaps that has to do with gatsby-ssr? I spent an awful long time on that. It would be a shame great if this was the reason it was having this issue. Sadly, it is not.

Attributions

Photo by Ken Feliciano (Me!). It's the southernmost part of the United States (the 50 states that is)!