mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-11 06:35:24 +03:00
Move and rename things
This commit is contained in:
Brent Jackson
parent
4b5fd42d49
commit
224347d4aa
@ -8,8 +8,8 @@
|
||||
],
|
||||
"scripts": {
|
||||
"__start": "yarn workspace @mdx-deck/docs start",
|
||||
"start": "yarn workspace @mdx-deck/lite start",
|
||||
"build": "yarn workspace @mdx-deck/lite build",
|
||||
"start": "yarn workspace mdx-deck start",
|
||||
"build": "yarn workspace mdx-deck build",
|
||||
"export": "./packages/export/cli.js http://localhost:8000/print -o docs/public/deck.pdf",
|
||||
"cypress:open": "cypress open",
|
||||
"cypress:run": "cypress run",
|
||||
|
||||
@ -1,4 +1,264 @@
|
||||
|
||||
|
||||
# @mdx-deck/lite
|
||||
# MDX Deck <img src='docs/ace.png' width='24' height='24' />
|
||||
|
||||
Award-winning React [MDX][]-based presentation decks
|
||||
|
||||
[![Build Status][badge]][travis]
|
||||
[![Version][]][npm]
|
||||
[![Downloads][]][npm]
|
||||
|
||||
[badge]: https://flat.badgen.net/travis/jxnblk/mdx-deck
|
||||
[travis]: https://travis-ci.org/jxnblk/mdx-deck
|
||||
[version]: https://flat.badgen.net/npm/v/mdx-deck
|
||||
[downloads]: https://flat.badgen.net/npm/dm/mdx-deck
|
||||
[npm]: https://npmjs.com/package/mdx-deck
|
||||
|
||||
- :memo: Write presentations in markdown
|
||||
- :atom_symbol: Import and use [React components](#imports)
|
||||
- :nail_care: Customizable [themes](#theming) and components
|
||||
- :zero: Zero-config CLI
|
||||
- :tipping_hand_woman: [Presenter mode](#presenter-mode)
|
||||
- :notebook: [Speaker notes](#speaker-notes)
|
||||
- :fire: Available as a Gatsby theme
|
||||
|
||||
[View demo](https://mdx-deck.jxnblk.com)
|
||||
|
||||
## Getting Started
|
||||
|
||||
```sh
|
||||
npm i -D mdx-deck
|
||||
```
|
||||
|
||||
Create an [MDX][] file and separate each slide with `---`.
|
||||
|
||||
````mdx
|
||||
# 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:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "mdx-deck deck.mdx"
|
||||
}
|
||||
```
|
||||
|
||||
Start the dev server:
|
||||
|
||||
```sh
|
||||
npm start
|
||||
```
|
||||
|
||||
## Using MDX
|
||||
|
||||
MDX uses Markdown syntax and can render React components inline with JSX.
|
||||
|
||||
### Imports
|
||||
|
||||
To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.
|
||||
|
||||
```mdx
|
||||
import { Box } from 'rebass'
|
||||
|
||||
<Box color="tomato">Hello</Box>
|
||||
```
|
||||
|
||||
Read more about MDX syntax in the [MDX Docs][mdx].
|
||||
|
||||
## Theming
|
||||
|
||||
<div>
|
||||
<img src='docs/images/future.png' width='256' />
|
||||
<img src='docs/images/comic.png' width='256' />
|
||||
<img src='docs/images/yellow.png' width='256' />
|
||||
</div>
|
||||
|
||||
MDX Deck uses [Theme UI][] and [Emotion][] for styling, making practically any part of the presentation themeable.
|
||||
It also includes several built-in themes to change the look and feel of the presentation.
|
||||
See the list of available [Themes](docs/themes.md),
|
||||
or read more about theming in the [Theming](docs/theming.md) docs.
|
||||
|
||||
## Components
|
||||
|
||||
MDX Deck includes built-in components to help with creating presentations, including a background `Image` component, an `Appear` component that allows stepping through parts of a single slide, and a `Notes` component for adding speaker notes.
|
||||
Read more in the [Components](docs/components.md) docs.
|
||||
|
||||
## Third-Party Components
|
||||
|
||||
These optional libraries are intended for use with MDX Deck.
|
||||
|
||||
- [CodeSurfer][]: React component for scrolling, zooming and highlighting code.
|
||||
- [mdx-code][]: Runnable code playgrounds for MDX Deck.
|
||||
- [mdx-deck-live-code][]: Live React and JS coding in slides.
|
||||
|
||||
_Note: please check with version compatibility when using these libraries._
|
||||
|
||||
[codesurfer]: https://github.com/pomber/code-surfer
|
||||
[mdx-code]: https://github.com/pranaygp/mdx-code
|
||||
[mdx-deck-live-code]: https://github.com/JReinhold/mdx-deck-live-code
|
||||
|
||||
## Layouts
|
||||
|
||||
Each slide can include a custom layout around its content,
|
||||
which can be used as a *template* for visually differentiating slides.
|
||||
|
||||
```js
|
||||
// example Layout.js
|
||||
import React from 'react'
|
||||
|
||||
export default ({ children }) => (
|
||||
<div
|
||||
style={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: 'tomato',
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
```mdx
|
||||
import Layout from './Layout'
|
||||
|
||||
# No Layout
|
||||
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
# Custom Layout
|
||||
|
||||
</Layout>
|
||||
```
|
||||
|
||||
The layout component will wrap the MDX elements within that slide,
|
||||
which means you can add layout styles, use a nested ThemeProvider, or style elements with CSS-in-JS.
|
||||
|
||||
## Built-in Layouts
|
||||
|
||||
MDX Deck includes a few [built-in layouts](docs/layouts.md) for inverting theme colors and changing the layout of a slide.
|
||||
|
||||
## Presenter Mode
|
||||
|
||||
Use [_Presenter Mode_](docs/presenting.md) when on stage to show a preview of the next slide, a timer, and speaker notes.
|
||||
|
||||
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
| Key | Description |
|
||||
| ----------- | -------------------------------------------- |
|
||||
| Left Arrow, Page Up, Shift + Space | Go to previous slide (or step in [Appear][]) |
|
||||
| Right Arrow, Page Down, Space | Go to next slide (or step in [Appear][]) |
|
||||
| Option + P | Toggle [Presenter Mode](#presenter-mode) |
|
||||
| Option + O | Toggle [Overview Mode](#overview-mode) |
|
||||
| Option + G | Toggle Grid Mode
|
||||
|
||||
[appear]: docs/components.md#appear
|
||||
|
||||
## Videos & Articles
|
||||
|
||||
- [Egghead Tutorial][egghead] by [Andrew Del Prete](https://github.com/andrewdelprete).
|
||||
- [mdx-deck: slide decks powered by markdown and react][kcd-medium] by [Kent C. Dodds][]
|
||||
- [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])
|
||||
- [What is MDX][kcd-video] by [Kent C. Dodds][]
|
||||
- [Build a Custom Provider Component for MDX-Deck][ks-egghead] by [Kyle Shevlin][]
|
||||
|
||||
[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react
|
||||
[kent c. dodds]: https://mobile.twitter.com/kentcdodds
|
||||
[kcd-video]: http://youtu.be/d2sQiI5NFAM?a
|
||||
[kcd-medium]: https://blog.kentcdodds.com/mdx-deck-slide-decks-powered-by-markdown-and-react-bfc6d6af20da
|
||||
[hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be
|
||||
[hw-demo]: https://github.com/hswolff/mdx-deck-demo
|
||||
[harry wolff]: https://mobile.twitter.com/hswolff
|
||||
[ks-egghead]: https://egghead.io/lessons/javascript-build-a-custom-provider-component-for-mdx-deck
|
||||
[kyle shevlin]: https://twitter.com/kyleshevlin
|
||||
|
||||
## Docs
|
||||
|
||||
- [Theming](docs/theming.md)
|
||||
- [Built-in Themes](docs/themes.md)
|
||||
- [Layouts](docs/layouts.md)
|
||||
- [Components](docs/components.md)
|
||||
- [Presenting](docs/presenting.md)
|
||||
- [Exporting](docs/exporting.md)
|
||||
- [Usage with Gatsby](docs/gatsby.md)
|
||||
- [Advanced Usage](docs/advanced.md)
|
||||
- [API](docs/api.md)
|
||||
|
||||
## Real-World Examples
|
||||
|
||||
See how others have used MDX Deck for their presentations.
|
||||
|
||||
- [Design Systems & React][design-systems-react] by [Diana Mounter](https://mobile.twitter.com/broccolini)
|
||||
- [Bringing Brazil to the Cloud, Now][brazil-now] by [Guillermo Rauch](https://mobile.twitter.com/rauchg/)
|
||||
- [Simplify React][simplify-react] by [Kent C. Dodds](https://mobile.twitter.com/kentcdodds)
|
||||
- [I Got 99 Problems but GraphQL Ain't One][99-problems] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
|
||||
- [Stop de #divFest][stop-div-fest] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
|
||||
- [MDX, authors and richer JAMstack content][mdx-talk] by [Josh Dzielak](https://mobile.twitter.com/dzello)
|
||||
- [Components as Data: A Cross Platform GraphQL Powered Component API][components-as-data] by [Luke Herrington](https://mobile.twitter.com/lukeherrington)
|
||||
|
||||
## Usage Examples
|
||||
|
||||
The following examples will open in CodeSandbox.
|
||||
|
||||
- [Basic Example](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/basic)
|
||||
- [Multiple Decks](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/multiple)
|
||||
- [Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/syntax-highlighting)
|
||||
- [Prism Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/prism)
|
||||
- [Aspect Ratio](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/aspect-ratio)
|
||||
- [Layouts](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/layouts)
|
||||
- [Images](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/images)
|
||||
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
|
||||
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
|
||||
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
|
||||
- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
|
||||
|
||||
---
|
||||
|
||||
### Related
|
||||
|
||||
- [MDX][]
|
||||
- [Gatsby][]
|
||||
- [Theme UI][]
|
||||
- [Emotion][]
|
||||
- [Spectacle][]
|
||||
|
||||
[MIT License](LICENSE.md)
|
||||
|
||||
[mdx]: https://mdxjs.com/
|
||||
[gatsby]: https://gatsbyjs.org
|
||||
[spectacle]: https://github.com/FormidableLabs/spectacle
|
||||
[emotion]: https://emotion.sh
|
||||
[theme ui]: https://theme-ui.com
|
||||
|
||||
<!-- examples -->
|
||||
[design-systems-react]: https://github-ds.now.sh/#0
|
||||
[brazil-now]: https://braziljs.now.sh
|
||||
[simplify-react]: https://simply-react.netlify.com/#0
|
||||
[99-problems]: https://99-problems-graphql-aint-one.now.sh/#0
|
||||
[stop-div-fest]: https://stop-div-fest.now.sh/
|
||||
[mdx-talk]: https://mdx-talk.developermode.com/
|
||||
[components-as-data]: https://componentsasdata.lukeherrington.com
|
||||
|
||||
Lightweight alternative to the main mdx-deck package
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
---
|
||||
|
||||
## This is MDX Deck v3
|
||||
## This is MDX Deck Lite
|
||||
|
||||
MDX-based presentation decks
|
||||
|
||||
@ -19,37 +19,20 @@ These are top-secret speaker notes. Shhhh!
|
||||
|
||||
---
|
||||
|
||||
## Nice to meet you
|
||||
|
||||
---
|
||||
|
||||
### What's New
|
||||
|
||||
<ul>
|
||||
<li>Built with Gatsby</li>
|
||||
<Appear>
|
||||
<li>Gatsby Theme</li>
|
||||
<li>Component Shadowing</li>
|
||||
<li>Theme UI</li>
|
||||
</Appear>
|
||||
</ul>
|
||||
<StepList>
|
||||
|
||||
- Simplified API
|
||||
- Refactored internals
|
||||
|
||||
</StepList>
|
||||
|
||||
---
|
||||
|
||||
<Image
|
||||
<img
|
||||
src='https://images.unsplash.com/photo-1485881374599-20e5ddb80d84?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9'
|
||||
size='cover'
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
}}>
|
||||
|
||||
## All aboard!
|
||||
|
||||
</Image>
|
||||
/>
|
||||
|
||||
<Notes>
|
||||
Stand clear of the closing doors
|
||||
@ -57,6 +40,10 @@ Stand clear of the closing doors
|
||||
|
||||
---
|
||||
|
||||
<Counter />
|
||||
|
||||
---
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
|
||||
@ -82,8 +69,6 @@ This one is inverted
|
||||
|
||||
---
|
||||
|
||||
<FullScreenCode>
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
|
||||
@ -93,39 +78,17 @@ export default props =>
|
||||
</div>
|
||||
```
|
||||
|
||||
</FullScreenCode>
|
||||
|
||||
---
|
||||
|
||||
<Split>
|
||||
|
||||
|
||||
|
||||
This one is split
|
||||
|
||||
</Split>
|
||||
|
||||
---
|
||||
|
||||
<SplitRight>
|
||||
|
||||
|
||||
|
||||
## SplitRight
|
||||
|
||||
This one is split the other way around
|
||||
|
||||
</SplitRight>
|
||||
|
||||
---
|
||||
|
||||
<Horizontal>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Horizontal>
|
||||
|
||||
---
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
---
|
||||
|
||||
## This is MDX Deck Lite
|
||||
## This is MDX Deck v3
|
||||
|
||||
MDX-based presentation decks
|
||||
|
||||
@ -19,20 +19,37 @@ These are top-secret speaker notes. Shhhh!
|
||||
|
||||
---
|
||||
|
||||
### What's New
|
||||
|
||||
<StepList>
|
||||
|
||||
- Simplified API
|
||||
- Refactored internals
|
||||
|
||||
</StepList>
|
||||
## Nice to meet you
|
||||
|
||||
---
|
||||
|
||||
<img
|
||||
### What's New
|
||||
|
||||
<ul>
|
||||
<li>Built with Gatsby</li>
|
||||
<Appear>
|
||||
<li>Gatsby Theme</li>
|
||||
<li>Component Shadowing</li>
|
||||
<li>Theme UI</li>
|
||||
</Appear>
|
||||
</ul>
|
||||
|
||||
---
|
||||
|
||||
<Image
|
||||
src='https://images.unsplash.com/photo-1485881374599-20e5ddb80d84?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9'
|
||||
/>
|
||||
size='cover'
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
}}>
|
||||
|
||||
## All aboard!
|
||||
|
||||
</Image>
|
||||
|
||||
<Notes>
|
||||
Stand clear of the closing doors
|
||||
@ -40,10 +57,6 @@ Stand clear of the closing doors
|
||||
|
||||
---
|
||||
|
||||
<Counter />
|
||||
|
||||
---
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
|
||||
@ -69,6 +82,8 @@ This one is inverted
|
||||
|
||||
---
|
||||
|
||||
<FullScreenCode>
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
|
||||
@ -78,17 +93,39 @@ export default props =>
|
||||
</div>
|
||||
```
|
||||
|
||||
</FullScreenCode>
|
||||
|
||||
---
|
||||
|
||||
<Split>
|
||||
|
||||
|
||||
|
||||
This one is split
|
||||
|
||||
</Split>
|
||||
|
||||
---
|
||||
|
||||
<SplitRight>
|
||||
|
||||
|
||||
|
||||
## SplitRight
|
||||
|
||||
This one is split the other way around
|
||||
|
||||
</SplitRight>
|
||||
|
||||
---
|
||||
|
||||
<Horizontal>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Horizontal>
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@mdx-deck/lite",
|
||||
"name": "mdx-deck",
|
||||
"version": "3.0.13",
|
||||
"description": "MDX-based presentation decks",
|
||||
"bin": {
|
||||
|
||||
@ -1,264 +0,0 @@
|
||||
|
||||
|
||||
# MDX Deck <img src='docs/ace.png' width='24' height='24' />
|
||||
|
||||
Award-winning React [MDX][]-based presentation decks
|
||||
|
||||
[![Build Status][badge]][travis]
|
||||
[![Version][]][npm]
|
||||
[![Downloads][]][npm]
|
||||
|
||||
[badge]: https://flat.badgen.net/travis/jxnblk/mdx-deck
|
||||
[travis]: https://travis-ci.org/jxnblk/mdx-deck
|
||||
[version]: https://flat.badgen.net/npm/v/mdx-deck
|
||||
[downloads]: https://flat.badgen.net/npm/dm/mdx-deck
|
||||
[npm]: https://npmjs.com/package/mdx-deck
|
||||
|
||||
- :memo: Write presentations in markdown
|
||||
- :atom_symbol: Import and use [React components](#imports)
|
||||
- :nail_care: Customizable [themes](#theming) and components
|
||||
- :zero: Zero-config CLI
|
||||
- :tipping_hand_woman: [Presenter mode](#presenter-mode)
|
||||
- :notebook: [Speaker notes](#speaker-notes)
|
||||
- :fire: Available as a Gatsby theme
|
||||
|
||||
[View demo](https://mdx-deck.jxnblk.com)
|
||||
|
||||
## Getting Started
|
||||
|
||||
```sh
|
||||
npm i -D mdx-deck
|
||||
```
|
||||
|
||||
Create an [MDX][] file and separate each slide with `---`.
|
||||
|
||||
````mdx
|
||||
# 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:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "mdx-deck deck.mdx"
|
||||
}
|
||||
```
|
||||
|
||||
Start the dev server:
|
||||
|
||||
```sh
|
||||
npm start
|
||||
```
|
||||
|
||||
## Using MDX
|
||||
|
||||
MDX uses Markdown syntax and can render React components inline with JSX.
|
||||
|
||||
### Imports
|
||||
|
||||
To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.
|
||||
|
||||
```mdx
|
||||
import { Box } from 'rebass'
|
||||
|
||||
<Box color="tomato">Hello</Box>
|
||||
```
|
||||
|
||||
Read more about MDX syntax in the [MDX Docs][mdx].
|
||||
|
||||
## Theming
|
||||
|
||||
<div>
|
||||
<img src='docs/images/future.png' width='256' />
|
||||
<img src='docs/images/comic.png' width='256' />
|
||||
<img src='docs/images/yellow.png' width='256' />
|
||||
</div>
|
||||
|
||||
MDX Deck uses [Theme UI][] and [Emotion][] for styling, making practically any part of the presentation themeable.
|
||||
It also includes several built-in themes to change the look and feel of the presentation.
|
||||
See the list of available [Themes](docs/themes.md),
|
||||
or read more about theming in the [Theming](docs/theming.md) docs.
|
||||
|
||||
## Components
|
||||
|
||||
MDX Deck includes built-in components to help with creating presentations, including a background `Image` component, an `Appear` component that allows stepping through parts of a single slide, and a `Notes` component for adding speaker notes.
|
||||
Read more in the [Components](docs/components.md) docs.
|
||||
|
||||
## Third-Party Components
|
||||
|
||||
These optional libraries are intended for use with MDX Deck.
|
||||
|
||||
- [CodeSurfer][]: React component for scrolling, zooming and highlighting code.
|
||||
- [mdx-code][]: Runnable code playgrounds for MDX Deck.
|
||||
- [mdx-deck-live-code][]: Live React and JS coding in slides.
|
||||
|
||||
_Note: please check with version compatibility when using these libraries._
|
||||
|
||||
[codesurfer]: https://github.com/pomber/code-surfer
|
||||
[mdx-code]: https://github.com/pranaygp/mdx-code
|
||||
[mdx-deck-live-code]: https://github.com/JReinhold/mdx-deck-live-code
|
||||
|
||||
## Layouts
|
||||
|
||||
Each slide can include a custom layout around its content,
|
||||
which can be used as a *template* for visually differentiating slides.
|
||||
|
||||
```js
|
||||
// example Layout.js
|
||||
import React from 'react'
|
||||
|
||||
export default ({ children }) => (
|
||||
<div
|
||||
style={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: 'tomato',
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
```mdx
|
||||
import Layout from './Layout'
|
||||
|
||||
# No Layout
|
||||
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
# Custom Layout
|
||||
|
||||
</Layout>
|
||||
```
|
||||
|
||||
The layout component will wrap the MDX elements within that slide,
|
||||
which means you can add layout styles, use a nested ThemeProvider, or style elements with CSS-in-JS.
|
||||
|
||||
## Built-in Layouts
|
||||
|
||||
MDX Deck includes a few [built-in layouts](docs/layouts.md) for inverting theme colors and changing the layout of a slide.
|
||||
|
||||
## Presenter Mode
|
||||
|
||||
Use [_Presenter Mode_](docs/presenting.md) when on stage to show a preview of the next slide, a timer, and speaker notes.
|
||||
|
||||
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
| Key | Description |
|
||||
| ----------- | -------------------------------------------- |
|
||||
| Left Arrow, Page Up, Shift + Space | Go to previous slide (or step in [Appear][]) |
|
||||
| Right Arrow, Page Down, Space | Go to next slide (or step in [Appear][]) |
|
||||
| Option + P | Toggle [Presenter Mode](#presenter-mode) |
|
||||
| Option + O | Toggle [Overview Mode](#overview-mode) |
|
||||
| Option + G | Toggle Grid Mode
|
||||
|
||||
[appear]: docs/components.md#appear
|
||||
|
||||
## Videos & Articles
|
||||
|
||||
- [Egghead Tutorial][egghead] by [Andrew Del Prete](https://github.com/andrewdelprete).
|
||||
- [mdx-deck: slide decks powered by markdown and react][kcd-medium] by [Kent C. Dodds][]
|
||||
- [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])
|
||||
- [What is MDX][kcd-video] by [Kent C. Dodds][]
|
||||
- [Build a Custom Provider Component for MDX-Deck][ks-egghead] by [Kyle Shevlin][]
|
||||
|
||||
[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react
|
||||
[kent c. dodds]: https://mobile.twitter.com/kentcdodds
|
||||
[kcd-video]: http://youtu.be/d2sQiI5NFAM?a
|
||||
[kcd-medium]: https://blog.kentcdodds.com/mdx-deck-slide-decks-powered-by-markdown-and-react-bfc6d6af20da
|
||||
[hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be
|
||||
[hw-demo]: https://github.com/hswolff/mdx-deck-demo
|
||||
[harry wolff]: https://mobile.twitter.com/hswolff
|
||||
[ks-egghead]: https://egghead.io/lessons/javascript-build-a-custom-provider-component-for-mdx-deck
|
||||
[kyle shevlin]: https://twitter.com/kyleshevlin
|
||||
|
||||
## Docs
|
||||
|
||||
- [Theming](docs/theming.md)
|
||||
- [Built-in Themes](docs/themes.md)
|
||||
- [Layouts](docs/layouts.md)
|
||||
- [Components](docs/components.md)
|
||||
- [Presenting](docs/presenting.md)
|
||||
- [Exporting](docs/exporting.md)
|
||||
- [Usage with Gatsby](docs/gatsby.md)
|
||||
- [Advanced Usage](docs/advanced.md)
|
||||
- [API](docs/api.md)
|
||||
|
||||
## Real-World Examples
|
||||
|
||||
See how others have used MDX Deck for their presentations.
|
||||
|
||||
- [Design Systems & React][design-systems-react] by [Diana Mounter](https://mobile.twitter.com/broccolini)
|
||||
- [Bringing Brazil to the Cloud, Now][brazil-now] by [Guillermo Rauch](https://mobile.twitter.com/rauchg/)
|
||||
- [Simplify React][simplify-react] by [Kent C. Dodds](https://mobile.twitter.com/kentcdodds)
|
||||
- [I Got 99 Problems but GraphQL Ain't One][99-problems] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
|
||||
- [Stop de #divFest][stop-div-fest] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
|
||||
- [MDX, authors and richer JAMstack content][mdx-talk] by [Josh Dzielak](https://mobile.twitter.com/dzello)
|
||||
- [Components as Data: A Cross Platform GraphQL Powered Component API][components-as-data] by [Luke Herrington](https://mobile.twitter.com/lukeherrington)
|
||||
|
||||
## Usage Examples
|
||||
|
||||
The following examples will open in CodeSandbox.
|
||||
|
||||
- [Basic Example](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/basic)
|
||||
- [Multiple Decks](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/multiple)
|
||||
- [Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/syntax-highlighting)
|
||||
- [Prism Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/prism)
|
||||
- [Aspect Ratio](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/aspect-ratio)
|
||||
- [Layouts](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/layouts)
|
||||
- [Images](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/images)
|
||||
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
|
||||
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
|
||||
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
|
||||
- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
|
||||
|
||||
---
|
||||
|
||||
### Related
|
||||
|
||||
- [MDX][]
|
||||
- [Gatsby][]
|
||||
- [Theme UI][]
|
||||
- [Emotion][]
|
||||
- [Spectacle][]
|
||||
|
||||
[MIT License](LICENSE.md)
|
||||
|
||||
[mdx]: https://mdxjs.com/
|
||||
[gatsby]: https://gatsbyjs.org
|
||||
[spectacle]: https://github.com/FormidableLabs/spectacle
|
||||
[emotion]: https://emotion.sh
|
||||
[theme ui]: https://theme-ui.com
|
||||
|
||||
<!-- examples -->
|
||||
[design-systems-react]: https://github-ds.now.sh/#0
|
||||
[brazil-now]: https://braziljs.now.sh
|
||||
[simplify-react]: https://simply-react.netlify.com/#0
|
||||
[99-problems]: https://99-problems-graphql-aint-one.now.sh/#0
|
||||
[stop-div-fest]: https://stop-div-fest.now.sh/
|
||||
[mdx-talk]: https://mdx-talk.developermode.com/
|
||||
[components-as-data]: https://componentsasdata.lukeherrington.com
|
||||
|
||||
@ -1,118 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
const path = require('path')
|
||||
const meow = require('meow')
|
||||
const execa = require('execa')
|
||||
const chalk = require('chalk')
|
||||
const fs = require('fs-extra')
|
||||
const pkg = require('./package.json')
|
||||
|
||||
const log = (...args) => {
|
||||
console.log(chalk.green('[mdx-deck]'), ...args)
|
||||
}
|
||||
log.error = (...args) => {
|
||||
console.log(chalk.red('[err]'), ...args)
|
||||
}
|
||||
|
||||
const cli = meow(
|
||||
`
|
||||
${chalk.gray('Usage')}
|
||||
|
||||
$ ${chalk.green('mdx-deck deck.mdx')}
|
||||
|
||||
$ ${chalk.green('mdx-deck build deck.mdx')}
|
||||
|
||||
$ ${chalk.green('mdx-deck eject deck.mdx')}
|
||||
|
||||
${chalk.gray('Options')}
|
||||
|
||||
-h --host Dev server host
|
||||
-p --port Dev server port
|
||||
--no-open Prevent from opening in default browser
|
||||
|
||||
`,
|
||||
{
|
||||
description: chalk.green('[mdx-deck] ') + chalk.gray(pkg.description),
|
||||
flags: {
|
||||
port: {
|
||||
type: 'string',
|
||||
alias: 'p',
|
||||
default: '8000',
|
||||
},
|
||||
host: {
|
||||
type: 'string',
|
||||
alias: 'h',
|
||||
default: 'localhost',
|
||||
},
|
||||
open: {
|
||||
type: 'boolean',
|
||||
alias: 'o',
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const [cmd, file] = cli.input
|
||||
const filename = file || cmd
|
||||
|
||||
if (!filename) cli.showHelp(0)
|
||||
|
||||
process.env.__SRC__ = path.resolve(filename)
|
||||
|
||||
const opts = Object.assign({}, cli.flags)
|
||||
|
||||
// deprecation warnings
|
||||
if (opts.outDir) {
|
||||
log.error('the --out-dir flag has been deprecated')
|
||||
log('Decks are now built to the `public/` directory')
|
||||
}
|
||||
if (opts.webpack) {
|
||||
log.error('the --webpack flag has been deprecated')
|
||||
log('Use the Gatsby theme directly to customize webpack configuration')
|
||||
}
|
||||
|
||||
let dev
|
||||
|
||||
const gatsby = async (...args) => {
|
||||
await execa('gatsby', ['clean'], {
|
||||
cwd: __dirname,
|
||||
stdio: 'inherit',
|
||||
preferLocal: true,
|
||||
})
|
||||
return execa('gatsby', args.filter(Boolean), {
|
||||
cwd: __dirname,
|
||||
stdio: 'inherit',
|
||||
preferLocal: true,
|
||||
})
|
||||
}
|
||||
|
||||
switch (cmd) {
|
||||
case 'build':
|
||||
gatsby('build').then(() => {
|
||||
const public = path.join(__dirname, 'public')
|
||||
const dist = path.join(process.cwd(), 'public')
|
||||
if (public === dist) return
|
||||
fs.copySync(public, dist)
|
||||
})
|
||||
break
|
||||
case 'eject':
|
||||
log('ejecting Gatsby site')
|
||||
require('./eject')({
|
||||
cwd: process.cwd(),
|
||||
filename: path.resolve(filename),
|
||||
}).catch(err => {
|
||||
log.error(err)
|
||||
})
|
||||
break
|
||||
case 'dev':
|
||||
default:
|
||||
gatsby(
|
||||
'develop',
|
||||
'--host',
|
||||
opts.host,
|
||||
'--port',
|
||||
opts.port,
|
||||
opts.open && '--open'
|
||||
)
|
||||
break
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
const path = require('path')
|
||||
const fs = require('fs-extra')
|
||||
const initit = require('initit')
|
||||
|
||||
const template = 'jxnblk/mdx-deck/packages/starter'
|
||||
|
||||
module.exports = async ({ cwd, filename }) => {
|
||||
await initit({
|
||||
template,
|
||||
name: cwd,
|
||||
})
|
||||
fs.moveSync(filename, path.join(cwd, 'decks'))
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
const src = process.env.__SRC__
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
resolve: 'gatsby-theme-mdx-deck',
|
||||
options: {
|
||||
cli: true,
|
||||
contentPath: src,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-compile-es6-packages',
|
||||
options: {
|
||||
modules: ['mdx-deck', '@mdx-deck/themes'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
import * as themes from '@mdx-deck/themes'
|
||||
|
||||
export * from 'gatsby-theme-mdx-deck'
|
||||
export { themes }
|
||||
@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "mdx-deck",
|
||||
"version": "3.0.13",
|
||||
"description": "MDX-based presentation decks",
|
||||
"bin": {
|
||||
"mdx-deck": "./cli.js"
|
||||
},
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "./cli.js hello.mdx",
|
||||
"build": "./cli.js build hello.mdx",
|
||||
"help": "./cli.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
"license": "MIT",
|
||||
"repository": "github:jxnblk/mdx-deck",
|
||||
"dependencies": {
|
||||
"@mdx-deck/themes": "^3.0.8",
|
||||
"chalk": "^3.0.0",
|
||||
"execa": "^3.2.0",
|
||||
"fs-extra": "^8.1.0",
|
||||
"gatsby": "^2.13.24",
|
||||
"gatsby-plugin-compile-es6-packages": "^2.0.0",
|
||||
"gatsby-theme-mdx-deck": "^3.0.13",
|
||||
"initit": "^1.0.0-2",
|
||||
"meow": "^5.0.0",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6"
|
||||
},
|
||||
"gitHead": "2e6e342cccc32569fd7e2ae2a0711dd91e58d59f"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '@mdx-deck/themes'
|
||||
Loading…
Reference in New Issue
Block a user