2019-03-04 01:29:04 +03:00
|
|
|
|
import { Head, Image, Notes, Appear } from '@mdx-deck/components'
|
|
|
|
|
|
import { Invert, Split, SplitRight, FullScreenCode, Horizontal} from '@mdx-deck/layouts'
|
|
|
|
|
|
import Counter from './Counter'
|
2019-02-16 20:33:43 +03:00
|
|
|
|
|
2019-04-21 04:56:46 +03:00
|
|
|
|
import future from '@mdx-deck/themes/future'
|
|
|
|
|
|
import aspect from '@mdx-deck/themes/aspect'
|
|
|
|
|
|
|
|
|
|
|
|
export const themes = [
|
2019-04-21 05:58:36 +03:00
|
|
|
|
future,
|
2019-04-21 04:56:46 +03:00
|
|
|
|
aspect,
|
|
|
|
|
|
]
|
2019-04-14 20:45:10 +03:00
|
|
|
|
|
2019-02-16 20:33:43 +03:00
|
|
|
|
<Head>
|
2019-03-04 01:29:04 +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' />
|
2019-02-16 20:33:43 +03:00
|
|
|
|
</Head>
|
2018-07-29 20:18:00 +03:00
|
|
|
|
|
2019-03-10 03:31:30 +03:00
|
|
|
|
# MDX Deck
|
2019-03-04 01:29:04 +03:00
|
|
|
|
|
2019-04-15 03:23:56 +03:00
|
|
|
|
MDX-based presentation decks
|
2019-03-04 01:29:04 +03:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
# Presentation decks
|
2018-08-04 19:56:26 +03:00
|
|
|
|
|
2018-08-04 23:57:23 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
# Built with [MDX][]
|
|
|
|
|
|
[MDX]: https://github.com/mdx-js/mdx
|
2018-08-04 23:22:46 +03:00
|
|
|
|
|
2018-07-29 18:12:33 +03:00
|
|
|
|
---
|
2019-03-04 01:29:04 +03:00
|
|
|
|
import { Box } from '@rebass/emotion'
|
|
|
|
|
|
|
|
|
|
|
|
<Box
|
|
|
|
|
|
fontSize={[ 6, 7 ]}
|
|
|
|
|
|
p={4}
|
|
|
|
|
|
color='navy'
|
|
|
|
|
|
bg='magenta'>
|
|
|
|
|
|
Import React components
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
- Make bulleted lists
|
|
|
|
|
|
- To help make your point
|
2018-07-29 23:17:23 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
|
|
|
|
|
|
1. `npm i -D mdx-deck`
|
|
|
|
|
|
2. Write some markdown and JSX
|
|
|
|
|
|
3. Present
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
|
<button>code example</button>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
<Notes>
|
2019-04-20 20:46:53 +03:00
|
|
|
|
|
|
|
|
|
|
- These are speaker notes
|
2019-03-04 01:29:04 +03:00
|
|
|
|
- And they won't be rendered in your slide
|
2019-04-20 20:46:53 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
</Notes>
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
|
class extends React.Component {
|
|
|
|
|
|
render () {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
|
<h1>Indented code</h1>
|
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
> “Blockquotes are essential to any good presentation”
|
|
|
|
|
|
|
|
|
|
|
|
– Anonymous
|
|
|
|
|
|
|
|
|
|
|
|
<Notes>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Speaker notes can also be</li>
|
|
|
|
|
|
<li>Written in JSX</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</Notes>
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### Appear
|
2019-02-16 20:33:43 +03:00
|
|
|
|
|
2019-02-16 21:04:45 +03:00
|
|
|
|
<ul>
|
|
|
|
|
|
<Appear>
|
2019-03-04 01:29:04 +03:00
|
|
|
|
<li>One</li>
|
|
|
|
|
|
<li>Two</li>
|
|
|
|
|
|
<li>Three</li>
|
|
|
|
|
|
<li>Four</li>
|
2019-02-16 21:04:45 +03:00
|
|
|
|
</Appear>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
2019-02-16 20:33:43 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
<Image
|
2019-03-04 01:29:04 +03:00
|
|
|
|
src='https://source.unsplash.com/random/768x2048'
|
2019-02-16 20:33:43 +03:00
|
|
|
|
size='contain'
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
<Notes>
|
|
|
|
|
|
Testing object fit
|
|
|
|
|
|
</Notes>
|
|
|
|
|
|
|
2019-02-16 20:33:43 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
### Real React Components
|
2019-02-16 20:33:43 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
<Counter />
|
2019-02-17 00:51:16 +03:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
|
2019-02-17 00:51:16 +03:00
|
|
|
|
|
2019-02-17 23:34:31 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
<Split>
|
2019-02-17 23:34:31 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Split Layout
|
2019-02-17 23:34:31 +03:00
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
</Split>
|
|
|
|
|
|
|
2019-02-17 23:34:31 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
<SplitRight>
|
2019-02-19 00:16:55 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Split Layout
|
|
|
|
|
|
|
|
|
|
|
|
(To the right)
|
|
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
</SplitRight>
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
<Horizontal>
|
2019-03-04 01:29:04 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Horizontal Layout
|
|
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
</Horizontal>
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
---
|
2019-04-11 00:02:04 +03:00
|
|
|
|
|
|
|
|
|
|
<Invert>
|
2019-03-04 01:29:04 +03:00
|
|
|
|
|
|
|
|
|
|
# Invert Layout
|
2019-02-19 00:16:55 +03:00
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
</Invert>
|
|
|
|
|
|
|
2019-02-19 00:16:55 +03:00
|
|
|
|
---
|
2019-04-11 00:02:04 +03:00
|
|
|
|
|
|
|
|
|
|
<FullScreenCode>
|
2019-02-19 00:16:55 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
```
|
|
|
|
|
|
<Button>
|
|
|
|
|
|
Beep
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
```
|
2019-03-02 21:39:09 +03:00
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
</FullScreenCode>
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Inline image
|
2019-03-02 21:39:09 +03:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
Prop | Type | Description
|
|
|
|
|
|
---|---|---
|
|
|
|
|
|
`width` | number, string, or array | sets element width
|
|
|
|
|
|
`color` | string | sets foreground color
|
|
|
|
|
|
`bg` | string | sets background color
|
2019-02-19 00:16:55 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
---
|
2019-04-11 00:02:04 +03:00
|
|
|
|
|
|
|
|
|
|
<Invert>
|
2019-02-19 00:16:55 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
# Get started :sunglasses:
|
2019-03-09 20:43:08 +03:00
|
|
|
|
|
2019-03-04 01:29:04 +03:00
|
|
|
|
[GitHub](https://github.com/jxnblk/mdx-deck)
|
2019-03-09 20:43:08 +03:00
|
|
|
|
|
2019-04-11 00:02:04 +03:00
|
|
|
|
</Invert>
|
|
|
|
|
|
|
