npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@albinotonnina/mdx-deck

v1.8.6

Published

MDX-based presentation decks

Downloads

18

Readme

mdx-deck

MDX-based presentation decks

Build Status Version Downloads

npm i -D mdx-deck

View demo

Getting Started

Create an MDX file and separate each slide with ---.

# This is the title of my deck
---
# About Me
---
```jsx
<CodeSnippet />
```
---
import Demo from './components/Demo'

<Demo />
---
# The end

Add a run script to your package.json with the mdx-deck CLI pointing to the .mdx file to start the dev server:

"scripts": {
  "start": "mdx-deck deck.mdx"
}

Start the dev server:

npm start

Videos & Articles

Quick Start

To create a new presentation with zero-configuration, run the following command to generate a presentation deck in a new folder:

npm init deck my-presentation-name

Using MDX

MDX can use Markdown syntax and render React components with JSX.

Imports

To import components, use ES import syntax separated with empty lines from any markdown or JSX syntax.

import { Box } from 'grid-styled'

<Box color='tomato'>
  Hello
</Box>

Read more about MDX syntax in the MDX Docs.

Theming

mdx-deck uses styled-components for styling, making practically any part of the presentation themeable.

Built-in Themes

mdx-deck includes several built-in themes to change the look and feel of the presentation. Export theme from your MDX file to enable a theme.

export { dark as theme } from 'mdx-deck/themes'

# Dark Theme

MDX uses exports as a way for files to communicate with their parent components. For a list of available themes see the Themes Docs.

Custom Themes

A custom theme can be provided by exporting theme from the MDX file.

export { default as theme } from './theme'

# Hello

The theme should be an object with fields for fonts, colors, and CSS for individual components. It's recommended that all custom themes extend the default theme as a base.

// example theme.js
import theme from 'mdx-deck/themes'

export default {
  // extends the default theme
  ...theme,
  // add a custom font
  font: 'Roboto, sans-serif',
  // custom colors
  colors: {
    text: '#f0f',
    background: 'black',
    link: '#0ff',
  }
}

Read more about theming in the Theming docs

Components

mdx-deck includes built-in components to help with creating presentations, including a full screen Image component, the Appear component that allows stepping through parts of a single slide, and the Notes component for adding speaker notes.

Read more in the components docs.

Libraries

These third-party libraries are great for use with mdx-deck.

  • CodeSurfer: React component for scrolling, zooming and highlighting code.

Layouts

Each slide can include a custom layout around its content. This can be used as a substitute for slide templates found in other presentation apps and libraries.

// example Layout.js
import React from 'react'

export default ({ children }) => (
  <div
    style={{
      width: '100vw',
      height: '100vw',
      backgroundColor: 'tomato'
    }}>
    {children}
  </div>
)
import Layout from './Layout'

# No Layout

---
export default Layout

# Custom Layout

The layout component will wrap the MDX elements within that slide, which means you can use a nested ThemeProvider or target elements with CSS-in-JS.

Built-in Layouts

mdx-deck includes some built-in layouts for inverting theme colors and changing the layout of a slide. Read more about built-in layouts.

Presenter Mode

mdx-deck includes a built-in presenter mode, with a preview of the next slide and a timer.

presenter mode screenshot

To use presenter mode:

  • Open two windows in the same browser, with the same URL on two different screens. (this should work in both development and exported presentations)
  • In your window press the Option + P (Alt + P) key to enter presenter mode.
  • Display the other window on the screen for the audience to see.
  • Control the presentation from your window by using the left and right arrow keys; the other window should stay in sync

Speaker Notes

Notes that only show in presenter mode can be added to any slide. Speaker notes can be added in one of the following two ways:

Markdown: Use the notes language attribute in a fenced code block to add speaker notes.

# Slide Content

```notes
These are only visible in presenter mode
```

Notes Component: Use the Notes component to create more complex speaker notes.

import { Notes } from 'mdx-deck'

# Slide Content

<Notes>
  Only visible in presenter mode
</Notes>

Overview Mode

Overview Mode

When editing a slide deck, toggle overview mode with Option + O. This shows a list of all slides on the left and a preview of the current slide on the right.

Keyboard Shortcuts

Key | Description ----------- | ----------- Left Arrow | Go to previous slide (or step in Appear) Right Arrow | Go to next slide (or step in Appear) Space | Go to next slide (or step in Appear) Up Arrow | Hide current step in Appear component without navigating slides Down Arrow | Show next step in Appear component without navigating slides Option + P | Toggle Presenter Mode Option + O | Toggle Overview Mode Option + G | Toggle grid view mode

Exporting

Add a build script to your package.json to export a presentation as HTML with a JS bundle.

"scripts": {
  "build": "mdx-deck build deck.mdx"
}

See more exporting options in the Exporting Documentation

CLI Options

-p --port     Dev server port
--no-open     Prevent from opening in default browser
-d --out-dir  Output directory for exporting
--no-html     Disable static HTML rendering
--out-file    Filename for screenshot or PDF export
--width       Width in pixels
--height      Height in pixels
--webpack     Path to webpack config file

Docs

Examples


Related

MIT License