mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-20 11:27:14 +03:00
Merge pull request #200 from jacobmischka/master
Add flag to disable puppeteer sandbox
This commit is contained in:
commit
0047cd7390
107
cli.js
107
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
|
||||
|
||||
`, {
|
||||
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',
|
||||
}
|
||||
}
|
||||
})
|
||||
${chalk.gray('PDF options')}
|
||||
|
||||
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({
|
||||
dirname: path.dirname(path.resolve(doc)),
|
||||
globals: {
|
||||
FILENAME: JSON.stringify(path.resolve(doc))
|
||||
const opts = Object.assign(
|
||||
{
|
||||
dirname: path.dirname(path.resolve(doc)),
|
||||
globals: {
|
||||
FILENAME: JSON.stringify(path.resolve(doc)),
|
||||
},
|
||||
host: 'localhost',
|
||||
port: 8080,
|
||||
outDir: 'dist',
|
||||
},
|
||||
host: 'localhost',
|
||||
port: 8080,
|
||||
outDir: 'dist',
|
||||
}, config, cli.flags)
|
||||
config,
|
||||
cli.flags
|
||||
)
|
||||
|
||||
opts.outDir = path.resolve(opts.outDir)
|
||||
if (opts.webpack) {
|
||||
|
13
lib/pdf.js
13
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()
|
||||
|
@ -4,47 +4,50 @@ import { withDeck } from './context'
|
||||
import { setSteps } from './updaters'
|
||||
import { modes } from './constants'
|
||||
|
||||
export default withDeck(class Appear extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
deck: PropTypes.object.isRequired
|
||||
}
|
||||
export default withDeck(
|
||||
class Appear extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
deck: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
const { update, index } = props.deck
|
||||
const steps = React.Children.toArray(props.children).length
|
||||
update(setSteps(index, steps))
|
||||
}
|
||||
constructor(props) {
|
||||
super(props)
|
||||
const { update, index } = props.deck
|
||||
const steps = React.Children.toArray(props.children).length
|
||||
update(setSteps(index, steps))
|
||||
}
|
||||
|
||||
render() {
|
||||
const children = React.Children.toArray(this.props.children)
|
||||
.map(child => typeof child === 'string'
|
||||
? <div>{child}</div>
|
||||
: child
|
||||
render() {
|
||||
const children = React.Children.toArray(this.props.children).map(
|
||||
child => (typeof child === 'string' ? <div>{child}</div> : child)
|
||||
)
|
||||
const { step, mode } = this.props.deck
|
||||
const { step, mode } = this.props.deck
|
||||
|
||||
if (mode === modes.grid) {
|
||||
return children
|
||||
if (mode === modes.grid) {
|
||||
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>
|
||||
)
|
||||
}
|
||||
})
|
||||
)
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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)}
|
||||
|
@ -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,
|
||||
}))
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,7 @@ const FullCode = styled.div([], {
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
overflow: 'auto',
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export default FullCode
|
||||
|
Loading…
Reference in New Issue
Block a user