mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-11 06:35:24 +03:00
Adjust export package
This commit is contained in:
parent
85876c54e2
commit
9b8b732cc6
@ -1,6 +1,6 @@
|
||||
# Exporting
|
||||
|
||||
## Static Bundle
|
||||
## Static Build
|
||||
|
||||
To export your deck as a static HTML page with JS bundle,
|
||||
add a `build` script to your `package.json` file.
|
||||
@ -11,29 +11,28 @@ add a `build` script to your `package.json` file.
|
||||
}
|
||||
```
|
||||
|
||||
### PDF & Screenshots
|
||||
## PDF
|
||||
|
||||
To export a deck as PDF or create a PNG screenshot, install the export CLI package:
|
||||
To export a deck as PDF, use the [`website-pdf`](https://www.npmjs.com/package/website-pdf) CLI.
|
||||
Start the MDX Deck dev server,
|
||||
then run the following command to create a PDF:
|
||||
|
||||
```sh
|
||||
npm i @mdx-deck/export
|
||||
npx website-pdf http://localhost:8000/print -o deck.pdf
|
||||
```
|
||||
|
||||
Then run the following command to create a PDF:
|
||||
## PNG
|
||||
|
||||
To export a PNG image, use the [`capture-website-cli`](https://github.com/sindresorhus/capture-website-cli) CLI.
|
||||
Start the dev server, then run the following:
|
||||
|
||||
```sh
|
||||
mdx-deck-export pdf deck.mdx
|
||||
npx capture-website-cli http://localhost:8000 deck.png
|
||||
```
|
||||
|
||||
Or export the first slide as a PNG:
|
||||
## Open Graph Image
|
||||
|
||||
```sh
|
||||
mdx-deck-export png 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.
|
||||
To add 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
|
||||
|
@ -9,7 +9,7 @@
|
||||
"scripts": {
|
||||
"start": "yarn workspace @mdx-deck/docs start",
|
||||
"build": "yarn workspace @mdx-deck/docs build",
|
||||
"export": "yarn workspace @mdx-deck/export pdf",
|
||||
"export": "./packages/export/cli.js http://localhost:8000/print -o docs/public/deck.pdf",
|
||||
"test": "jest"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -1,27 +1,19 @@
|
||||
# MDX Deck Export CLI
|
||||
# website-pdf
|
||||
|
||||
Save a URL as a PDF
|
||||
|
||||
```sh
|
||||
npm i -D @mdx-deck/export
|
||||
npm i -D website-pdf
|
||||
```
|
||||
|
||||
Export as PDF
|
||||
|
||||
```sh
|
||||
mdx-deck-export pdf deck.mdx
|
||||
```
|
||||
|
||||
Export as PNG
|
||||
|
||||
```sh
|
||||
mdx-deck-export png deck.mdx
|
||||
website-pdf http://example.com -o example.pdf
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
```
|
||||
-d --out-dir Output directory
|
||||
-f --out-file Output filename
|
||||
-p --port Server port
|
||||
-o --out-file Output filename
|
||||
-w --width Width in pixels
|
||||
-h --height Height in pixels
|
||||
--no-sandbox Disable puppeteer sandbox
|
||||
|
@ -4,17 +4,13 @@ const meow = require('meow')
|
||||
|
||||
const cli = meow(
|
||||
`
|
||||
|
||||
Usage:
|
||||
|
||||
$ mdx-deck-export pdf deck.mdx
|
||||
$ mdx-deck-export png deck.mdx
|
||||
$ website-pdf http://example.com
|
||||
|
||||
Options:
|
||||
|
||||
-d --out-dir Output directory
|
||||
-f --out-file Output filename
|
||||
-p --port Server port
|
||||
-o --out-file Output filename
|
||||
-w --width Width in pixels
|
||||
-h --height Height in pixels
|
||||
--no-sandbox Disable puppeteer sandbox
|
||||
@ -22,20 +18,10 @@ const cli = meow(
|
||||
`,
|
||||
{
|
||||
flags: {
|
||||
outDir: {
|
||||
type: 'string',
|
||||
alias: 'd',
|
||||
default: 'dist',
|
||||
},
|
||||
outFile: {
|
||||
type: 'string',
|
||||
alias: 'f',
|
||||
default: 'presentation.pdf',
|
||||
},
|
||||
port: {
|
||||
type: 'string',
|
||||
alias: 'p',
|
||||
default: '8000',
|
||||
alias: 'o',
|
||||
default: 'website.pdf',
|
||||
},
|
||||
width: {
|
||||
type: 'string',
|
||||
@ -55,25 +41,19 @@ const cli = meow(
|
||||
}
|
||||
)
|
||||
|
||||
const [cmd, input] = cli.input
|
||||
const [url] = cli.input
|
||||
|
||||
if (!input || !cmd) {
|
||||
if (!url) {
|
||||
cli.showHelp(0)
|
||||
}
|
||||
|
||||
const opts = Object.assign({}, cli.flags, {
|
||||
input,
|
||||
dirname: path.dirname(path.resolve(input)),
|
||||
globals: {
|
||||
FILENAME: JSON.stringify(path.resolve(input)),
|
||||
},
|
||||
host: 'localhost',
|
||||
type: cmd,
|
||||
url,
|
||||
})
|
||||
|
||||
require('./index')(opts)
|
||||
.then(filename => {
|
||||
console.log(`saved ${cmd} to`, filename)
|
||||
console.log(`saved PDF to`, filename)
|
||||
process.exit(0)
|
||||
})
|
||||
.catch(err => {
|
||||
|
@ -1,75 +1,36 @@
|
||||
const path = require('path')
|
||||
const puppeteer = require('puppeteer')
|
||||
const execa = require('execa')
|
||||
const mkdirp = require('mkdirp')
|
||||
|
||||
module.exports = async opts => {
|
||||
const { input, type, outDir, outFile, port, width, height, sandbox } = opts
|
||||
module.exports = async ({ url, outFile, width, height, sandbox }) => {
|
||||
if (!url) {
|
||||
throw new Error('URL is required for website-pdf')
|
||||
}
|
||||
|
||||
const args = []
|
||||
if (!sandbox) {
|
||||
args.push('--no-sandbox', '--disable-setuid-sandbox')
|
||||
}
|
||||
|
||||
const server = execa('mdx-deck', [input, '--no-open', '--port', port], {
|
||||
stdio: 'inherit',
|
||||
preferLocal: true,
|
||||
})
|
||||
|
||||
server.on('message', msg => {
|
||||
console.log('server', msg)
|
||||
})
|
||||
|
||||
const browser = await puppeteer.launch({ args })
|
||||
const page = await browser.newPage()
|
||||
const filename = path.join(
|
||||
outDir,
|
||||
path.basename(outFile, path.extname(outFile)) + '.' + type
|
||||
)
|
||||
const filename = path.resolve(outFile)
|
||||
const outDir = path.dirname(filename)
|
||||
mkdirp.sync(outDir)
|
||||
|
||||
/*
|
||||
switch (type) {
|
||||
case 'pdf':
|
||||
const url = `http://localhost:${port}/print`
|
||||
await page.goto(url, {
|
||||
waitUntil: 'networkidle2',
|
||||
})
|
||||
await page.pdf({
|
||||
width,
|
||||
height,
|
||||
path: filename,
|
||||
scale: 1,
|
||||
printBackground: true,
|
||||
})
|
||||
loading = false
|
||||
break
|
||||
case 'png':
|
||||
await page.setViewport({ width, height })
|
||||
await page.goto('http://localhost:' + port, {
|
||||
waitUntil: 'networkidle2',
|
||||
})
|
||||
await page.screenshot({
|
||||
path: filename,
|
||||
type: 'png',
|
||||
clip: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height,
|
||||
},
|
||||
})
|
||||
loading = false
|
||||
break
|
||||
}
|
||||
await page.goto(url, {
|
||||
waitUntil: 'networkidle2',
|
||||
})
|
||||
|
||||
await page.pdf({
|
||||
width,
|
||||
height,
|
||||
path: filename,
|
||||
scale: 1,
|
||||
printBackground: true,
|
||||
})
|
||||
|
||||
await browser.close()
|
||||
*/
|
||||
// await server.close()
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
///
|
||||
})
|
||||
|
||||
return filename
|
||||
}
|
||||
|
@ -1,19 +1,15 @@
|
||||
{
|
||||
"name": "@mdx-deck/export",
|
||||
"name": "website-pdf",
|
||||
"version": "2.5.0",
|
||||
"main": "index.js",
|
||||
"author": "Brent Jackson <jxnblk@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"mdx-deck-export": "./cli.js"
|
||||
"website-pdf": "./cli.js"
|
||||
},
|
||||
"scripts": {
|
||||
"pdf": "./cli.js pdf ../../docs/demo.mdx -d ../../docs/dist",
|
||||
"png": "./cli.js png ../../docs/demo.mdx -d ../../docs/dist"
|
||||
"test": "./cli.js http://localhost:8000/print -o ../../docs/dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"execa": "^2.0.3",
|
||||
"mdx-deck": "^2.5.0",
|
||||
"meow": "^5.0.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"puppeteer": "^1.13.0"
|
||||
|
@ -176,3 +176,11 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId }) => {
|
||||
createParentChildLink({ parent: fileNode, child: node })
|
||||
}
|
||||
}
|
||||
|
||||
exports.onCreateDevServer = ({ app }) => {
|
||||
console.log('onCreateDevServer')
|
||||
if (typeof process.send !== 'function') return
|
||||
process.send({
|
||||
mdxDeck: true,
|
||||
})
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user