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.
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---
How am I doing?
Hey! Lemme know if you found this helpful by leaving a reaction.
- x0
- x0
- x0
- x0
- x0
- x0
- x0
Loading