mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-29 13:58:02 +03:00
make split arbitrary
This commit is contained in:
Sara Vieira
parent
33fbdf2cb8
commit
bc7a9e2153
53
README.md
53
README.md
@ -1,4 +1,3 @@
|
||||
|
||||
# mdx-deck
|
||||
|
||||
|
||||
@ -11,7 +10,6 @@
|
||||
|
||||
[badge]: https://img.shields.io/travis/jxnblk/mdx-deck.svg?style=flat-square
|
||||
[travis]: https://travis-ci.org/jxnblk/mdx-deck
|
||||
|
||||
[version-badge]: https://img.shields.io/npm/v/mdx-deck.svg?style=flat-square
|
||||
[downloads-badge]: https://img.shields.io/npm/dw/mdx-deck.svg?style=flat-square
|
||||
[npm]: https://npmjs.com/package/mdx-deck
|
||||
@ -29,7 +27,6 @@ npm i -D mdx-deck
|
||||
|
||||
[View demo](https://jxnblk.com/mdx-deck)
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
Create an [MDX][] file and separate each slide with `---`.
|
||||
@ -73,12 +70,12 @@ npm start
|
||||
- [What is MDX][kcd-video] by [Kent C. Dodds][]
|
||||
|
||||
[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react
|
||||
[Kent C. Dodds]: https://mobile.twitter.com/kentcdodds
|
||||
[kent c. dodds]: https://mobile.twitter.com/kentcdodds
|
||||
[kcd-video]: http://youtu.be/d2sQiI5NFAM?a
|
||||
[kcd-medium]: https://blog.kentcdodds.com/mdx-deck-slide-decks-powered-by-markdown-and-react-bfc6d6af20da
|
||||
[hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be
|
||||
[hw-demo]: https://github.com/hswolff/mdx-deck-demo
|
||||
[Harry Wolff]: https://mobile.twitter.com/hswolff
|
||||
[harry wolff]: https://mobile.twitter.com/hswolff
|
||||
|
||||
## Quick Start
|
||||
|
||||
@ -104,7 +101,7 @@ import { Box } from 'grid-styled'
|
||||
</Box>
|
||||
```
|
||||
|
||||
Read more about MDX syntax in the [MDX Docs][MDX].
|
||||
Read more about MDX syntax in the [MDX Docs][mdx].
|
||||
|
||||
## Theming
|
||||
|
||||
@ -156,7 +153,7 @@ export default {
|
||||
colors: {
|
||||
text: '#f0f',
|
||||
background: 'black',
|
||||
link: '#0ff',
|
||||
link: '#0ff'
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -175,7 +172,7 @@ These third-party libraries are great for use with mdx-deck.
|
||||
|
||||
- [CodeSurfer][]: React component for scrolling, zooming and highlighting code.
|
||||
|
||||
[CodeSurfer]: https://github.com/pomber/code-surfer
|
||||
[codesurfer]: https://github.com/pomber/code-surfer
|
||||
|
||||
### Layouts
|
||||
|
||||
@ -186,7 +183,7 @@ This can be used as a substitute for slide templates found in other presentation
|
||||
// example Layout.js
|
||||
import React from 'react'
|
||||
|
||||
export default ({ children }) =>
|
||||
export default ({ children }) => (
|
||||
<div
|
||||
style={{
|
||||
width: '100vw',
|
||||
@ -195,6 +192,7 @@ export default ({ children }) =>
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
```mdx
|
||||
@ -213,7 +211,6 @@ which means you can use a nested ThemeProvider or target elements with CSS-in-JS
|
||||
|
||||
### Built-in Layouts
|
||||
|
||||
|
||||
mdx-deck includes some built-in layouts for inverting theme colors and changing the layout of a slide. Read more about [built-in layouts](docs/components.md#layouts).
|
||||
|
||||
## Presenter Mode
|
||||
@ -246,7 +243,7 @@ These are only visible in presenter mode
|
||||
|
||||
**Notes Component:** Use the `Notes` component to create more complex speaker notes.
|
||||
|
||||
````mdx
|
||||
```mdx
|
||||
import { Notes } from 'mdx-deck'
|
||||
|
||||
# Slide Content
|
||||
@ -254,7 +251,7 @@ import { Notes } from 'mdx-deck'
|
||||
<Notes>
|
||||
Only visible in presenter mode
|
||||
</Notes>
|
||||
````
|
||||
```
|
||||
|
||||
## Overview Mode
|
||||
|
||||
@ -265,18 +262,18 @@ This shows a list of all slides on the left and a preview of the current slide o
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
Key | Description
|
||||
---|---
|
||||
Left Arrow | Go to previous slide (or step in [Appear][])
|
||||
Right Arrow | Go to next slide (or step in [Appear][])
|
||||
Space | Go to next slide (or step in [Appear][])
|
||||
Up Arrow | Hide current step in [Appear][] component without navigating slides
|
||||
Down Arrow | Show next step in [Appear][] component without navigating slides
|
||||
Option + P | Toggle [Presenter Mode](#presenter-mode)
|
||||
Option + O | Toggle [Overview Mode](#overview-mode)
|
||||
Option + G | Toggle grid view mode
|
||||
| Key | Description |
|
||||
| ----------- | ------------------------------------------------------------------- |
|
||||
| Left Arrow | Go to previous slide (or step in [Appear][]) |
|
||||
| Right Arrow | Go to next slide (or step in [Appear][]) |
|
||||
| Space | Go to next slide (or step in [Appear][]) |
|
||||
| Up Arrow | Hide current step in [Appear][] component without navigating slides |
|
||||
| Down Arrow | Show next step in [Appear][] component without navigating slides |
|
||||
| Option + P | Toggle [Presenter Mode](#presenter-mode) |
|
||||
| Option + O | Toggle [Overview Mode](#overview-mode) |
|
||||
| Option + G | Toggle grid view mode |
|
||||
|
||||
[Appear]: docs/components.md#appear
|
||||
[appear]: docs/components.md#appear
|
||||
|
||||
## Exporting
|
||||
|
||||
@ -290,7 +287,6 @@ Add a `build` script to your `package.json` to export a presentation as HTML wit
|
||||
|
||||
See more exporting options in the [Exporting Documentation](docs/exporting.md)
|
||||
|
||||
|
||||
## CLI Options
|
||||
|
||||
```
|
||||
@ -320,6 +316,7 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
|
||||
- [Bringing Brazil to the Cloud, Now][brazil-now] by [Guillermo Rauch](https://mobile.twitter.com/rauchg/)
|
||||
- [Simplify React][simplify-react] by [Kent C. Dodds](https://mobile.twitter.com/kentcdodds)
|
||||
- [I Got 99 Problems but GraphQL Ain't One][99-problems] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
|
||||
- [Stop de #divFest][stop-div-fest] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
|
||||
|
||||
---
|
||||
|
||||
@ -335,16 +332,18 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
|
||||
|
||||
[MIT License](LICENSE.md)
|
||||
|
||||
[MDX]: https://github.com/mdx-js/mdx
|
||||
[mdx]: https://github.com/mdx-js/mdx
|
||||
[ok-mdx]: https://github.com/jxnblk/ok-mdx
|
||||
[Compositor x0]: https://github.com/c8r/x0
|
||||
[compositor x0]: https://github.com/c8r/x0
|
||||
[styled-system]: https://github.com/jxnblk/styled-system
|
||||
[styled-components]: https://github.com/styled-components/styled-components
|
||||
[Spectacle]: https://github.com/FormidableLabs/spectacle
|
||||
[spectacle]: https://github.com/FormidableLabs/spectacle
|
||||
[mdx-go]: https://github.com/jxnblk/mdx-go
|
||||
|
||||
<!-- examples -->
|
||||
|
||||
[design-systems-react]: https://github-ds.now.sh/#0
|
||||
[brazil-now]: https://braziljs.now.sh
|
||||
[simplify-react]: https://simply-react.netlify.com/#0
|
||||
[99-problems]: https://99-problems-graphql-aint-one.now.sh/#0
|
||||
[stop-div-fest]: https://stop-div-fest.now.sh/
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export { future as theme } from '../themes'
|
||||
import { Head, Image, Notes, Appear } from '../dist'
|
||||
import { Invert, Split, SplitRight, FullScreenCode } from '../layouts'
|
||||
import { Invert, Split, FullScreenCode } from '../layouts'
|
||||
import { CodeSurfer } from 'mdx-deck-code-surfer'
|
||||
import Counter from './Counter'
|
||||
import code from './code'
|
||||
|
||||
@ -5,11 +5,12 @@ import Box from '../Box'
|
||||
|
||||
const Root = styled.div([], {
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
height: '100vh'
|
||||
})
|
||||
|
||||
const Split = ({ children }) => {
|
||||
const [ a, ...rest ] = React.Children.toArray(children.props.children)
|
||||
const kids = React.Children.toArray(children.props.children)
|
||||
const numberOfChildren = kids.length
|
||||
|
||||
return (
|
||||
<Root>
|
||||
@ -18,12 +19,11 @@ const Split = ({ children }) => {
|
||||
alignItems: 'center',
|
||||
height: '100%'
|
||||
}}>
|
||||
<Box width={1/2}>
|
||||
{a}
|
||||
</Box>
|
||||
<Box width={1/2}>
|
||||
{rest}
|
||||
</Box>
|
||||
{kids.map(k => (
|
||||
<Box key={k.key} width={1 / numberOfChildren}>
|
||||
{k}
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
</Root>
|
||||
)
|
||||
|
||||
@ -5,11 +5,12 @@ import Box from '../Box'
|
||||
|
||||
const Root = styled.div([], {
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
height: '100vh'
|
||||
})
|
||||
|
||||
const SplitRight = ({ children }) => {
|
||||
const [ a, ...rest ] = React.Children.toArray(children.props.children)
|
||||
const kids = React.Children.toArray(children.props.children).reverse()
|
||||
const numberOfChildren = kids.length
|
||||
|
||||
return (
|
||||
<Root>
|
||||
@ -18,12 +19,11 @@ const SplitRight = ({ children }) => {
|
||||
alignItems: 'center',
|
||||
height: '100%'
|
||||
}}>
|
||||
<Box width={1/2}>
|
||||
{rest}
|
||||
</Box>
|
||||
<Box width={1/2}>
|
||||
{a}
|
||||
</Box>
|
||||
{kids.map(k => (
|
||||
<Box key={k.key} width={1 / numberOfChildren}>
|
||||
{k}
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
</Root>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user