Merge pull request #200 from jacobmischka/master

Add flag to disable puppeteer sandbox

cli.js

@@ -6,14 +6,15 @@ const open = require('react-dev-utils/openBrowser')
 const chalk = require('chalk')
 const remark = {
   emoji: require('remark-emoji'),
-  unwrapImages: require('remark-unwrap-images')
+  unwrapImages: require('remark-unwrap-images'),
 }
 const pkg = require('./package.json')
 
 const config = require('pkg-conf').sync('mdx-deck')
 const log = require('./lib/log')
 
-const cli = meow(`
+const cli = meow(
+  `
   ${chalk.gray('Usage')}
 
     $ ${chalk.magenta('mdx-deck deck.mdx')}
@@ -46,56 +47,70 @@ const cli = meow(`
       --width       Width in pixels
       --height      Height in pixels
 
-`, {
+    ${chalk.gray('PDF options')}
-  description: chalk.magenta('[mdx-deck] ') + chalk.gray(pkg.description),
-  flags: {
-    port: {
-      type: 'string',
-      alias: 'p'
-    },
-    hotPort: {
-      type: 'string',
-    },
-    host: {
-      type: 'string',
-      alias: 'h'
-    },
-    open: {
-      type: 'boolean',
-      alias: 'o',
-      default: true
-    },
-    outDir: {
-      type: 'string',
-      alias: 'd'
-    },
-    outFile: {
-      type: 'string',
-    },
-    html: {
-      type: 'boolean',
-      default: true
-    },
-    webpack: {
-      type: 'string',
-    }
-  }
-})
 
-const [ cmd, file ] = cli.input
+      --no-sandbox  Disable Puppeteer sandbox
+
+`,
+  {
+    description: chalk.magenta('[mdx-deck] ') + chalk.gray(pkg.description),
+    flags: {
+      port: {
+        type: 'string',
+        alias: 'p',
+      },
+      host: {
+        type: 'string',
+        alias: 'h',
+      },
+      hotPort: {
+        type: 'string',
+      },
+      open: {
+        type: 'boolean',
+        alias: 'o',
+        default: true,
+      },
+      outDir: {
+        type: 'string',
+        alias: 'd',
+      },
+      outFile: {
+        type: 'string',
+      },
+      html: {
+        type: 'boolean',
+        default: true,
+      },
+      webpack: {
+        type: 'string',
+      },
+      sandbox: {
+        type: 'boolean',
+        default: true,
+      },
+    },
+  }
+)
+
+const [cmd, file] = cli.input
 const doc = file || cmd
 
 if (!doc) cli.showHelp(0)
 
-const opts = Object.assign({
+const opts = Object.assign(
-  dirname: path.dirname(path.resolve(doc)),
+  {
-  globals: {
+    dirname: path.dirname(path.resolve(doc)),
-    FILENAME: JSON.stringify(path.resolve(doc))
+    globals: {
+      FILENAME: JSON.stringify(path.resolve(doc)),
+    },
+    host: 'localhost',
+    port: 8080,
+    outDir: 'dist',
   },
-  host: 'localhost',
+  config,
-  port: 8080,
+  cli.flags
-  outDir: 'dist',
+)
-}, config, cli.flags)
 
 opts.outDir = path.resolve(opts.outDir)
 if (opts.webpack) {

lib/pdf.js

@@ -4,11 +4,7 @@ const mkdirp = require('mkdirp')
 const puppeteer = require('puppeteer')
 
 module.exports = async (opts = {}) => {
-  const browser = await puppeteer.launch()
-  const page = await browser.newPage()
-
   // This can be used to control some UI components's visibility like: Appear,...
-  page.setUserAgent('MDX-Deck/1.7.7 Print/PDF')
 
   const {
     outDir,
@@ -16,12 +12,17 @@ module.exports = async (opts = {}) => {
     port,
     width = 1280,
     height = 960,
+    sandbox = true,
   } = opts
+  const args = sandbox ? [] : ['--no-sandbox', '--disable-setuid-sandbox']
+  const browser = await puppeteer.launch({ args })
+  const page = await browser.newPage()
+  page.setUserAgent('MDX-Deck/1.7.7 Print/PDF')
   const filename = path.join(outDir, outFile)
   if (!fs.existsSync(outDir)) mkdirp.sync(outDir)
 
   await page.goto('http://localhost:' + port, {
-    waitUntil: 'networkidle2'
+    waitUntil: 'networkidle2',
   })
 
   await page.pdf({
@@ -29,7 +30,7 @@ module.exports = async (opts = {}) => {
     height,
     path: filename,
     scale: 1,
-    printBackground: true
+    printBackground: true,
   })
 
   await browser.close()

src/Appear.js

@@ -4,47 +4,50 @@ import { withDeck } from './context'
 import { setSteps } from './updaters'
 import { modes } from './constants'
 
-export default withDeck(class Appear extends React.Component {
+export default withDeck(
-  static propTypes = {
+  class Appear extends React.Component {
-    children: PropTypes.node.isRequired,
+    static propTypes = {
-    deck: PropTypes.object.isRequired
+      children: PropTypes.node.isRequired,
-  }
+      deck: PropTypes.object.isRequired,
+    }
 
-  constructor (props) {
+    constructor(props) {
-    super(props)
+      super(props)
-    const { update, index } = props.deck
+      const { update, index } = props.deck
-    const steps = React.Children.toArray(props.children).length
+      const steps = React.Children.toArray(props.children).length
-    update(setSteps(index, steps))
+      update(setSteps(index, steps))
-  }
+    }
 
-  render() {
+    render() {
-    const children = React.Children.toArray(this.props.children)
+      const children = React.Children.toArray(this.props.children).map(
-      .map(child => typeof child === 'string'
+        child => (typeof child === 'string' ? <div>{child}</div> : child)
-        ? <div>{child}</div>
-        : child
       )
-    const { step, mode } = this.props.deck
+      const { step, mode } = this.props.deck
 
-    if (mode === modes.grid) {
+      if (mode === modes.grid) {
-      return children
+        return children
+      }
+
+      if (
+        typeof window !== 'undefined' &&
+        window.navigator.userAgent.includes('Print/PDF')
+      ) {
+        return children
+      }
+
+      return (
+        <React.Fragment>
+          {children.map((child, i) =>
+            React.cloneElement(child, {
+              key: i,
+              style: {
+                ...((child.props || {}).style || {}),
+                visibility: step >= i + 1 ? 'visible' : 'hidden',
+              },
+            })
+          )}
+        </React.Fragment>
+      )
     }
-
-    if (typeof window !== 'undefined' && window.navigator.userAgent.includes('Print/PDF')) {
-      return children;
-    }
-
-    return (
-      <React.Fragment>
-        {children.map((child, i) => (
-          React.cloneElement(child, {
-            key: i,
-            style: {
-              ...((child.props || {}).style || {}),
-              visibility: (step >= i + 1) ? 'visible' : 'hidden'
-            }
-          })
-        ))}
-      </React.Fragment>
-    )
   }
-})
+)

src/Button.js

@@ -10,7 +10,7 @@ const Button = styled.button(
     fontSize: '12px',
     fontWeight: 'bold',
     borderRadius: '4px',
-    border: 'none'
+    border: 'none',
   },
   space,
   color
@@ -18,7 +18,7 @@ const Button = styled.button(
 
 Button.propTypes = {
   ...space.propTypes,
-  ...color.propTypes
+  ...color.propTypes,
 }
 
 Button.defaultProps = {
@@ -26,7 +26,7 @@ Button.defaultProps = {
   px: 2,
   py: 1,
   color: 'white',
-  bg: '#333'
+  bg: '#333',
 }
 
 export default Button

src/Presenter.js

@@ -31,14 +31,14 @@ export const Presenter = ({
       bg="black"
       css={{
         flexDirection: 'column',
-        height: '100vh'
+        height: '100vh',
       }}>
       <Flex my="auto">
         <Box
           mx="auto"
           width={5 / 8}
           css={{
-            border: '1px solid rgba(128, 128, 128, 0.25)'
+            border: '1px solid rgba(128, 128, 128, 0.25)',
           }}>
           <Zoom zoom={5 / 8}>
             <Root {...props}>{props.children}</Root>
@@ -49,12 +49,12 @@ export const Presenter = ({
           mx="auto"
           css={{
             flex: 'none',
-            flexDirection: 'column'
+            flexDirection: 'column',
           }}>
           <Box
             mx="auto"
             css={{
-              border: '1px solid rgba(128, 128, 128, 0.25)'
+              border: '1px solid rgba(128, 128, 128, 0.25)',
             }}>
             <Zoom zoom={1 / 4}>
               <Root {...props}>
@@ -69,7 +69,7 @@ export const Presenter = ({
           <Box
             py={3}
             css={{
-              flex: 'auto'
+              flex: 'auto',
             }}>
             {notes}
           </Box>
@@ -100,7 +100,7 @@ Presenter.propTypes = {
   step: PropTypes.number.isRequired,
   slides: PropTypes.array,
   mode: PropTypes.string,
-  metadata: PropTypes.object
+  metadata: PropTypes.object,
 }
 
 export default Presenter

src/SlideDeck.js

@@ -236,7 +236,8 @@ export class SlideDeck extends React.Component {
             }}>
             <Provider {...this.state} update={this.update}>
               {mode === modes.grid ? (
-                <Grid {...context} />
+                <Grid {...context} slides={slides} update={this.update} />
+
               ) : (
                 <Swipeable
                   onSwipedLeft={() => this.update(next)}

src/Timer.js

@@ -8,7 +8,7 @@ class Timer extends React.Component {
   state = {
     on: false,
     time: new Date().toLocaleTimeString(),
-    seconds: 0
+    seconds: 0,
   }
 
   toggle = () => {
@@ -23,7 +23,7 @@ class Timer extends React.Component {
     const now = new Date()
     this.setState(state => ({
       time: now.toLocaleTimeString(),
-      seconds: state.on ? state.seconds + 1 : state.seconds
+      seconds: state.on ? state.seconds + 1 : state.seconds,
     }))
   }
 

src/layouts/FullScreenCode.js

@@ -11,7 +11,7 @@ const FullCode = styled.div([], {
     width: '100vw',
     height: '100vh',
     overflow: 'auto',
-  }
+  },
 })
 
 export default FullCode