mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-12-01 13:32:13 +03:00
211 lines
2.8 KiB
Plaintext
211 lines
2.8 KiB
Plaintext
import { Head, Image, Notes, Appear } from '@mdx-deck/components'
|
||
import { Invert, Split, SplitRight, FullScreenCode, Horizontal} from '@mdx-deck/layouts'
|
||
import Counter from './Counter'
|
||
|
||
import future from '@mdx-deck/themes/future'
|
||
import aspect from '@mdx-deck/themes/aspect'
|
||
|
||
export const themes = [
|
||
future,
|
||
aspect,
|
||
]
|
||
|
||
<Head>
|
||
<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' />
|
||
</Head>
|
||
|
||
# MDX Deck
|
||
|
||
MDX-based presentation decks
|
||
|
||
---
|
||
|
||
# Presentation decks
|
||
|
||
---
|
||
|
||
# Built with [MDX][]
|
||
[MDX]: https://github.com/mdx-js/mdx
|
||
|
||
---
|
||
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
|
||
|
||
---
|
||
|
||
## Getting Started
|
||
|
||
1. `npm i -D mdx-deck`
|
||
2. Write some markdown and JSX
|
||
3. Present
|
||
|
||
---
|
||
|
||
```jsx
|
||
<button>code example</button>
|
||
```
|
||
|
||
<Notes>
|
||
|
||
- These are speaker notes
|
||
- And they won't be rendered in your slide
|
||
|
||
</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
|
||
|
||
<ul>
|
||
<Appear>
|
||
<li>One</li>
|
||
<li>Two</li>
|
||
<li>Three</li>
|
||
<li>Four</li>
|
||
</Appear>
|
||
</ul>
|
||
|
||
---
|
||
|
||
<Image
|
||
src='https://source.unsplash.com/random/768x2048'
|
||
size='contain'
|
||
/>
|
||
|
||
<Notes>
|
||
Testing object fit
|
||
</Notes>
|
||
|
||
---
|
||
|
||
### Real React Components
|
||
|
||
<Counter />
|
||
|
||
---
|
||
|
||
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
|
||
|
||
---
|
||
|
||
<Split>
|
||
|
||
|
||
|
||
## Split Layout
|
||
|
||
</Split>
|
||
|
||
---
|
||
|
||
<SplitRight>
|
||
|
||
|
||
|
||
## Split Layout
|
||
|
||
(To the right)
|
||
|
||
</SplitRight>
|
||
|
||
---
|
||
|
||
<Horizontal>
|
||
|
||
|
||
|
||
|
||
|
||
### Horizontal Layout
|
||
|
||
</Horizontal>
|
||
|
||
---
|
||
|
||
<Invert>
|
||
|
||
# Invert Layout
|
||
|
||
</Invert>
|
||
|
||
---
|
||
|
||
<FullScreenCode>
|
||
|
||
```
|
||
<Button>
|
||
Beep
|
||
</Button>
|
||
```
|
||
|
||
</FullScreenCode>
|
||
|
||
---
|
||
|
||
|
||
|
||
Inline image
|
||
|
||
---
|
||
|
||
Prop | Type | Description
|
||
---|---|---
|
||
`width` | number, string, or array | sets element width
|
||
`color` | string | sets foreground color
|
||
`bg` | string | sets background color
|
||
|
||
---
|
||
|
||
<Invert>
|
||
|
||
# Get started :sunglasses:
|
||
|
||
[GitHub](https://github.com/jxnblk/mdx-deck)
|
||
|
||
</Invert>
|
||
|