mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-29 13:58:02 +03:00
95 lines
1.1 KiB
Plaintext
95 lines
1.1 KiB
Plaintext
import { Head, Image, Notes, Appear, Steps } from '..'
|
|
|
|
<Head>
|
|
<title>MDX Deck Demo</title>
|
|
</Head>
|
|
|
|
# Hello MDX Deck
|
|
|
|
---
|
|
|
|
## This is v2
|
|
|
|
---
|
|
|
|
## What's New
|
|
|
|
<ul>
|
|
<Appear>
|
|
<li>Reach Router</li>
|
|
<li>Less opinionated styles</li>
|
|
<li>more stuff</li>
|
|
</Appear>
|
|
</ul>
|
|
|
|
---
|
|
|
|
<Image
|
|
src='https://source.unsplash.com/random/1024x768'
|
|
size='contain'
|
|
/>
|
|
|
|
---
|
|
|
|
## This slide has notes
|
|
|
|
<Notes>
|
|
Hello, secret speaker notes
|
|
</Notes>
|
|
|
|
---
|
|
|
|
```js
|
|
const codeExample = require('./code-example')
|
|
```
|
|
|
|
---
|
|
|
|
## More Appear
|
|
|
|
<Appear>
|
|
<div>One</div>
|
|
<div>Two</div>
|
|
<div>Three</div>
|
|
<div>Four</div>
|
|
<div>Five</div>
|
|
<div>Six</div>
|
|
</Appear>
|
|
|
|
---
|
|
|
|
## Steps Components
|
|
|
|
<Steps
|
|
length={3}
|
|
render={({ step }) => (
|
|
<pre>
|
|
Step: {step}
|
|
</pre>
|
|
)}
|
|
/>
|
|
|
|
---
|
|
|
|
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
|
|
|
|
---
|
|
|
|
## Last Slide
|
|
|
|
|