An MDX webpack loader for Spectacle presentation decks.
$ npm add --save-dev spectacle-mdx-loader
$ yarn add --dev spectacle-mdx-loaderTo use this loader in a Spectacle presentation you need to configure webpack and then add the surrounding MDX Spectacle helper code. See a full example for more details.
First, integrate into your webpack.config.js file:
module.exports = {
// ...
module: {
rules: [
// ...
// `.mdx` files go through babel and mdx transforming loader.
{
test: /\.mdx$/,
use: ['babel-loader', 'spectacle-mdx-loader']
}
]
}
};Then, write up your MDX file (e.g., slides.mdx) and wrap up a full Spectacle deck:
import React from 'react';
import { render } from 'react-dom';
import { MDXProvider } from '@mdx-js/react';
import { Deck, Slide, Notes, mdxComponentMap } from 'spectacle';
import slides, { notes } from './slides.mdx';
const Deck = () => (
<MDXProvider components={mdxComponentMap}>
<Deck>
{slides
.map((MDXSlide, i) => [MDXSlide, notes[i]])
.map(([MDXSlide, MDXNote], i) => (
<Slide key={`slide-${i}`} slideNum={i}>
<MDXSlide />
<Notes>
<MDXNote />
</Notes>
</Slide>
))}
</Deck>
</MDXProvider>
);
render(<Deck />, document.getElementById('root'));Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.