Author • Paul Scanlon

gatsby-mdx-routes

  • Gatsby
  • Gatsby Plugins
  • MDX

This little plugin was as a result of seeing this tweet

where Federico Zivolo was asking how to create a menu for .mdx files used in a project.

demo 🚌

This is quite an easy thing to do if you're understand how gatsby-source-filesystem works but if you're coming to Gatsby for the first time and you're aim is to just get up and running it can be a bit confusing when you swtich from .js to .mdx

This little plugin aims to provide a quick way to query your file system and return the slugs and navigation labels of your .mdx files

To use it i recommend popping it in the defaultLayout file defined by gatsby-plugin-mdx

// defaultLayout.js
import React, { Fragment } from 'react';
import { Link } from 'gatsby';
import { MdxRoutes } from '@pauliescanlon/gatsby-mdx-routes';
export default ({ children }) => (
<Fragment>
<nav>
<MdxRoutes>
{(routes) => (
<ul>
{routes.map((route, index) => (
<li key={index}>
<Link to={route.slug}>{route.navigationLabel}</Link>
</li>
))}
</ul>
)}
</MdxRoutes>
</nav>
<main>{children}</main>
</Fragment>
);

MdxRoutes returns it's children and sends back data for the slug and a navigationLabel which you define in the frontmatter of each of you .mdx files

---
navigationLabel: Page Title
---

How am I doing?

Hey! Lemme know if you found this helpful by leaving a reaction.

  • x0
  • x0
  • x0
  • x0
  • x0
  • x0
  • x0
Loading

Built with Gatsby ^5.0.0