mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-20 03:18:57 +03:00
197 lines
2.7 KiB
Plaintext
197 lines
2.7 KiB
Plaintext
import {
|
||
Head, Image, Notes, Appear,
|
||
Invert, Split, SplitRight, FullScreenCode, Horizontal
|
||
} from 'mdx-deck'
|
||
import Counter from './Counter'
|
||
import { future } from '@mdx-deck/themes'
|
||
|
||
export const themes = [ future ]
|
||
|
||
<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 and Use React Components
|
||
|
||
<Counter />
|
||
|
||
---
|
||
|
||
- 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?new_york'
|
||
size='contain'
|
||
/>
|
||
|
||
<Notes>
|
||
Testing object fit
|
||
</Notes>
|
||
|
||
---
|
||
|
||
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&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>
|
||
|