2019-02-19 00:16:55 +03:00
|
|
|
import { Head, Image, Notes, Appear, Steps } from '..'
|
2019-02-16 20:33:43 +03:00
|
|
|
|
|
|
|
|
<Head>
|
|
|
|
|
<title>MDX Deck Demo</title>
|
|
|
|
|
</Head>
|
2018-07-29 20:18:00 +03:00
|
|
|
|
2019-02-15 22:58:58 +03:00
|
|
|
# Hello MDX Deck
|
2018-08-04 19:56:26 +03:00
|
|
|
|
2018-08-04 23:57:23 +03:00
|
|
|
---
|
|
|
|
|
|
2019-02-15 22:58:58 +03:00
|
|
|
## This is v2
|
2018-08-04 23:22:46 +03:00
|
|
|
|
2018-07-29 18:12:33 +03:00
|
|
|
---
|
2018-07-29 23:17:23 +03:00
|
|
|
|
2019-02-15 22:58:58 +03:00
|
|
|
## What's New
|
2019-02-16 20:33:43 +03:00
|
|
|
|
2019-02-16 21:04:45 +03:00
|
|
|
<ul>
|
|
|
|
|
<Appear>
|
|
|
|
|
<li>Reach Router</li>
|
|
|
|
|
<li>Less opinionated styles</li>
|
|
|
|
|
<li>more stuff</li>
|
|
|
|
|
</Appear>
|
|
|
|
|
</ul>
|
|
|
|
|
|
2019-02-16 20:33:43 +03:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<Image
|
|
|
|
|
src='https://source.unsplash.com/random/1024x768'
|
|
|
|
|
size='contain'
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## This slide has notes
|
|
|
|
|
|
|
|
|
|
<Notes>
|
|
|
|
|
Hello, secret speaker notes
|
|
|
|
|
</Notes>
|
2019-02-17 00:51:16 +03:00
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2019-02-18 01:49:15 +03:00
|
|
|
```js
|
|
|
|
|
const codeExample = require('./code-example')
|
2019-02-17 00:51:16 +03:00
|
|
|
```
|
|
|
|
|
|
2019-02-17 23:34:31 +03:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## More Appear
|
|
|
|
|
|
|
|
|
|
<Appear>
|
|
|
|
|
<div>One</div>
|
|
|
|
|
<div>Two</div>
|
|
|
|
|
<div>Three</div>
|
|
|
|
|
<div>Four</div>
|
|
|
|
|
<div>Five</div>
|
|
|
|
|
<div>Six</div>
|
|
|
|
|
</Appear>
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2019-02-19 00:16:55 +03:00
|
|
|
## Steps Components
|
|
|
|
|
|
|
|
|
|
<Steps
|
|
|
|
|
length={3}
|
|
|
|
|
render={({ step }) => (
|
|
|
|
|
<pre>
|
|
|
|
|
Step: {step}
|
|
|
|
|
</pre>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2019-03-02 21:39:09 +03:00
|
|
|
export default props =>
|
|
|
|
|
<div
|
|
|
|
|
style={{
|
|
|
|
|
width: '100vw',
|
|
|
|
|
height: '100vh',
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
backgroundColor: 'tomato'
|
|
|
|
|
}}>
|
|
|
|
|
{props.children}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
## With a (tomato) layout
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2019-02-17 23:34:31 +03:00
|
|
|
## Last Slide
|
2019-02-19 00:16:55 +03:00
|
|
|
|
|
|
|
|
|
