Merge branch 'master' into hot-reload-port

2024-11-26 00:35:02 +03:00 · 2019-02-18 16:20:06 -05:00 · 2019-02-18 16:20:06 -05:00 · 40acfc8265
commit 40acfc8265
parent a199a699f1 a33ce1f987
14 changed files with 724 additions and 476 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,6 +3,49 @@

 ## Unreleased

+## v1.8.2 2018-12-04
+
+- Bugfix for window check
+
+## v1.8.1 2018-11-27
+
+- Show Appear children in PDF export
+
+## v1.8.0 2018-11-27
+
+- Adds button to open new window for presenting in presenter mode
+
+## v1.7.14 2018-11-18
+
+- Fix typo in SlideDeck
+
+## v1.7.13 2018-11-18
+
+- Add overflow auto to FullScreenCode
+
+## v1.7.12 2018-11-18
+
+- Keep styles intact for Appear children
+- Fix prop types for Appear component
+- Add missing CLI option to docs
+
+## v1.7.11 2018-11-18
+
+- Update remark-unwrap-images
+
+## v1.7.10 2018-11-12
+
+- Update dependencies
+
+## v1.7.9 2018-11-12
+
+- Update dependencies
+
+## v1.7.8 2018-11-12
+
+- Fix typo in Root prop types
+- Edit docs
+
 ## v1.7.7 2018-09-22

 - Remove overflow hidden styles from body
--- a/README.md
+++ b/README.md
@ -68,6 +68,7 @@ npm start
 - [mdx-deck: slide decks powered by markdown and react][kcd-medium] by [Kent C. Dodds][]
 - [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])
 - [What is MDX][kcd-video] by [Kent C. Dodds][]
+- [Build a Custom Provider Component for MDX-Deck](ks-egghead) by [Kyle Shevlin][]

 [egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react
 [Kent C. Dodds]: https://mobile.twitter.com/kentcdodds
@ -76,6 +77,8 @@ npm start
 [hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be
 [hw-demo]: https://github.com/hswolff/mdx-deck-demo
 [Harry Wolff]: https://mobile.twitter.com/hswolff
+[ks-egghead]: https://egghead.io/lessons/javascript-build-a-custom-provider-component-for-mdx-deck
+[Kyle Shevlin]: https://twitter.com/kyleshevlin

 ## Quick Start

@ -171,8 +174,12 @@ Read more in the [components docs](docs/components.md).
 These third-party libraries are great for use with mdx-deck.

 - [CodeSurfer][]: React component for scrolling, zooming and highlighting code.
+- [mdx-code][]: Runnable code playgrounds for MDX Deck.
+- [mdx-deck-live-code][]: Live React and JS coding in slides.

 [codesurfer]: https://github.com/pomber/code-surfer
+[mdx-code]: https://github.com/pranaygp/mdx-code
+[mdx-deck-live-code]: https://github.com/JReinhold/mdx-deck-live-code

 ### Layouts

@ -222,7 +229,7 @@ mdx-deck includes a built-in presenter mode, with a preview of the next slide an
 To use presenter mode:

 - Open two windows in the same browser, with the same URL on two different screens. (this should work in both development and exported presentations)
- In your window press the `Option + P` (`Alt + P`) key to enter presenter mode.
+- In your window, press the `Option/Alt + P` keys to enter presenter mode.
 - Display the other window on the screen for the audience to see.
 - Control the presentation from your window by using the left and right arrow keys; the other window should stay in sync

@ -292,6 +299,7 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
 ```
 -p --port     Dev server port
 --hot-port    Dev server hot reload port
+-h --host     Host the dev server listens to
 --no-open     Prevent from opening in default browser
 -d --out-dir  Output directory for exporting
 --no-html     Disable static HTML rendering
--- a/lib/pdf.js
+++ b/lib/pdf.js
@ -6,6 +6,10 @@ 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,
    outFile = 'presentation.pdf',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "mdx-deck",
-  "version": "1.7.7",
+  "version": "1.8.2",
  "description": "MDX-based presentation decks",
  "main": "dist/index.js",
  "bin": {
@ -10,7 +10,7 @@
    "prepare": "npm run babel",
    "babel": "babel src -d dist",
    "watch": "babel src -d dist --watch",
-    "start": "./cli.js docs/index.mdx -p 8989",
+    "start": "./cli.js docs/index.mdx -p 8080",
    "build": "./cli.js build docs/index.mdx -d site",
    "pdf": "./cli.js pdf docs/index.mdx -d site",
    "screenshot": "./cli.js screenshot docs/index.mdx -d docs",
@ -23,12 +23,12 @@
  "repository": "github:jxnblk/mdx-deck",
  "dependencies": {
    "@compositor/webfont": "^1.0.39",
-    "@mdx-js/mdx": "^0.15.3",
-    "@mdx-js/tag": "^0.15.0",
+    "@mdx-js/mdx": "^0.15.7",
+    "@mdx-js/tag": "^0.15.6",
    "ansi-html": "0.0.7",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
-    "babel-plugin-styled-components": "^1.7.1",
+    "babel-plugin-styled-components": "1.8.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
@ -39,9 +39,9 @@
    "gray-matter": "^4.0.1",
    "hhmmss": "^1.0.0",
    "html-entities": "^1.2.1",
-    "koa": "^2.5.3",
+    "koa": "^2.6.2",
    "koa-static": "^5.0.0",
-    "koa-webpack": "^5.1.0",
+    "koa-webpack": "^5.1.1",
    "loader-utils": "^1.1.0",
    "lodash.debounce": "^4.0.8",
    "lodash.get": "^4.4.2",
@ -52,21 +52,21 @@
    "pkg-conf": "^2.1.0",
    "progress-bar-webpack-plugin": "^1.11.0",
    "prop-types": "^15.6.2",
-    "puppeteer": "^1.8.0",
+    "puppeteer": "^1.10.0",
    "querystring": "^0.2.0",
-    "react": "^16.5.2",
-    "react-dev-utils": "^5.0.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.6.1",
+    "react-dev-utils": "^6.1.1",
+    "react-dom": "^16.6.1",
    "react-swipeable": "^4.3.0",
-    "react-syntax-highlighter": "^8.0.1",
-    "remark-emoji": "^2.0.1",
-    "remark-unwrap-images": "0.0.2-0",
+    "react-syntax-highlighter": "^8.1.0",
+    "remark-emoji": "^2.0.2",
+    "remark-unwrap-images": "^0.1.0",
    "rimraf": "^2.6.2",
-    "stringify-object": "^3.2.2",
-    "styled-components": "^3.4.9",
-    "styled-system": "^3.1.4",
+    "stringify-object": "^3.3.0",
+    "styled-components": "^3.4.10",
+    "styled-system": "^3.1.11",
    "superbox": "^2.1.0",
-    "webpack": "^4.19.1",
+    "webpack": "^4.25.1",
    "webpack-hot-client": "^4.1.1",
    "webpack-merge": "^4.1.4",
    "webpack-node-externals": "^1.7.2"
@ -74,13 +74,13 @@
  "peerDependencies": {},
  "devDependencies": {
    "babel-cli": "^6.26.0",
-    "husky": "^1.0.0-rc.15",
+    "husky": "^1.1.3",
    "jest": "^23.6.0",
    "jest-styled-components": "^5.0.1",
    "lint-staged": "^7.3.0",
    "mdx-deck-code-surfer": "^0.4.1",
-    "prettier": "^1.14.3",
-    "react-test-renderer": "^16.5.2"
+    "prettier": "^1.15.2",
+    "react-test-renderer": "^16.6.1"
  },
  "jest": {
    "roots": [
--- a/src/Appear.js
+++ b/src/Appear.js
@ -6,7 +6,7 @@ import { modes } from './constants'

 export default withDeck(class Appear extends React.Component {
  static propTypes = {
-    children: PropTypes.array.isRequired,
+    children: PropTypes.node.isRequired,
    deck: PropTypes.object.isRequired
  }

@ -29,12 +29,17 @@ export default withDeck(class Appear extends React.Component {
      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'
            }
          })
--- a/src/Button.js
+++ b/src/Button.js
@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import { space, color } from 'styled-system'
+
+const Button = styled.button(
+  [],
+  {
+    appearance: 'none',
+    fontFamily: 'inherit',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    borderRadius: '4px',
+    border: 'none'
+  },
+  space,
+  color
+)
+
+Button.propTypes = {
+  ...space.propTypes,
+  ...color.propTypes
+}
+
+Button.defaultProps = {
+  m: 0,
+  px: 2,
+  py: 1,
+  color: 'white',
+  bg: '#333'
+}
+
+export default Button
--- a/src/Presenter.js
+++ b/src/Presenter.js
@ -8,6 +8,9 @@ import Slide from './Slide'
 import Root from './Root'
 import Timer from './Timer'
 import Mono from './Mono'
+import Button from './Button'
+
+const Anchor = Button.withComponent('a')

 export const Presenter = ({
  index,
@ -24,38 +27,36 @@ export const Presenter = ({

  return (
    <Flex
-      color='white' bg='black'
+      color="white"
+      bg="black"
      css={{
        flexDirection: 'column',
        height: '100vh'
-      }}
-    >
-      <Flex my='auto'>
+      }}>
+      <Flex my="auto">
        <Box
-          mx='auto'
-          width={5/8}
+          mx="auto"
+          width={5 / 8}
          css={{
            border: '1px solid rgba(128, 128, 128, 0.25)'
          }}>
-          <Zoom zoom={5/8}>
-            <Root {...props}>
-              {props.children}
-            </Root>
+          <Zoom zoom={5 / 8}>
+            <Root {...props}>{props.children}</Root>
          </Zoom>
        </Box>
        <Flex
-          width={1/4}
-          mx='auto'
+          width={1 / 4}
+          mx="auto"
          css={{
            flex: 'none',
            flexDirection: 'column'
          }}>
          <Box
-            mx='auto'
+            mx="auto"
            css={{
              border: '1px solid rgba(128, 128, 128, 0.25)'
            }}>
-            <Zoom zoom={1/4}>
+            <Zoom zoom={1 / 4}>
              <Root {...props}>
                {Next && (
                  <Slide>
@ -74,9 +75,18 @@ export const Presenter = ({
          </Box>
        </Flex>
      </Flex>
-      <Flex mt='auto' px={3} py={3}>
-        <Mono>Slide {index + 1} of {length}</Mono>
-        <Box mx='auto' />
+      <Flex mt="auto" px={3} py={3}>
+        <Mono>
+          Slide {index + 1} of {length}
+        </Mono>
+        <Box mx="auto" />
+        <Anchor
+          target="_blank"
+          rel="noopener noreferrer"
+          href={`${window.location.origin}/${window.location.hash}`}>
+          Open in Normal mode
+        </Anchor>
+        <Box mx="auto" />
        <Timer />
      </Flex>
    </Flex>
--- a/src/Root.js
+++ b/src/Root.js
@ -1,19 +1,20 @@
 import styled from 'styled-components'
-import {
-  width,
-  height,
-  color
-} from 'styled-system'
+import { width, height, color } from 'styled-system'

-export const Root = styled.div([], {
-  '@media print': {
-    fontSize: '24px',
-    height: 'auto'
+export const Root = styled.div(
+  [],
+  {
+    '@media print': {
+      fontSize: '24px',
+      height: 'auto',
+    },
  },
-},
-  props => props.theme.font ? ({
-    fontFamily: props.theme.font
-  }) : null,
+  props =>
+    props.theme.font
+      ? {
+          fontFamily: props.theme.font,
+        }
+      : null,
  props => props.theme.css,
  width,
  height,
@ -23,12 +24,12 @@ export const Root = styled.div([], {
 Root.propTypes = {
  ...width.propTypes,
  ...height.propTypes,
-  ...color.propTypess
+  ...color.propTypes,
 }

 Root.defaultProps = {
  color: 'text',
-  bg: 'background'
+  bg: 'background',
 }

 export default Root
--- a/src/SlideDeck.js
+++ b/src/SlideDeck.js
@ -153,7 +153,7 @@ export class SlideDeck extends React.Component {
      const index = parseInt(e.newValue, 10)
      this.isStorageChange = true
      this.setState({ index })
-    } else if (e.key === MDX_SLIDE_STEP, 10) {
+    } else if (e.key === MDX_SLIDE_STEP) {
      const step = parseInt(e.newValue, 10)
      this.isStorageChange = true
      this.setState({ step })
--- a/src/Timer.js
+++ b/src/Timer.js
@ -1,33 +1,9 @@
 import React from 'react'
 import hhmmss from 'hhmmss'
-import styled from 'styled-components'
-import { space, color } from 'styled-system'
 import Flex from './Flex'
 import Box from './Box'
 import Mono from './Mono'
-
-const Button = styled.button([], {
-  appearance: 'none',
-  fontFamily: 'inherit',
-  fontSize: '12px',
-  fontWeight: 'bold',
-  borderRadius: '4px',
-  border: 'none'
-}, space, color)
-
-Button.propTypes = {
-  ...space.propTypes,
-  ...color.propTypes
-}
-
-Button.defaultProps = {
-  m: 0,
-  px: 2,
-  py: 1,
-  color: 'white',
-  bg: '#333'
-}
-
+import Button from './Button'
 class Timer extends React.Component {
  state = {
    on: false,
@ -47,43 +23,36 @@ 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
    }))
  }

-  componentDidMount () {
+  componentDidMount() {
    this.timer = setInterval(this.tick, 1000)
  }

-  componentWillUnmount () {
+  componentWillUnmount() {
    if (!this.timer) return
    clearInterval(this.timer)
  }

-  render () {
+  render() {
    const { time, seconds, on } = this.state
    const elapsed = hhmmss(seconds)

    return (
      <Flex css={{ alignItems: 'center' }}>
-        {!on && seconds > 0 && (
-          <Button mr={1} onClick={this.reset}>
-            reset
-          </Button>
-        )}
-        <Button
-          bg={on ? '#600' : '#060'}
-          onClick={this.toggle}>
+        {!on &&
+          seconds > 0 && (
+            <Button mr={1} onClick={this.reset}>
+              reset
+            </Button>
+          )}
+        <Button bg={on ? '#600' : '#060'} onClick={this.toggle}>
          {on ? 'stop' : 'start'}
        </Button>
-        <Mono px={2}>
-          {elapsed} |
-        </Mono>
-        <Mono>
-          {time}
-        </Mono>
+        <Mono px={2}>{elapsed} |</Mono>
+        <Mono>{time}</Mono>
      </Flex>
    )
  }
--- a/src/layouts/FullScreenCode.js
+++ b/src/layouts/FullScreenCode.js
@ -10,6 +10,7 @@ const FullCode = styled.div([], {
    margin: '0 !important',
    width: '100vw',
    height: '100vh',
+    overflow: 'auto',
  }
 })

--- a/src/themes/base.js
+++ b/src/themes/base.js
@ -1,9 +1,7 @@
 export default {
  font: 'system-ui, sans-serif',
  monospace: 'Menlo, monospace',
-  fontSizes: [
-    '0.75em', '1em', '1.5em', '2em', '3em'
-  ],
+  fontSizes: ['0.75em', '1em', '1.5em', '2em', '3em'],
  colors: {
    text: '#000',
    background: 'white',
@ -17,12 +15,19 @@ export default {
    textAlign: 'center',
    '@media screen and (min-width:64em)': {
      fontSize: '32px',
-    }
+    },
+    'li > ul, li > ol': {
+      fontSize: 'inherit',
+    },
+    'li > p': {
+      fontSize: 'inherit',
+      margin: 0,
+    },
  },
  ol: {
-    textAlign: 'left'
+    textAlign: 'left',
  },
  ul: {
-    textAlign: 'left'
+    textAlign: 'left',
  },
 }
--- a/test/snapshots/index.js.snap
+++ b/test/snapshots/index.js.snap
@ -335,6 +335,16 @@ Array [
  background-color: white;
 }

+.c0 li > ul,
+.c0 li > ol {
+  font-size: inherit;
+}
+
+.c0 li > p {
+  font-size: inherit;
+  margin: 0;
+}
+
@media print {
  .c1 {
    height: auto;