MDX link routing in Gatsby
In my last article, I wrote about how I was able to parse frontmatter through MDX in Gatsby for a more powerful writing/developer experience. I also mentioned a few remark plugins I brought in-house. Today, I'll walkthrough how I was able to remove three dependencies for just a few lines of code.
Creating links in Markdown is fairly straightfoward:
With the help of a few plugins, we're able to make these links do a bit more for us automagically:
- remark-external-links: Automatically adds
target
andrel
attributes to external links. - remark-relative-links: Rewrites absolute URLs to relative ones.
- gatsby-plugin-catch-links: Intercepts local links and replaces their behavior with that of the
gatsby-link
navigate.
With MDX's ability to override normal DOM elements, I was able to encapsulate the logic from all three of these plugins into a handy snippet:
This can then be passed into <MDXProvider />
to override default links:
Since our Markdown links are now powered by a React component, we can apply any other special formatting or logic as needed. Take a look at this one and others I've added to my own site in my shortcodes file. 🎉