Adjust export package

docs/exporting.md

@@ -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
+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.
 
 ```mdx

package.json

@@ -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": {

packages/export/README.md

@@ -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
+website-pdf http://example.com -o example.pdf
-```
-
-Export as PNG
-
-```sh
-mdx-deck-export png deck.mdx
 ```
 
 ## 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
 -h --height     Height in pixels
 --no-sandbox    Disable puppeteer sandbox

packages/export/cli.js

@@ -4,17 +4,13 @@ const meow = require('meow')
 
 const cli = meow(
   `
-
   Usage:
 
-    $ mdx-deck-export pdf deck.mdx
+    $ website-pdf http://example.com
-    $ mdx-deck-export png deck.mdx
 
   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
     -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',
+        alias: 'o',
-        default: 'presentation.pdf',
+        default: 'website.pdf',
-      },
-      port: {
-        type: 'string',
-        alias: 'p',
-        default: '8000',
       },
       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,
+  url,
-  dirname: path.dirname(path.resolve(input)),
-  globals: {
-    FILENAME: JSON.stringify(path.resolve(input)),
-  },
-  host: 'localhost',
-  type: cmd,
 })
 
 require('./index')(opts)
   .then(filename => {
-    console.log(`saved ${cmd} to`, filename)
+    console.log(`saved PDF to`, filename)
     process.exit(0)
   })
   .catch(err => {

packages/export/index.js

@@ -1,40 +1,27 @@
 const path = require('path')
 const puppeteer = require('puppeteer')
-const execa = require('execa')
 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 = []
   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(
+  const filename = path.resolve(outFile)
-    outDir,
+  const outDir = path.dirname(filename)
-    path.basename(outFile, path.extname(outFile)) + '.' + type
-  )
   mkdirp.sync(outDir)
 
-  /*
-  switch (type) {
-    case 'pdf':
-      const url = `http://localhost:${port}/print`
   await page.goto(url, {
     waitUntil: 'networkidle2',
   })
+
   await page.pdf({
     width,
     height,
@@ -42,34 +29,8 @@ module.exports = async opts => {
     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 server.close()
-
-  return new Promise((resolve, reject) => {
-    ///
-  })
 
   return filename
 }

packages/export/package.json

@@ -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",
+    "test": "./cli.js http://localhost:8000/print -o ../../docs/dist"
-    "png": "./cli.js png ../../docs/demo.mdx -d ../../docs/dist"
   },
   "dependencies": {
-    "execa": "^2.0.3",
-    "mdx-deck": "^2.5.0",
     "meow": "^5.0.0",
     "mkdirp": "^0.5.1",
     "puppeteer": "^1.13.0"

packages/gatsby-theme-next/gatsby-node.js

@@ -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,
+  })
+}