minideck

A simple MDX-powered deck.

How it works

Check out the demo! This project uses:

• Vite for building and bundling files
• MDX for authoring using Markdown syntax
• Tailored React components
• Tailwind CSS utility classes, plus remark-attr and classnames for ease of use
• prism-react-renderer for parsing and styling code blocks

Usage

Instead of making this an npm package that requires a configuration api, simply use degit to copy these project files over as scaffolding for your own deck.

# first
npx degit filoxo/minideck#main your-presentation-name
# then
yarn install
# and finally
yarn start

Prod build

Generate a production-ready version of your slide deck. This is ideal for deploying your slides as static assets and making them publicly available.

# build to dist/
yarn build
# serve from dist/ locally; recommended for better perf when presenting
yarn preview

Extensibility

Again, rather than requiring configuration, you have access to all of the underlying components and tooling. Need to change something? Just find the file and tweak it.

• Add your own presentation content in content.mdx
• Import your own components in content.mdx, or add them to the components list in index.jsx to make them globally available to the MDX file
• Want change the styling?
  • Use Tailwind classes throughout by either

    • using inline attribute syntax (learn more at the remark-attr repo)

      _Warning!_{.text-red-500}

    • or in components, optionally with classnames for conditional logic

  • Or add a different prebuilt CSS theme into the index.html
• Want a different the code theme? Change the imported theme in Code.jsx (see available themes in prism-react-renderer source)
• More features? Feel free to send a PR that you think would help everyone!