gatsby-mdx-routes
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.jsimport 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---