eluck / spectacle-mdx-loader

Webpack MDX loader for Spectacle presentations

spectacle-mdx-loader

An MDX webpack loader for Spectacle presentation decks.

Install

$ npm add --save-dev spectacle-mdx-loader
$ yarn add --dev spectacle-mdx-loader

Usage

To use this loader in a Spectacle presenation 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'));

Maintenance Status

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.