jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-09-11 06:35:24 +03:00
Code Issues Projects Releases Wiki Activity

Edit docs

Browse Source
This commit is contained in:
Brent Jackson 2020-02-02 12:38:54 -05:00
parent d86cf0914d
commit e430a57b2d
3 changed files with 70 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.travis.yml
View File

@ -1,3 +0,0 @@
language: node_js
node_js:
- 10

106
docs/components.md
View File

@ -1,6 +1,7 @@
# Components
MDX Deck includes components to help with creating presentations.
These components are provided with MDX's *shortcodes* functionality, so they do not need to be imported.
## Head
@ -8,7 +9,6 @@ Use the `Head` component to set content in the document head.
```mdx
// example for twitter cards
import { Head } from 'mdx-deck'
<Head>
<title>My Presentation</title>
@ -20,6 +20,72 @@ import { Head } from 'mdx-deck'
</Head>
```
## Notes
Speaker notes that only show in presenter mode can be added to any slide with the `Notes` component.
```mdx
# Slide Content
<Notes>
- Only visible in presenter mode
- Markdown syntax can be used with empty lines around the content
</Notes>
```
## Header
Use the `Header` component to render a persistent header (at the top of the screen) across the entire presentation.
```mdx
<Header>
Put a logo, handle, or something else here...
</Header>
# My Presentation
```
## Footer
The `Footer` component renders a persistent footer (at the bottom of the screen) across the entire presentation.
```mdx
<Footer>
Put a logo, handle, or something else here...
</Footer>
# My Presentation
```
## Steps
Use the `Steps` (formerly `Appear`) component to make child elements appear one at a time within a single slide.
Use the left and right arrow keys to step through each element.
```mdx
<Steps>
- One
- Two
- Three
- Four
</Steps>
```
Internally, the `Steps` component uses the `useSteps` hook, which can be used to build custom components with similar behavior.
<!--
## Image
Use the `Image` component to render a fullscreen image with the CSS `background-image` property.
@ -45,43 +111,6 @@ import { Image } from 'mdx-deck'
- `src` (string) image URL
- `size` (string) CSS background-size
## Appear
Use the `Appear` component to make child elements appear one at a time within a single slide.
Use the left and right arrow keys to step through each element.
```mdx
import { Appear } from 'mdx-deck'
<ul>
<li>One</li>
<Appear>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</Appear>
</ul>
```
Internally, the `Appear` component uses the `useSteps` hook, which can be used to build custom components with similar behavior.
## Notes
Speaker notes that only show in presenter mode can be added to any slide with the `Notes` component.
```mdx
import { Notes } from 'mdx-deck'
# Slide Content
<Notes>
- Only visible in presenter mode
- Markdown syntax can be used with empty lines around the content
</Notes>
```
## Embed
**Experimental**
@ -101,3 +130,4 @@ export default props => (
</>
)
```
-->

3
packages/mdx-deck/README.md
View File

@ -173,7 +173,8 @@ which will show a preview of the next slide, a timer, and speaker notes.
![presenter mode screenshot](docs/images/presenter-mode.png)
The presentation can be opened in two separate windows at the same time and will stay in sync with each other.
The presentation can be opened in two separate windows at the same time,
and it will stay in sync with the other window.
## Keyboard Shortcuts