Add PNG support

packages/export/README.md

@@ -4,8 +4,16 @@
 npm i -D @mdx-deck/export
 ```
 
+Export as PDF
+
 ```sh
-mdx-deck-export deck.mdx
+mdx-deck-export pdf deck.mdx
+```
+
+Export as PNG
+
+```sh
+mdx-deck-export png deck.mdx
 ```
 
 ## Options

packages/export/cli.js

@@ -7,7 +7,8 @@ const cli = meow(
 
   Usage:
 
-    $ mdx-deck-export deck.mdx
+    $ mdx-deck-export pdf deck.mdx
+    $ mdx-deck-export png deck.mdx
 
   Options:
 
@@ -54,9 +55,9 @@ const cli = meow(
   }
 )
 
-const [input] = cli.input
+const [cmd, input] = cli.input
 
-if (!input) {
+if (!input || !cmd) {
   cli.showHelp(0)
 }
 
@@ -67,11 +68,12 @@ const opts = Object.assign({}, cli.flags, {
     FILENAME: JSON.stringify(path.resolve(input)),
   },
   host: 'localhost',
+  type: cmd,
 })
 
 require('./index')(opts)
   .then(filename => {
-    console.log('saved PDF to', filename)
+    console.log(`saved ${cmd} to`, filename)
     process.exit(0)
   })
   .catch(err => {

packages/export/index.js

@@ -4,9 +4,8 @@ const mkdirp = require('mkdirp')
 const dev = require('mdx-deck/lib/dev')
 
 module.exports = async opts => {
-  const { outDir, outFile, port, width, height, sandbox } = opts
+  const { type, outDir, outFile, port, width, height, sandbox } = opts
 
-  console.log(width, height)
   const args = []
   if (!sandbox) {
     args.push('--no-sandbox', '--disable-setuid-sandbox')
@@ -16,20 +15,42 @@ module.exports = async opts => {
 
   const browser = await puppeteer.launch({ args })
   const page = await browser.newPage()
-  const filename = path.join(outDir, outFile)
+  const filename = path.join(
+    outDir,
+    path.basename(outFile, path.extname(outFile)) + '.' + type
+  )
   mkdirp.sync(outDir)
 
-  await page.goto(`http://localhost:${port}/print`, {
-    waitUntil: 'networkidle2',
-  })
-
-  await page.pdf({
-    width,
-    height,
-    path: filename,
-    scale: 1,
-    printBackground: true,
-  })
+  switch (type) {
+    case 'pdf':
+      await page.goto(`http://localhost:${port}/print`, {
+        waitUntil: 'networkidle2',
+      })
+      await page.pdf({
+        width,
+        height,
+        path: filename,
+        scale: 1,
+        printBackground: true,
+      })
+      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,
+        },
+      })
+      break
+  }
 
   await browser.close()
   await server.close()

packages/export/package.json

@@ -8,7 +8,8 @@
     "mdx-deck-export": "./cli.js"
   },
   "scripts": {
-    "start": "./cli.js ../../docs/demo.mdx"
+    "pdf": "./cli.js pdf ../../docs/demo.mdx",
+    "png": "./cli.js png ../../docs/demo.mdx"
   },
   "dependencies": {
     "mdx-deck": "^2.0.0-0",