An extended template for MDX-based presentations.

• Static assets (images, videos)
• Additional components
  • ImageWithLabel
  • PostponedVideo
  • Video
• Publishing to GitHub Pages

To run the presentation deck in development mode:

npm start

Edit the deck.mdx file to get started.

1. ImageWithLabel - displays an image with a label underneath

   <ImageWithLabel label="A picture of a cat">
     <img src="./static/cat.png" />
   </ImageWithLabel>

2. PostponedVideo - displays a paused video and plays it after trying to move to the next slide.

   <PostponedVideo src="./static/cat.gif" />

The static directory will be copied to the dist directory upon building.

For example, to add an image that uses static/cat.png, use the following:

<img src="./static/cat.png" alt="Cat" />

The available themes are listed in the mdx-deck docs:

https://github.com/jxnblk/mdx-deck/blob/master/docs/themes.md

To use a different theme, change the name of the imported theme in theme.js:

import { future as theme } from 'mdx-deck/themes';

By default, Typescript and Javascript is highlighted.

To add syntax highlighting for other languages, take a look at this section in mdx-deck docs:

https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#syntax-highlighting

There are multiple slide layouts provided by mdx-deck.

The list is available here:

https://github.com/jxnblk/mdx-deck/blob/master/docs/layouts.md

Move to the next/previous slide by using the arrows on the keyboard.

You can alternatively use PageUp / PageDown.

Alt + P for presenter mode. You can duplicate the window to have one for the presenter and one for the audience. The content will be in sync.

Alt + O for slides overview.

To build the presentation deck as static HTML:

npm run build

To export a PDF:

npm run pdf

To export an image of the title slide:

npm run image

To publish the slides to GitHub Pages:

npm run build
npm run publish:deck

Check the settings of the repository for a URL to the exported deck.

For more documentation see the mdx-deck repo.

This template has been created by Grzegorz Rozdzialik.