2018-08-05 02:51:08 +03:00
|
|
|
|
export { future as theme } from '../themes'
|
2018-08-15 02:15:56 +03:00
|
|
|
|
import { Head, Image, Notes, Appear } from '../dist'
|
2018-09-16 19:46:24 +03:00
|
|
|
|
import { Invert, Split, FullScreenCode, Horizontal} from '../layouts'
|
2018-08-05 01:13:14 +03:00
|
|
|
|
import Counter from './Counter'
|
2018-08-30 17:37:12 +03:00
|
|
|
|
import code from './code'
|
2018-07-29 20:18:00 +03:00
|
|
|
|
|
2018-08-15 02:15:56 +03:00
|
|
|
|
<Head>
|
2018-08-15 03:48:51 +03:00
|
|
|
|
<title>mdx-deck</title>
|
|
|
|
|
|
<meta name='twitter:card' content='summary_large_image' />
|
|
|
|
|
|
<meta name='twitter:site' content='@jxnblk' />
|
|
|
|
|
|
<meta name='twitter:title' content='mdx-deck' />
|
|
|
|
|
|
<meta name='twitter:description' content='MDX-based presentation decks' />
|
|
|
|
|
|
<meta name='twitter:image' content='https://jxnblk.com/mdx-deck/card.png' />
|
2018-08-15 02:15:56 +03:00
|
|
|
|
</Head>
|
|
|
|
|
|
|
2018-07-29 19:11:24 +03:00
|
|
|
|
# mdx-deck
|
|
|
|
|
|
|
|
|
|
|
|
MDX-based presention decks
|
2018-07-28 21:21:36 +03:00
|
|
|
|
---
|
2018-07-29 19:11:24 +03:00
|
|
|
|
# Presentation decks
|
2018-07-28 21:21:36 +03:00
|
|
|
|
---
|
|
|
|
|
|
# Built with [MDX][]
|
|
|
|
|
|
[MDX]: https://github.com/mdx-js/mdx
|
|
|
|
|
|
---
|
2018-07-29 01:13:50 +03:00
|
|
|
|
import Box from 'superbox'
|
2018-07-28 21:21:36 +03:00
|
|
|
|
|
2018-07-29 19:11:24 +03:00
|
|
|
|
<Box
|
2018-07-31 01:04:47 +03:00
|
|
|
|
fontSize={3}
|
2018-07-29 19:11:24 +03:00
|
|
|
|
p={4}
|
|
|
|
|
|
bg='magenta'>
|
|
|
|
|
|
Import React components
|
2018-07-28 21:21:36 +03:00
|
|
|
|
</Box>
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2018-07-29 19:11:24 +03:00
|
|
|
|
|
|
|
|
|
|
- Make bulleted lists
|
|
|
|
|
|
- To help make your point
|
|
|
|
|
|
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2018-07-29 19:11:24 +03:00
|
|
|
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
|
|
|
|
|
|
1. `npm i -D mdx-deck`
|
2018-07-29 18:12:33 +03:00
|
|
|
|
2. Write some markdown and JSX
|
|
|
|
|
|
3. Present
|
2018-07-29 19:11:24 +03:00
|
|
|
|
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2018-08-03 04:21:16 +03:00
|
|
|
|
|
2018-08-05 00:06:12 +03:00
|
|
|
|
```jsx
|
2018-07-29 18:12:33 +03:00
|
|
|
|
<button>code example</button>
|
|
|
|
|
|
```
|
2018-08-03 03:54:21 +03:00
|
|
|
|
|
2018-08-03 05:15:33 +03:00
|
|
|
|
```notes
|
|
|
|
|
|
- These are speaker notes
|
2018-08-05 01:13:14 +03:00
|
|
|
|
- And they won't be rendered in your slide
|
2018-08-03 05:15:33 +03:00
|
|
|
|
```
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2018-08-25 17:31:54 +03:00
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
|
class extends React.Component {
|
|
|
|
|
|
render () {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
|
<h1>Indented code</h1>
|
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
---
|
2018-07-29 18:12:33 +03:00
|
|
|
|
> “Blockquotes are essential to any good presentation”
|
|
|
|
|
|
|
|
|
|
|
|
– Anonymous
|
2018-07-29 23:17:23 +03:00
|
|
|
|
|
2018-08-03 05:15:33 +03:00
|
|
|
|
<Notes>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Speaker notes can also be</li>
|
|
|
|
|
|
<li>Written in JSX</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</Notes>
|
|
|
|
|
|
|
2018-08-05 00:06:12 +03:00
|
|
|
|
---
|
|
|
|
|
|
### Appear
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<Appear>
|
|
|
|
|
|
<li>One</li>
|
|
|
|
|
|
<li>Two</li>
|
|
|
|
|
|
<li>Three</li>
|
|
|
|
|
|
<li>Four</li>
|
|
|
|
|
|
</Appear>
|
|
|
|
|
|
</ul>
|
2018-08-01 02:27:52 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2018-08-10 21:26:36 +03:00
|
|
|
|
<Image
|
|
|
|
|
|
src='https://source.unsplash.com/random/768x2048'
|
|
|
|
|
|
size='contain'
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
```notes
|
|
|
|
|
|
Testing object fit
|
|
|
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2018-08-05 01:13:14 +03:00
|
|
|
|
### Real React Components
|
|
|
|
|
|
|
|
|
|
|
|
<Counter />
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2018-08-01 02:27:52 +03:00
|
|
|
|
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
|
|
|
|
|
|
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2018-08-04 23:45:55 +03:00
|
|
|
|
export default Split
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Split Layout
|
|
|
|
|
|
|
2018-09-16 19:46:24 +03:00
|
|
|
|
---
|
|
|
|
|
|
export default Horizontal
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Horizontal Layout
|
|
|
|
|
|
|
|
|
|
|
|
## As many columns as you want
|
|
|
|
|
|
|
2018-08-04 23:45:55 +03:00
|
|
|
|
---
|
|
|
|
|
|
export default Invert
|
|
|
|
|
|
|
|
|
|
|
|
# Invert Layout
|
|
|
|
|
|
|
2018-08-07 02:40:28 +03:00
|
|
|
|
---
|
|
|
|
|
|
export default FullScreenCode
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<Button>
|
|
|
|
|
|
Beep
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2018-08-04 23:45:55 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2018-08-04 19:56:26 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Inline image
|
|
|
|
|
|
|
2018-08-04 23:57:23 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2018-08-04 23:22:46 +03:00
|
|
|
|
Prop | Type | Description
|
|
|
|
|
|
---|---|---
|
|
|
|
|
|
`width` | number, string, or array | sets element width
|
|
|
|
|
|
`color` | string | sets foreground color
|
|
|
|
|
|
`bg` | string | sets background color
|
|
|
|
|
|
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2018-08-05 02:40:07 +03:00
|
|
|
|
export default Invert
|
2018-07-29 23:17:23 +03:00
|
|
|
|
|
2018-08-01 01:24:46 +03:00
|
|
|
|
# Get started :sunglasses:
|
2018-07-29 23:17:23 +03:00
|
|
|
|
[GitHub](https://github.com/jxnblk/mdx-deck)
|
