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

Edit docs

Browse Source
This commit is contained in:
Brent Jackson 2018-08-14 20:59:58 -04:00
parent 451ad97927
commit 486eafd9b1
5 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -262,16 +262,8 @@ Add a `build` script to your `package.json` to export a presentation as HTML wit
}
```
### PDF Export
See more exporting options in the [Exporting Documentation](docs/exporting.md)
Presentations can be exported as PDF using the CLI.
This works well as a backup option for any unforeseen technical difficulties.
```json
"script": {
"pdf": "mdx-deck pdf deck.mdx"
}
```
## CLI Options
@ -288,6 +280,7 @@ This works well as a backup option for any unforeseen technical difficulties.
- [Built-in Themes](docs/themes.md)
- [Layouts](docs/layouts.md)
- [Components](docs/components.md)
- [Exporting](docs/exporting.md)
- [Advanced Usage](docs/advanced.md)
- [React API](docs/react.md)

4
cli.js
View File

@ -19,10 +19,10 @@ const cli = meow(`
$ ${chalk.magenta('mdx-deck build deck.mdx')}
$ ${chalk.magenta('mdx-deck screenshot deck.mdx')}
$ ${chalk.magenta('mdx-deck pdf deck.mdx')}
$ ${chalk.magenta('mdx-deck screenshot deck.mdx')}
${chalk.gray('Options')}
--title Title for the HTML document

8
docs/components.md
View File

@ -5,13 +5,19 @@ mdx-deck includes a few built-in components to help with creating presentations.
## Head
TK
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>
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='@jxnblk' />
<meta name='twitter:title' content='My Presentation' />
<meta name='twitter:description' content='A really great presentation' />
<meta name='twitter:image' content='https://example.com/card.png' />
</Head>
```

49
docs/exporting.md Normal file
View File

@ -0,0 +1,49 @@
# Exporting
## Static Bundle
To export your deck as a static HTML page with JS bundle,
add a `build` script to your `package.json` file.
```json
"scripts": {
"build": "mdx-deck build deck.mdx"
}
```
## PDF Export
Presentations can be exported as PDF using the CLI.
This works well as a backup option for any unforeseen technical difficulties.
```json
"script": {
"pdf": "mdx-deck pdf deck.mdx"
}
```
## Screenshots
A PNG image of the first slide can be exported with the `screenshot` command.
This is useful for creating open graph images for Twitter, Facebook, or Slack.
```json
"script": {
"screenshot": "mdx-deck screenshot deck.mdx"
}
```
### OG Image
To use the image as an open graph image, use the [Head](components.md#Head) component to add a meta tag.
Note that the meta tag should point to a full URL, including schema and domain name.
```mdx
import { Head } from 'mdx-deck'
<Head>
<meta name='og:image' content='https://example.com/card.png' />
</Head>
```

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "mdx-deck",
"version": "1.5.15",
"description": "MDX-based slide deck presentations",
"description": "MDX-based presentation decks",
"main": "dist/index.js",
"bin": {
"mdx-deck": "./cli.js"