mdx-deck/docs/index.mdx

export { future as theme } from '../themes'
import { Head, Image, Notes, Appear } from '../dist'
import { Invert, Split, SplitRight, FullScreenCode } from '../layouts'
import Counter from './Counter'
import code from './code'

<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 presention decks
---
# Presentation decks
---
# Built with [MDX][]
[MDX]: https://github.com/mdx-js/mdx
---
import Box from 'superbox'

<Box
  fontSize={3}
  p={4}
  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
```
---

```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
```
---

### Real React Components

<Counter />

---

<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />

---
export default Split

![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20)

## Split Layout

---
export default Invert

# Invert Layout

---
export default FullScreenCode

```
<Button>
  Beep
</Button>
```

---

![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&h=1024&q=20&fit=crop)

Inline image

---

Prop | Type | Description
---|---|---
`width` | number, string, or array | sets element width
`color` | string | sets foreground color
`bg` | string | sets background color

---
export default Invert

# Get started :sunglasses:
[GitHub](https://github.com/jxnblk/mdx-deck)
-												Add theme

											
										
										
											2018-08-05 02:51:08 +03:00
+								export { future as theme } from '../themes'
-												Add head content to static output

											
										
										
											2018-08-15 02:15:56 +03:00
+								import { Head, Image, Notes, Appear } from '../dist'
-												Add FullScreenCode layout

											
										
										
											2018-08-07 02:40:28 +03:00
+								import { Invert, Split, SplitRight, FullScreenCode } from '../layouts'
-												Add React component example

											
										
										
											2018-08-05 01:13:14 +03:00
+								import Counter from './Counter'
-												Potential fix for localStorage race condition

											
										
										
											2018-08-30 17:37:12 +03:00
+								import code from './code'
-												Add themes

											
										
										
											2018-07-29 20:18:00 +03:00
-												Add head content to static output

											
										
										
											2018-08-15 02:15:56 +03:00
+								<Head>
-												Adjust build and screenshot

											
										
										
											2018-08-15 03:48:51 +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' />
-												Add head content to static output

											
										
										
											2018-08-15 02:15:56 +03:00
+								</Head>
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
+								# mdx-deck
 								MDX-based presention decks
-												Init

											
										
										
											2018-07-28 21:21:36 +03:00
+								---
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
+								# Presentation decks
-												Init

											
										
										
											2018-07-28 21:21:36 +03:00
+								---
 								# Built with [MDX][]
 								[MDX]: https://github.com/mdx-js/mdx
 								---
-												Split components and add support for inline modules

											
										
										
											2018-07-29 01:13:50 +03:00
+								import Box from 'superbox'
-												Init

											
										
										
											2018-07-28 21:21:36 +03:00
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
+								<Box
-												Adjust styles for font sizes

											
										
										
											2018-07-31 01:04:47 +03:00
+								  fontSize={3}
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
+								  p={4}
 								  bg='magenta'>
 								  Import React components
-												Init

											
										
										
											2018-07-28 21:21:36 +03:00
+								</Box>
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								---
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
 								- Make bulleted lists
 								- To help make your point
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								---
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
 								## Getting Started
 . `npm i -D mdx-deck`
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+. Write some markdown and JSX
 . Present
-												Add Image component

											
										
										
											2018-07-29 19:11:24 +03:00
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								---
-												Show speaker notes in presenter mode

											
										
										
											2018-08-03 04:21:16 +03:00
-												Merge branch 'master' into layouts

											
										
										
											2018-08-05 00:06:12 +03:00
+								```jsx
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								<button>code example</button>
 								```
-												Add basic context setup

											
										
										
											2018-08-03 03:54:21 +03:00
-												Add docs for speaker notes

											
										
										
											2018-08-03 05:15:33 +03:00
+								```notes
 								- These are speaker notes
-												Add React component example

											
										
										
											2018-08-05 01:13:14 +03:00
+								- And they won't be rendered in your slide
-												Add docs for speaker notes

											
										
										
											2018-08-03 05:15:33 +03:00
+								```
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								---
-												Left align pre tag – fixes #120

											
										
										
											2018-08-25 17:31:54 +03:00
 								```jsx
 								class extends React.Component {
 								  render () {
 								    return (
 								      <React.Fragment>
 								        <h1>Indented code</h1>
 								      </React.Fragment>
 								    )
 								  }
 								}
 								```
 								---
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								> “Blockquotes are essential to any good presentation”
 								– Anonymous
-												Add title option

											
										
										
											2018-07-29 23:17:23 +03:00
-												Add docs for speaker notes

											
										
										
											2018-08-03 05:15:33 +03:00
+								<Notes>
 								  <ul>
 								    <li>Speaker notes can also be</li>
 								    <li>Written in JSX</li>
 								  </ul>
 								</Notes>
-												Merge branch 'master' into layouts

											
										
										
											2018-08-05 00:06:12 +03:00
+								---
 								### Appear
 								<ul>
 								  <Appear>
 								    <li>One</li>
 								    <li>Two</li>
 								    <li>Three</li>
 								    <li>Four</li>
 								  </Appear>
 								</ul>
-												Add docs for Image component

											
										
										
											2018-08-01 02:27:52 +03:00
+								---
-												Add size prop to Image component

											
										
										
											2018-08-10 21:26:36 +03:00
+								<Image
 								  src='https://source.unsplash.com/random/768x2048'
 								  size='contain'
 								/>
 								```notes
 								Testing object fit
 								```
 								---
-												Add React component example

											
										
										
											2018-08-05 01:13:14 +03:00
+								### Real React Components
 								<Counter />
 								---
-												Add docs for Image component

											
										
										
											2018-08-01 02:27:52 +03:00
+								<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								---
-												Add docs for layouts

											
										
										
											2018-08-04 23:45:55 +03:00
+								export default Split
 								![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20)
 								## Split Layout
 								---
 								export default Invert
 								# Invert Layout
-												Add FullScreenCode layout

											
										
										
											2018-08-07 02:40:28 +03:00
+								---
 								export default FullScreenCode
 								```
 								<Button>
 								  Beep
 								</Button>
 								```
-												Add docs for layouts

											
										
										
											2018-08-04 23:45:55 +03:00
+								---
-												Use remark-unwrap-images

											
										
										
											2018-08-04 19:56:26 +03:00
+								![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&h=1024&q=20&fit=crop)
 								Inline image
-												Merge branch 'master' into table-styles

											
										
										
											2018-08-04 23:57:23 +03:00
+								---
-												Add table styles

											
										
										
											2018-08-04 23:22:46 +03:00
+								Prop | Type | Description
 								---|---|---
 								`width` | number, string, or array | sets element width
 								`color` | string | sets foreground color
 								`bg` | string | sets background color
-												Add default components

											
										
										
											2018-07-29 18:12:33 +03:00
+								---
-												Add themes

											
										
										
											2018-08-05 02:40:07 +03:00
+								export default Invert
-												Add title option

											
										
										
											2018-07-29 23:17:23 +03:00
-												Add emoji plugin

											
										
										
											2018-08-01 01:24:46 +03:00
+								# Get started :sunglasses:
-												Add title option

											
										
										
											2018-07-29 23:17:23 +03:00
+								[GitHub](https://github.com/jxnblk/mdx-deck)