Basic monorepo setup

.gitignore

@@ -2,4 +2,4 @@ dist
 site
 coverage
 node_modules
-yarn.lock
+package-lock.json

.npmignore

@@ -1,11 +0,0 @@
-src
-site
-docs
-coverage
-test
-.babelrc
-.travis.yml
-CHANGELOG.md
-CONTRIBUTING.md
-templates
-create-deck

.npmrc

@@ -1 +0,0 @@
-package-lock=true

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 # Contributing
 
 Thanks for contributing!
@@ -27,7 +26,6 @@ Run `npm test`
 - Watch Mode: `npm test -- --watch`
 - Coverage: `npm test -- --coverage`
 
-
 ---
 
 # Contributor Covenant Code of Conduct
@@ -87,7 +85,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
+reported by contacting the project team at jxnblk@gmail.com. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.
@@ -103,5 +101,3 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
 available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
 
 [homepage]: https://www.contributor-covenant.org
-
-

layouts.js

@@ -1 +0,0 @@
-module.exports = require('./dist/layouts')

loader.js

@@ -1 +0,0 @@
-module.exports = require('./lib/loader')

package.json

@@ -1,91 +1,9 @@
 {
-  "name": "mdx-deck",
+  "private": true,
-  "version": "1.10.0",
+  "version": "2.0.0-0",
-  "description": "MDX-based presentation decks",
+  "workspaces": [
-  "main": "src/index.js",
+    "packages/*"
-  "bin": {
+  ],
-    "mdx-deck": "./cli.js"
-  },
-  "scripts": {
-    "start": "./cli.js docs/index.mdx -p 8080",
-    "build": "./cli.js build docs/index.mdx -d site",
-    "help": "./cli.js",
-    "test": "jest"
-  },
-  "keywords": [],
-  "author": "Brent Jackson",
-  "license": "MIT",
-  "repository": "github:jxnblk/mdx-deck",
-  "dependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
-    "@mdx-js/mdx": "^0.20.0",
-    "@mdx-js/tag": "^0.18.0",
-    "@reach/router": "^1.2.1",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-styled-components": "^1.10.0",
-    "chalk": "^2.4.2",
-    "connect": "^3.6.6",
-    "connect-history-api-fallback": "^1.6.0",
-    "find-up": "^3.0.0",
-    "friendly-errors-webpack-plugin": "^1.7.0",
-    "hhmmss": "^1.0.0",
-    "loader-utils": "^1.2.3",
-    "lodash.debounce": "^4.0.8",
-    "lodash.get": "^4.4.2",
-    "mdx-plugin-split": "0.0.2",
-    "meow": "^5.0.0",
-    "mkdirp": "^0.5.1",
-    "normalize-newline": "^3.0.0",
-    "pkg-conf": "^2.1.0",
-    "prop-types": "^15.7.2",
-    "querystring": "^0.2.0",
-    "react": "^16.8.3",
-    "react-dev-utils": "^7.0.3",
-    "react-dom": "^16.8.3",
-    "react-swipeable": "^5.0.1",
-    "remark-emoji": "^2.0.2",
-    "remark-unwrap-images": "^0.1.0",
-    "rimraf": "^2.6.3",
-    "serve-static": "^1.13.2",
-    "styled-components": "^4.1.3",
-    "webpack": "^4.29.6",
-    "webpack-dev-middleware": "^3.6.0",
-    "webpack-hot-client": "^4.1.1",
-    "webpack-hot-middleware": "^2.24.3",
-    "webpack-merge": "^4.2.1",
-    "webpack-node-externals": "^1.7.2",
-    "webpack-sources": "^1.3.0",
-    "webpackbar": "^3.1.5"
-  },
-  "devDependencies": {
-    "@rebass/grid": "^6.0.0-7",
-    "babel-jest": "^24.1.0",
-    "husky": "^1.3.1",
-    "jest": "^24.1.0",
-    "jest-styled-components": "^6.3.1",
-    "lint-staged": "^8.1.5",
-    "mdx-deck-code-surfer": "^0.5.5",
-    "prettier": "^1.16.4",
-    "react-test-renderer": "^16.8.3"
-  },
-  "jest": {
-    "roots": [
-      "<rootDir>/test/"
-    ],
-    "testMatch": [
-      "**/test/**/*.js"
-    ],
-    "testURL": "http://localhost/",
-    "coverageReporters": [
-      "html"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -97,10 +15,9 @@
       "git add"
     ]
   },
-  "prettier": {
+  "devDependencies": {
-    "semi": false,
+    "husky": "^1.3.1",
-    "singleQuote": true,
+    "lint-staged": "^8.1.5",
-    "trailingComma": "es5",
+    "prettier": "^1.16.4"
-    "jsxBracketSameLine": true
   }
 }

packages/components/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@mdx-deck/components",
+  "version": "2.0.0-0",
+  "main": "index.js",
+  "author": "Brent Jackson <jxnblk@gmail.com>",
+  "license": "MIT"
+}

packages/components/src/Overview.js

@@ -22,36 +22,39 @@ export const Overview = ({
 
   return (
     <Flex
-      color='white'
+      color="white"
-      bg='black'
+      bg="black"
       css={{
         alignItems: 'flex-start',
-        height: '100vh'
+        height: '100vh',
-      }}>
+      }}
+    >
       <Box
-        mr='auto'
+        mr="auto"
         px={2}
         py={3}
         css={{
           flex: 'none',
           height: '100vh',
-          overflowY: 'auto'
+          overflowY: 'auto',
-        }}>
+        }}
+      >
         {slides.map((Component, i) => (
           <Box
             key={i}
-            role='link'
+            role="link"
             p={1}
             style={{
-              outline: i === index ? '1px solid #07c' : null
+              outline: i === index ? '1px solid #07c' : null,
             }}
             css={{
-              cursor: 'pointer'
+              cursor: 'pointer',
             }}
             onClick={e => {
               update({ index: i })
-            }}>
+            }}
-            <Zoom zoom={1/6}>
+          >
+            <Zoom zoom={1 / 6}>
               <Root {...props}>
                 <Slide>
                   <Component />
@@ -61,20 +64,16 @@ export const Overview = ({
           </Box>
         ))}
       </Box>
-      <Box mx='auto' py={4} width={2/3}>
+      <Box mx="auto" py={4} width={2 / 3}>
-        <Zoom zoom={2/3}>
+        <Zoom zoom={2 / 3}>
-          <Root {...props}>
+          <Root {...props}>{props.children}</Root>
-            {props.children}
-          </Root>
         </Zoom>
         <Flex>
-          <Box ml='auto' py={2}>
+          <Box ml="auto" py={2}>
             {index + 1}/{length}
           </Box>
         </Flex>
-        <Box mt={3}>
+        <Box mt={3}>{notes}</Box>
-          {notes}
-        </Box>
       </Box>
     </Flex>
   )
@@ -87,7 +86,7 @@ Overview.propTypes = {
   step: PropTypes.number.isRequired,
   slides: PropTypes.array,
   mode: PropTypes.string,
-  notes: PropTypes.object
+  notes: PropTypes.object,
 }
 
 export default Overview

packages/components/src/Presenter.js

@@ -32,14 +32,16 @@ export const Presenter = ({
       css={{
         flexDirection: 'column',
         height: '100vh',
-      }}>
+      }}
+    >
       <Flex my="auto">
         <Box
           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>
@@ -50,12 +52,14 @@ export const Presenter = ({
           css={{
             flex: 'none',
             flexDirection: 'column',
-          }}>
+          }}
+        >
           <Box
             mx="auto"
             css={{
               border: '1px solid rgba(128, 128, 128, 0.25)',
-            }}>
+            }}
+          >
             <Zoom zoom={1 / 4}>
               <Root {...props}>
                 {Next && (
@@ -70,7 +74,8 @@ export const Presenter = ({
             py={3}
             css={{
               flex: 'auto',
-            }}>
+            }}
+          >
             {notes}
           </Box>
         </Flex>
@@ -83,7 +88,8 @@ export const Presenter = ({
         <Anchor
           target="_blank"
           rel="noopener noreferrer"
-          href={`${window.location.origin}/${window.location.hash}`}>
+          href={`${window.location.origin}/${window.location.hash}`}
+        >
           Open in Normal mode
         </Anchor>
         <Box mx="auto" />

packages/components/src/SlideDeck.js

@@ -233,20 +233,23 @@ export class SlideDeck extends React.Component {
             components={{
               ...defaultComponents,
               ...components,
-            }}>
+            }}
+          >
             <Provider {...this.state} update={this.update}>
               {mode === modes.grid ? (
                 <Grid {...context} slides={slides} update={this.update} />
               ) : (
                 <Swipeable
                   onSwipedLeft={() => this.update(next)}
-                  onSwipedRight={() => this.update(previous)}>
+                  onSwipedRight={() => this.update(previous)}
+                >
                   <Wrapper
                     {...this.state}
                     slides={slides}
                     width={width}
                     height={height}
-                    update={this.update}>
+                    update={this.update}
+                  >
                     <GoogleFonts />
                     <Carousel index={index}>
                       {slides.map((Component, i) => (
@@ -257,7 +260,8 @@ export class SlideDeck extends React.Component {
                           index={i}
                           className="Slide"
                           active={i === index}
-                          metadata={metadata[i]}>
+                          metadata={metadata[i]}
+                        >
                           <Component />
                         </Slide>
                       ))}

packages/components/src/Zoom.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+const ZoomRoot = styled.div(
+  [],
+  {
+    backgroundColor: 'white',
+  },
+  props => ({
+    width: 100 * props.zoom + 'vw',
+    height: 100 * props.zoom + 'vh',
+  })
+)
+
+ZoomRoot.propTypes = {
+  zoom: PropTypes.number.isRequired,
+}
+
+const ZoomInner = styled.div([], props => ({
+  transformOrigin: '0 0',
+  transform: `scale(${props.zoom})`,
+}))
+
+ZoomInner.propTypes = {
+  zoom: PropTypes.number.isRequired,
+}
+
+const Zoom = ({ zoom, ...props }) => (
+  <ZoomRoot zoom={zoom}>
+    <ZoomInner zoom={zoom} {...props} />
+  </ZoomRoot>
+)
+
+Zoom.propTypes = {
+  zoom: PropTypes.number,
+}
+
+Zoom.defaultProps = {
+  zoom: 1,
+}
+
+export default Zoom

packages/components/src/constants.js

@@ -8,14 +8,14 @@ export const MDX_SLIDE_INDEX = 'mdx-slide-index'
 export const MDX_SLIDE_STEP = 'mdx-slide-step'
 
 export const keys = {
-  'right': 39,
+  right: 39,
-  'pageDown': 34,
+  pageDown: 34,
-  'left': 37,
+  left: 37,
-  'pageUp': 33,
+  pageUp: 33,
-  'space': 32,
+  space: 32,
-  'p': 80,
+  p: 80,
-  'o': 79,
+  o: 79,
-  'g': 71,
+  g: 71,
-  'up': 38,
+  up: 38,
-  'down': 40,
+  down: 40,
 }

packages/components/src/index.js

@@ -172,19 +172,22 @@ const Presenter = props => {
         display: 'flex',
         flexDirection: 'column',
         height: '100vh',
-      }}>
+      }}
+    >
       <div
         style={{
           marginTop: 'auto',
           marginBottom: 'auto',
           display: 'flex',
-        }}>
+        }}
+      >
         <div
           style={{
             width: 500 / 8 + '%',
             marginLeft: 'auto',
             marginRight: 'auto',
-          }}>
+          }}
+        >
           <Zoom zoom={5 / 8}>{props.children}</Zoom>
         </div>
         <div
@@ -192,7 +195,8 @@ const Presenter = props => {
             width: 100 / 4 + '%',
             marginLeft: 'auto',
             marginRight: 'auto',
-          }}>
+          }}
+        >
           <Zoom zoom={1 / 4}>
             {Next && (
               <Slide register={noop}>
@@ -208,7 +212,8 @@ const Presenter = props => {
           color: 'white',
           padding: 16,
           fontSize: 20,
-        }}>
+        }}
+      >
         <pre style={{ fontFamily: 'Menlo, monospace' }}>
           {index + 1} of {slides.length}
         </pre>
@@ -227,7 +232,8 @@ const Overview = props => {
         alignItems: 'flex-start',
         height: '100vh',
         backgroundColor: 'black',
-      }}>
+      }}
+    >
       <div
         style={{
           flex: 'none',
@@ -236,7 +242,8 @@ const Overview = props => {
           paddingRight: 4,
           overflowY: 'auto',
           marginRight: 'auto',
-        }}>
+        }}
+      >
         {slides.map((Component, i) => (
           <Link
             key={i}
@@ -250,7 +257,8 @@ const Overview = props => {
               marginBottom: 4,
               cursor: 'pointer',
               outline: i === index ? '4px solid #0cf' : null,
-            }}>
+            }}
+          >
             <Zoom zoom={1 / 6}>
               <Slide register={noop}>
                 <Component />
@@ -263,7 +271,8 @@ const Overview = props => {
         style={{
           width: 200 / 3 + '%',
           margin: 'auto',
-        }}>
+        }}
+      >
         <Zoom zoom={2 / 3}>{props.children}</Zoom>
       </div>
     </div>
@@ -456,7 +465,8 @@ export class MDXDeck extends React.Component {
               <Wrapper {...this.state} index={index}>
                 <Swipeable
                   onSwipedRight={this.previous}
-                  onSwipedLeft={this.next}>
+                  onSwipedLeft={this.next}
+                >
                   <RootStyles>
                     <GoogleFonts />
                     <Router>

packages/create-deck/README.md

@@ -1,4 +1,3 @@
-
 # npm init deck
 
 Create mdx-deck presentations

packages/create-deck/cli.js

@@ -15,28 +15,31 @@ log.error = (...args) => {
 
 const template = 'jxnblk/mdx-deck/templates/basic'
 
-const cli = meow(`
+const cli = meow(
+  `
   Usage
 
     $ npm init deck my-presentation
 
     $ npx create-deck my-presentation
 
-`, {
+`,
-  booleanDefault: undefined,
+  {
-  flags: {
+    booleanDefault: undefined,
-    help: {
+    flags: {
-      type: 'boolean',
+      help: {
-      alias: 'h'
+        type: 'boolean',
+        alias: 'h',
+      },
+      version: {
+        type: 'boolean',
+        alias: 'v',
+      },
     },
-    version: {
-      type: 'boolean',
-      alias: 'v'
-    }
   }
-})
+)
 
-const [ name ] = cli.input
+const [name] = cli.input
 
 if (!name) {
   cli.showHelp(0)

packages/html-plugin/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@mdx-deck/webpack-html-plugin",
+  "version": "2.0.0-0",
+  "author": "Brent Jackson <jxnblk@gmail.com>",
+  "license": "MIT",
+  "repository": "github:jxnblk/mdx-deck"
+}

packages/layouts/src/Horizontal.js

@@ -5,7 +5,7 @@ import Box from '../Box'
 
 const Root = styled.div([], {
   width: '100vw',
-  height: '100vh'
+  height: '100vh',
 })
 
 const Horizontal = ({ children }) => {
@@ -17,8 +17,9 @@ const Horizontal = ({ children }) => {
       <Flex
         css={{
           alignItems: 'center',
-          height: '100%'
+          height: '100%',
-        }}>
+        }}
+      >
         {kids.map(k => (
           <Box key={k.key} width={1 / numberOfChildren}>
             {k}

packages/layouts/src/Split.js

@@ -16,17 +16,14 @@ const Split = ({ children }) => {
       <Flex
         css={{
           alignItems: 'center',
-          height: '100%'
+          height: '100%',
-        }}>
+        }}
-        <Box width={1 / 2}>
+      >
-          {a}
+        <Box width={1 / 2}>{a}</Box>
-        </Box>
+        <Box width={1 / 2}>{rest}</Box>
-        <Box width={1 / 2}>
-          {rest}
-        </Box>
       </Flex>
     </Root>
   )
 }
 
-export default Split
+export default Split

packages/layouts/src/SplitRight.js

@@ -5,7 +5,7 @@ import Box from '../Box'
 
 const Root = styled.div([], {
   width: '100vw',
-  height: '100vh'
+  height: '100vh',
 })
 
 const SplitRight = ({ children }) => {
@@ -16,8 +16,9 @@ const SplitRight = ({ children }) => {
       <Flex
         css={{
           alignItems: 'center',
-          height: '100%'
+          height: '100%',
-        }}>
+        }}
+      >
         <Box width={1 / 2}>{rest}</Box>
         <Box width={1 / 2}>{a}</Box>
       </Flex>

packages/mdx-deck/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "mdx-deck",
+  "version": "1.10.0",
+  "description": "MDX-based presentation decks",
+  "main": "src/index.js",
+  "bin": {
+    "mdx-deck": "./cli.js"
+  },
+  "scripts": {
+    "start": "./cli.js docs/index.mdx -p 8080",
+    "build": "./cli.js build docs/index.mdx -d site",
+    "help": "./cli.js",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "Brent Jackson",
+  "license": "MIT",
+  "repository": "github:jxnblk/mdx-deck",
+  "dependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "@mdx-js/mdx": "^0.20.0",
+    "@mdx-js/tag": "^0.18.0",
+    "@reach/router": "^1.2.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-styled-components": "^1.10.0",
+    "chalk": "^2.4.2",
+    "connect": "^3.6.6",
+    "connect-history-api-fallback": "^1.6.0",
+    "find-up": "^3.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "hhmmss": "^1.0.0",
+    "loader-utils": "^1.2.3",
+    "lodash.debounce": "^4.0.8",
+    "lodash.get": "^4.4.2",
+    "mdx-plugin-split": "0.0.2",
+    "meow": "^5.0.0",
+    "mkdirp": "^0.5.1",
+    "normalize-newline": "^3.0.0",
+    "pkg-conf": "^2.1.0",
+    "prop-types": "^15.7.2",
+    "querystring": "^0.2.0",
+    "react": "^16.8.3",
+    "react-dev-utils": "^7.0.3",
+    "react-dom": "^16.8.3",
+    "react-swipeable": "^5.0.1",
+    "remark-emoji": "^2.0.2",
+    "remark-unwrap-images": "^0.1.0",
+    "rimraf": "^2.6.3",
+    "serve-static": "^1.13.2",
+    "styled-components": "^4.1.3",
+    "webpack": "^4.29.6",
+    "webpack-dev-middleware": "^3.6.0",
+    "webpack-hot-client": "^4.1.1",
+    "webpack-hot-middleware": "^2.24.3",
+    "webpack-merge": "^4.2.1",
+    "webpack-node-externals": "^1.7.2",
+    "webpack-sources": "^1.3.0",
+    "webpackbar": "^3.1.5"
+  },
+  "devDependencies": {
+    "@rebass/grid": "^6.0.0-7",
+    "babel-jest": "^24.1.0",
+    "husky": "^1.3.1",
+    "jest": "^24.1.0",
+    "jest-styled-components": "^6.3.1",
+    "lint-staged": "^8.1.5",
+    "mdx-deck-code-surfer": "^0.5.5",
+    "prettier": "^1.16.4",
+    "react-test-renderer": "^16.8.3"
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/test/"
+    ],
+    "testMatch": [
+      "**/test/**/*.js"
+    ],
+    "testURL": "http://localhost/",
+    "coverageReporters": [
+      "html"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{md,js,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "jsxBracketSameLine": true
+  }
+}

packages/mdx-plugin/README.md

@@ -0,0 +1,3 @@
+# mdx-plugin-split
+
+Splits MDX files into an array of components for use in projects like MDX Deck.

packages/mdx-plugin/index.js

@@ -0,0 +1,130 @@
+const visit = require('unist-util-visit')
+const is = require('unist-util-is')
+
+// do i need this?
+const mdxAstToMdxHast = require('@mdx-js/mdx/mdx-ast-to-mdx-hast')
+// const mdx = require('@mdx-js/mdx')
+// removes html comments
+// const toMDXAST = require('@mdx-js/mdx/md-ast-to-mdx-ast')
+// const mdxHastToJsx = require('@mdx-js/mdx/mdx-hast-to-jsx')
+// const { toJSX } = require('@mdx-js/mdx/mdx-hast-to-jsx')
+
+// custom implementation
+const toJSX = (node, parent) => {
+  let children = ''
+  if (node.type === 'root') {
+    const jsxNodes = []
+    let layout = ''
+
+    for (const child of node.children) {
+      if (child.type === 'import') continue
+      if (child.type === 'export') {
+        if (!child.default) continue
+        layout = child.value
+          .replace(/^export\s+default\s+/, '')
+          .replace(/;\s*$/, '')
+        continue
+      }
+      jsxNodes.push(child)
+    }
+
+    return [
+      '(props => (',
+      '  <MDXTag',
+      '    name="wrapper"',
+      layout && `    Layout={${layout}}`,
+      '    components={props.components}>',
+      '    ' + jsxNodes.map(child => toJSX(child, node)).join('\n    '),
+      '  </MDXTag>',
+      '))',
+    ]
+      .filter(Boolean)
+      .join('\n')
+  }
+
+  if (node.children) {
+    children = node.children
+      .map(child => {
+        return toJSX(child, node)
+      })
+      .join('')
+  }
+
+  if (node.type === 'element') {
+    let props = ''
+    if (Object.keys(node.properties).length > 0) {
+      props = JSON.stringify(node.properties)
+    }
+    return [
+      '<MDXTag',
+      ` name="${node.tagName}"`,
+      ' components={props.components}',
+      parent.tagName && ` parentName="${parent.tagName}"`,
+      props && ` props={${props}}`,
+      '>',
+      children,
+      '</MDXTag>',
+    ]
+      .filter(Boolean)
+      .join('')
+  }
+
+  if (node.type === 'comment') {
+    return `{/*${node.value}*/}`
+  }
+
+  return node.value
+}
+
+const delimiter = 'thematicBreak'
+
+module.exports = (opts = {}) => {
+  return (tree, file) => {
+    const { children } = tree
+    const splits = []
+    const slides = []
+
+    visit(tree, node => {
+      if (is(delimiter, node)) {
+        const i = children.indexOf(node)
+        splits.push(i)
+      }
+    })
+
+    let previousSplit = 0
+
+    for (let i = 0; i < splits.length; i++) {
+      const split = splits[i]
+      slides.push(children.slice(previousSplit, split))
+      previousSplit = split + 1
+    }
+
+    slides.push(children.slice(previousSplit))
+
+    const jsx = slides.map(slide => {
+      // no idea what I'm doing
+      // not sure how to convert ast to jsx here...
+      const hast = mdxAstToMdxHast()({
+        type: 'root',
+        children: slide,
+      })
+      const code = toJSX(
+        hast,
+        {},
+        {
+          skipExport: true,
+        }
+      )
+      return code
+      // const wrapped = `(() => ${code})()`
+      // return wrapped
+    })
+
+    tree.children.push({
+      type: 'export',
+      default: false,
+      value: `export const slides = [${jsx.join(',\n')}]`,
+    })
+    // console.log(tree)
+  }
+}

packages/mdx-plugin/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "mdx-plugin-split",
+  "version": "0.0.2",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "nyc ava"
+  },
+  "keywords": [],
+  "author": "Brent Jackson <jxnblk@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@mdx-js/mdx": "^0.20.0",
+    "ava": "^1.2.1",
+    "nyc": "^13.3.0"
+  },
+  "dependencies": {
+    "unist-util-is": "^2.1.2",
+    "unist-util-visit": "^1.4.0"
+  }
+}

packages/mdx-plugin/test.js

@@ -0,0 +1,24 @@
+import test from 'ava'
+import mdx from '@mdx-js/mdx'
+import plugin from '.'
+
+const src = `
+export default props =>
+  <section>
+    {props.children}
+  </section>
+
+# Hello
+---
+## Two
+---
+## Three
+`
+
+test('adds an export', t => {
+  const code = mdx.sync(src, {
+    mdPlugins: [plugin],
+  })
+  t.is(typeof code, 'string')
+  t.snapshot(code)
+})

packages/mdx-plugin/test.js.md

@@ -0,0 +1,66 @@
+# Snapshot report for `test.js`
+
+The actual snapshot is saved in `test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## adds an export
+
+> Snapshot 1
+
+    `␊
+    export const slides = [(props => (␊
+      <MDXTag␊
+        name="wrapper"␊
+        Layout={props =>␊
+      <section>␊
+        {props.children}␊
+      </section>}␊
+        components={props.components}>␊
+        ␊
+    ␊
+        <MDXTag name="h1" components={props.components}>Hello</MDXTag>␊
+      </MDXTag>␊
+    )),␊
+    (props => (␊
+      <MDXTag␊
+        name="wrapper"␊
+        components={props.components}>␊
+        <MDXTag name="h2" components={props.components}>Two</MDXTag>␊
+      </MDXTag>␊
+    )),␊
+    (props => (␊
+      <MDXTag␊
+        name="wrapper"␊
+        components={props.components}>␊
+        <MDXTag name="h2" components={props.components}>Three</MDXTag>␊
+      </MDXTag>␊
+    ))]␊
+    const layoutProps = {␊
+      slides␊
+    };␊
+    export default class MDXContent extends React.Component {␊
+      constructor(props) {␊
+        super(props)␊
+        this.layout = props =>␊
+      <section>␊
+        {props.children}␊
+      </section>␊
+      }␊
+      render() {␊
+        const { components, ...props } = this.props␊
+    ␊
+        return <MDXTag␊
+                 name="wrapper"␊
+                 Layout={this.layout} layoutProps={Object.assign({}, layoutProps, props)}␊
+                 components={components}>␊
+    <MDXTag name="h1" components={components}>{`Hello`}</MDXTag>␊
+    <MDXTag name="hr" components={components}></MDXTag>␊
+    <MDXTag name="h2" components={components}>{`Two`}</MDXTag>␊
+    <MDXTag name="hr" components={components}></MDXTag>␊
+    <MDXTag name="h2" components={components}>{`Three`}</MDXTag>␊
+    ␊
+               </MDXTag>␊
+      }␊
+    }␊
+    MDXContent.isMDXComponent = true`

packages/themes/src/future.js

@@ -17,9 +17,9 @@ export default {
   heading: {
     textTransform: 'uppercase',
     letterSpacing: '0.1em',
-    fontWeight: 600
+    fontWeight: 600,
   },
   quote: {
-    fontWeight: 600
+    fontWeight: 600,
-  }
+  },
 }

src/Zoom.js

@@ -1,42 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
-const ZoomRoot = styled.div([], {
-  backgroundColor: 'white',
-},
-  props => ({
-    width: (100 * props.zoom) + 'vw',
-    height: (100 * props.zoom) + 'vh',
-  })
-)
-
-ZoomRoot.propTypes = {
-  zoom: PropTypes.number.isRequired
-}
-
-const ZoomInner = styled.div([],
-  props => ({
-    transformOrigin: '0 0',
-    transform: `scale(${props.zoom})`
-  })
-)
-
-ZoomInner.propTypes = {
-  zoom: PropTypes.number.isRequired
-}
-
-const Zoom = ({ zoom, ...props }) =>
-  <ZoomRoot zoom={zoom}>
-    <ZoomInner zoom={zoom} {...props} />
-  </ZoomRoot>
-
-Zoom.propTypes = {
-  zoom: PropTypes.number
-}
-
-Zoom.defaultProps = {
-  zoom: 1
-}
-
-export default Zoom

test/__snapshots__/index.js.snap

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MDXDeck renders 1`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100vw;
-  height: 100vh;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  font-family: system-ui,sans-serif;
-  color: #000;
-  background-color: white;
-  font-size: 1.5em;
-  text-align: center;
-}
-
-.c0 li > ul,
-.c0 li > ol {
-  font-size: inherit;
-}
-
-.c0 li > p {
-  font-size: inherit;
-  margin: 0;
-}
-
-.c0 ul {
-  text-align: left;
-}
-
-.c0 ol {
-  text-align: left;
-}
-
-@media screen and (min-width:64em) {
-  .c0 {
-    font-size: 3em;
-  }
-}
-
-<div
-  onTouchStart={[Function]}
->
-  <div
-    className="c0"
-  >
-    <div
-      role="group"
-      style={
-        Object {
-          "outline": "none",
-        }
-      }
-      tabIndex="-1"
-    >
-      <div
-        className="c1"
-      >
-        <div
-          role="group"
-          style={
-            Object {
-              "outline": "none",
-            }
-          }
-          tabIndex="-1"
-        >
-          <h1>
-            hi
-          </h1>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

test/index.js

@@ -1,15 +0,0 @@
-import 'jest-styled-components'
-import React from 'react'
-import { create as render } from 'react-test-renderer'
-import { MDXDeck } from '../src'
-
-const renderJSON = el => render(el).toJSON()
-
-describe('MDXDeck', () => {
-  test('renders', () => {
-    const json = renderJSON(<MDXDeck slides={[() => <h1>hi</h1>]} />)
-    expect(json).toMatchSnapshot(``)
-  })
-
-  test.todo('handles keydown events')
-})

themes.js

@@ -1 +0,0 @@
-module.exports = require('./dist/themes')