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
|
# Exporting
|
||||||
|
|
||||||
## Static Bundle
|
## Static Build
|
||||||
|
|
||||||
To export your deck as a static HTML page with JS bundle,
|
To export your deck as a static HTML page with JS bundle,
|
||||||
add a `build` script to your `package.json` file.
|
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
|
```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
|
```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
|
To add an open graph image, use the [Head](components.md#Head) component to add a meta tag.
|
||||||
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.
|
|
||||||
Note that the meta tag should point to a full URL, including schema and domain name.
|
Note that the meta tag should point to a full URL, including schema and domain name.
|
||||||
|
|
||||||
```mdx
|
```mdx
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "yarn workspace @mdx-deck/docs start",
|
"start": "yarn workspace @mdx-deck/docs start",
|
||||||
"build": "yarn workspace @mdx-deck/docs build",
|
"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"
|
"test": "jest"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -1,27 +1,19 @@
|
|||||||
# MDX Deck Export CLI
|
# website-pdf
|
||||||
|
|
||||||
|
Save a URL as a PDF
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm i -D @mdx-deck/export
|
npm i -D website-pdf
|
||||||
```
|
```
|
||||||
|
|
||||||
Export as PDF
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
mdx-deck-export pdf deck.mdx
|
website-pdf http://example.com -o example.pdf
|
||||||
```
|
|
||||||
|
|
||||||
Export as PNG
|
|
||||||
|
|
||||||
```sh
|
|
||||||
mdx-deck-export png deck.mdx
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
```
|
```
|
||||||
-d --out-dir Output directory
|
-o --out-file Output filename
|
||||||
-f --out-file Output filename
|
|
||||||
-p --port Server port
|
|
||||||
-w --width Width in pixels
|
-w --width Width in pixels
|
||||||
-h --height Height in pixels
|
-h --height Height in pixels
|
||||||
--no-sandbox Disable puppeteer sandbox
|
--no-sandbox Disable puppeteer sandbox
|
||||||
|
@ -4,17 +4,13 @@ const meow = require('meow')
|
|||||||
|
|
||||||
const cli = meow(
|
const cli = meow(
|
||||||
`
|
`
|
||||||
|
|
||||||
Usage:
|
Usage:
|
||||||
|
|
||||||
$ mdx-deck-export pdf deck.mdx
|
$ website-pdf http://example.com
|
||||||
$ mdx-deck-export png deck.mdx
|
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
|
|
||||||
-d --out-dir Output directory
|
-o --out-file Output filename
|
||||||
-f --out-file Output filename
|
|
||||||
-p --port Server port
|
|
||||||
-w --width Width in pixels
|
-w --width Width in pixels
|
||||||
-h --height Height in pixels
|
-h --height Height in pixels
|
||||||
--no-sandbox Disable puppeteer sandbox
|
--no-sandbox Disable puppeteer sandbox
|
||||||
@ -22,20 +18,10 @@ const cli = meow(
|
|||||||
`,
|
`,
|
||||||
{
|
{
|
||||||
flags: {
|
flags: {
|
||||||
outDir: {
|
|
||||||
type: 'string',
|
|
||||||
alias: 'd',
|
|
||||||
default: 'dist',
|
|
||||||
},
|
|
||||||
outFile: {
|
outFile: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
alias: 'f',
|
alias: 'o',
|
||||||
default: 'presentation.pdf',
|
default: 'website.pdf',
|
||||||
},
|
|
||||||
port: {
|
|
||||||
type: 'string',
|
|
||||||
alias: 'p',
|
|
||||||
default: '8000',
|
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: 'string',
|
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)
|
cli.showHelp(0)
|
||||||
}
|
}
|
||||||
|
|
||||||
const opts = Object.assign({}, cli.flags, {
|
const opts = Object.assign({}, cli.flags, {
|
||||||
input,
|
url,
|
||||||
dirname: path.dirname(path.resolve(input)),
|
|
||||||
globals: {
|
|
||||||
FILENAME: JSON.stringify(path.resolve(input)),
|
|
||||||
},
|
|
||||||
host: 'localhost',
|
|
||||||
type: cmd,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
require('./index')(opts)
|
require('./index')(opts)
|
||||||
.then(filename => {
|
.then(filename => {
|
||||||
console.log(`saved ${cmd} to`, filename)
|
console.log(`saved PDF to`, filename)
|
||||||
process.exit(0)
|
process.exit(0)
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
@ -1,75 +1,36 @@
|
|||||||
const path = require('path')
|
const path = require('path')
|
||||||
const puppeteer = require('puppeteer')
|
const puppeteer = require('puppeteer')
|
||||||
const execa = require('execa')
|
|
||||||
const mkdirp = require('mkdirp')
|
const mkdirp = require('mkdirp')
|
||||||
|
|
||||||
module.exports = async opts => {
|
module.exports = async ({ url, outFile, width, height, sandbox }) => {
|
||||||
const { input, type, outDir, outFile, port, width, height, sandbox } = opts
|
if (!url) {
|
||||||
|
throw new Error('URL is required for website-pdf')
|
||||||
|
}
|
||||||
|
|
||||||
const args = []
|
const args = []
|
||||||
if (!sandbox) {
|
if (!sandbox) {
|
||||||
args.push('--no-sandbox', '--disable-setuid-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 browser = await puppeteer.launch({ args })
|
||||||
const page = await browser.newPage()
|
const page = await browser.newPage()
|
||||||
const filename = path.join(
|
const filename = path.resolve(outFile)
|
||||||
outDir,
|
const outDir = path.dirname(filename)
|
||||||
path.basename(outFile, path.extname(outFile)) + '.' + type
|
|
||||||
)
|
|
||||||
mkdirp.sync(outDir)
|
mkdirp.sync(outDir)
|
||||||
|
|
||||||
/*
|
await page.goto(url, {
|
||||||
switch (type) {
|
waitUntil: 'networkidle2',
|
||||||
case 'pdf':
|
})
|
||||||
const url = `http://localhost:${port}/print`
|
|
||||||
await page.goto(url, {
|
await page.pdf({
|
||||||
waitUntil: 'networkidle2',
|
width,
|
||||||
})
|
height,
|
||||||
await page.pdf({
|
path: filename,
|
||||||
width,
|
scale: 1,
|
||||||
height,
|
printBackground: true,
|
||||||
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 browser.close()
|
await browser.close()
|
||||||
*/
|
|
||||||
// await server.close()
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
///
|
|
||||||
})
|
|
||||||
|
|
||||||
return filename
|
return filename
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,15 @@
|
|||||||
{
|
{
|
||||||
"name": "@mdx-deck/export",
|
"name": "website-pdf",
|
||||||
"version": "2.5.0",
|
"version": "2.5.0",
|
||||||
"main": "index.js",
|
|
||||||
"author": "Brent Jackson <jxnblk@gmail.com>",
|
"author": "Brent Jackson <jxnblk@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
"mdx-deck-export": "./cli.js"
|
"website-pdf": "./cli.js"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"pdf": "./cli.js pdf ../../docs/demo.mdx -d ../../docs/dist",
|
"test": "./cli.js http://localhost:8000/print -o ../../docs/dist"
|
||||||
"png": "./cli.js png ../../docs/demo.mdx -d ../../docs/dist"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"execa": "^2.0.3",
|
|
||||||
"mdx-deck": "^2.5.0",
|
|
||||||
"meow": "^5.0.0",
|
"meow": "^5.0.0",
|
||||||
"mkdirp": "^0.5.1",
|
"mkdirp": "^0.5.1",
|
||||||
"puppeteer": "^1.13.0"
|
"puppeteer": "^1.13.0"
|
||||||
|
@ -176,3 +176,11 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId }) => {
|
|||||||
createParentChildLink({ parent: fileNode, child: node })
|
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