Merge branch 'master' of https://github.com/unitehenry/mdx-deck

docs/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@mdx-deck/docs",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -13,11 +13,11 @@
   "dependencies": {
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
-    "@mdx-deck/components": "^2.0.8",
-    "@mdx-deck/layouts": "^2.0.0",
-    "@mdx-deck/themes": "^2.0.2",
+    "@mdx-deck/components": "^2.1.0",
+    "@mdx-deck/layouts": "^2.1.0",
+    "@mdx-deck/themes": "^2.1.0",
     "@rebass/emotion": "^3.0.0",
-    "mdx-deck": "^2.0.9",
+    "mdx-deck": "^2.1.0",
     "rebass": "^3.0.1"
   }
 }

lerna.json

@@ -2,5 +2,5 @@
   "packages": ["packages/*"],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.0.9"
+  "version": "2.1.0"
 }

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  command = "npm i yarn@latest && yarn && yarn build"
+  publish = "docs/dist"

package.json

@@ -25,6 +25,11 @@
     "coverageReporters": [
       "lcov",
       "html"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/.cache/",
+      "/public/"
     ]
   },
   "husky": {

packages/components/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mdx-deck/components",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "main": "src/index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
   "dependencies": {
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
-    "@mdx-js/react": "^1.0.0-rc.0",
+    "@mdx-js/react": "1.0.0-rc.0",
     "@reach/router": "^1.2.1",
     "emotion-theming": "^10.0.7",
     "hhmmss": "^1.0.0",

packages/components/src/Grid.js

@@ -16,7 +16,7 @@ const withLocation = Component => props => (
 )
 
 export const Grid = withLocation(props => {
-  const { index, slides, modes, update } = props
+  const { index, slides, modes, update, basepath } = props
   const activeThumb = React.createRef()
 
   useEffect(() => {
@@ -49,7 +49,7 @@ export const Grid = withLocation(props => {
             key={i}
             role="link"
             onClick={e => {
-              navigate('/' + i)
+              navigate(basepath + '/' + i)
               update({ mode: modes.NORMAL })
             }}
             style={{

packages/components/src/Head.js

@@ -24,6 +24,7 @@ export class Head extends React.Component {
     const children = React.Children.toArray(this.props.children)
     const nodes = [...document.head.querySelectorAll('[data-head]')]
     nodes.forEach(node => {
+      if (typeof node.remove !== 'function') return
       node.remove()
     })
     children.forEach(child => {

packages/components/src/MDXDeck.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Router, globalHistory, navigate, Link } from '@reach/router'
+import { Router, globalHistory, navigate } from '@reach/router'
 import { Swipeable } from 'react-swipeable'
 import querystring from 'querystring'
 import Provider from './Provider'
@@ -60,7 +60,8 @@ export class MDXDeck extends React.Component {
   }
 
   handleKeyDown = e => {
-    const { key, keyCode, metaKey, ctrlKey, altKey, shiftKey } = e
+    const { basepath } = this.props
+    const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = e
     const { activeElement } = document
 
     if (inputElements.includes(activeElement.tagName)) {
@@ -68,11 +69,10 @@ export class MDXDeck extends React.Component {
     }
     if (metaKey || ctrlKey) return
     const alt = altKey && !shiftKey
-    const shift = shiftKey && !altKey
 
     const { pathname } = globalHistory.location
     if (keyCode === keys.p && shiftKey && altKey) {
-      navigate('/print')
+      navigate(basepath + '/print')
       this.setState({ mode: 'print' })
     }
     if (pathname === '/print') return
@@ -88,6 +88,8 @@ export class MDXDeck extends React.Component {
         case keys.g:
           this.setState(toggleMode(GRID))
           break
+        default:
+          break
       }
     } else {
       switch (keyCode) {
@@ -102,13 +104,19 @@ export class MDXDeck extends React.Component {
           e.preventDefault()
           this.next()
           break
+        default:
+          break
       }
     }
   }
 
   getIndex = () => {
+    const { basepath } = this.props
     const { pathname } = globalHistory.location
-    return Number(pathname.split('/')[1] || 0)
+    const pagepath = pathname.replace(basepath, '')
+    const n = Number(pagepath.split('/')[1])
+    const index = isNaN(n) ? -1 : n
+    return index
   }
 
   getMeta = i => {
@@ -118,9 +126,10 @@ export class MDXDeck extends React.Component {
   }
 
   goto = i => {
+    const { basepath } = this.props
     const current = this.getIndex()
     const reverse = i < current
-    navigate('/' + i)
+    navigate(basepath + '/' + i)
     const meta = this.getMeta(i)
     this.setState({
       step: reverse ? meta.steps || 0 : 0,
@@ -128,7 +137,7 @@ export class MDXDeck extends React.Component {
   }
 
   previous = () => {
-    const { slides, step } = this.state
+    const { step } = this.state
     const index = this.getIndex()
     const meta = this.getMeta(index)
     if (meta.steps && step > 0) {
@@ -175,6 +184,8 @@ export class MDXDeck extends React.Component {
         const step = parseInt(e.newValue, 10)
         this.setState({ step })
         break
+      default:
+        break
     }
   }
 
@@ -199,13 +210,16 @@ export class MDXDeck extends React.Component {
   componentDidUpdate() {
     const index = this.getIndex()
     const { step, mode } = this.state
+    const { pathname, search } = globalHistory.location
     localStorage.setItem(STORAGE_INDEX, index)
     localStorage.setItem(STORAGE_STEP, step)
+
     if (mode !== NORMAL && mode !== PRINT) {
       const query = '?' + querystring.stringify({ mode })
+      if (query === search) return
       navigate(query)
     } else {
-      const { pathname } = globalHistory.location
+      if (!search) return
       navigate(pathname)
     }
   }
@@ -216,11 +230,12 @@ export class MDXDeck extends React.Component {
   }
 
   render() {
+    const { basepath } = this.props
     const { pathname } = globalHistory.location
     const { slides } = this.state
-    const mode = pathname === '/print' ? PRINT : this.state.mode
+    const pagepath = pathname.replace(basepath, '')
+    const mode = pagepath === '/print' ? PRINT : this.state.mode
     const index = this.getIndex()
-    const meta = this.getMeta(index)
     const context = {
       ...this.state,
       register: this.register,
@@ -239,15 +254,17 @@ export class MDXDeck extends React.Component {
       case GRID:
         Wrapper = Grid
         break
+      default:
+        break
     }
 
     return (
       <Provider {...this.props} {...this.state} mode={mode} index={index}>
         <Catch>
           <GoogleFonts />
-          <Wrapper {...this.state} modes={modes} index={index}>
+          <Wrapper {...this.props} {...this.state} modes={modes} index={index}>
             <Swipeable onSwipedRight={this.previous} onSwipedLeft={this.next}>
-              <Router>
+              <Router basepath={basepath}>
                 <Slide path="/" index={0} {...context}>
                   <FirstSlide path="/" />
                 </Slide>
@@ -256,7 +273,7 @@ export class MDXDeck extends React.Component {
                     <Component path={i + '/*'} />
                   </Slide>
                 ))}
-                <Print path="/print" {...this.props} />
+                <Print path="print" {...this.props} />
               </Router>
             </Swipeable>
           </Wrapper>
@@ -272,6 +289,7 @@ MDXDeck.propTypes = {
 }
 
 MDXDeck.defaultProps = {
+  basepath: '',
   slides: [],
   headTags: [],
 }

packages/components/src/Overview.js

@@ -1,23 +1,13 @@
 import React, { useEffect } from 'react'
-import { Location, navigate } from '@reach/router'
+import { navigate } from '@reach/router'
 import Zoom from './Zoom'
 import Slide from './Slide'
 import Pre from './Pre'
 
-const getIndex = ({ pathname }) => {
-  return Number(pathname.split('/')[1] || 0)
-}
+const query = '?mode=overview'
 
-const withLocation = Component => props => (
-  <Location
-    children={({ location }) => (
-      <Component {...props} location={location} index={getIndex(location)} />
-    )}
-  />
-)
-
-export const Overview = withLocation(props => {
-  const { index, slides } = props
+export const Overview = props => {
+  const { index, slides, basepath } = props
   const activeThumb = React.createRef()
 
   useEffect(() => {
@@ -54,7 +44,7 @@ export const Overview = withLocation(props => {
             key={i}
             role="link"
             onClick={e => {
-              navigate('/' + i)
+              navigate(basepath + '/' + i + query)
             }}
             style={{
               display: 'block',
@@ -88,6 +78,6 @@ export const Overview = withLocation(props => {
       </div>
     </div>
   )
-})
+}
 
 export default Overview

packages/components/src/Provider.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { globalHistory } from '@reach/router'
 import { Global } from '@emotion/core'
 import { ThemeProvider } from 'emotion-theming'
 import merge from 'lodash.merge'

packages/components/src/index.js

@@ -5,4 +5,8 @@ export { Notes } from './Notes'
 export { Steps } from './Steps'
 export { Appear } from './Appear'
 export { withContext, useDeck } from './context'
-export useSteps from './useSteps'
+export { default as useSteps } from './useSteps'
+
+export { Provider } from './Provider'
+export { Slide } from './Slide'
+export { Zoom } from './Zoom'

packages/components/src/mdx-components.js

@@ -46,6 +46,7 @@ export const table = props => (
 )
 
 export const components = {
+  wrapper: props => props.children,
   pre: props => props.children,
   code,
   inlineCode,

packages/create-deck/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-deck",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Create mdx-deck presentations",
   "bin": {
     "create-deck": "cli.js"

packages/export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-deck/export",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "png": "./cli.js png ../../docs/demo.mdx"
   },
   "dependencies": {
-    "mdx-deck": "^2.0.9",
+    "mdx-deck": "^2.1.0",
     "meow": "^5.0.0",
     "mkdirp": "^0.5.1",
     "puppeteer": "^1.13.0"

packages/gatsby-theme/.gitignore

@@ -0,0 +1,2 @@
+.cache
+public

packages/gatsby-theme/.npmignore

@@ -0,0 +1,4 @@
+.cache
+public
+src/pages
+src/decks

packages/gatsby-theme/README.md

@@ -0,0 +1,42 @@
+# @mdx-deck/gatsby-theme
+
+**WIP** A Gatsby theme for adding MDX Decks to your Gatsby site
+
+```sh
+npm i @mdx-deck/gatsby-theme
+```
+
+_Note:_ This theme requires MDX v1, which is currently in beta, and will not work with previous versions of MDX
+
+```js
+// gatsby-config.js
+module.exports = {
+  __experimentalThemes: ['@mdx-deck/gatsby-theme'],
+}
+```
+
+Add MDX Decks to the `src/decks/` directory.
+
+```mdx
+# Hello!
+
+---
+
+## Beep
+```
+
+## Using Layouts
+
+Slide layout components must be rendered inline, _not_ using the default export syntax.
+
+```mdx
+import Layout from './my-layout'
+
+<Layout>
+
+# Hello Layout
+
+</Layout>
+```
+
+MIT License

packages/gatsby-theme/gatsby-config.js

@@ -0,0 +1,35 @@
+const path = require('path')
+const pkg = require('./package.json')
+
+const remarkPlugins = [require('remark-emoji'), require('remark-unwrap-images')]
+
+module.exports = {
+  plugins: [
+    'gatsby-plugin-emotion',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'decks',
+        path: path.resolve('src/decks'),
+      },
+    },
+    {
+      resolve: 'gatsby-mdx',
+      options: {
+        extensions: ['.mdx', '.md'],
+        remarkPlugins,
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-compile-es6-packages',
+      options: {
+        modules: [
+          pkg.name,
+          '@mdx-deck/components',
+          '@mdx-deck/themes',
+          '@mdx-deck/layouts',
+        ],
+      },
+    },
+  ],
+}

packages/gatsby-theme/gatsby-node.js

@@ -0,0 +1,84 @@
+const path = require('path')
+const { createFilePath } = require('gatsby-source-filesystem')
+const Debug = require('debug')
+const mkdirp = require('mkdirp')
+const pkg = require('./package.json')
+
+const debug = Debug('@mdx-deck/gatsby-theme')
+
+exports.onPreBootstrap = ({ store }) => {
+  const { program } = store.getState()
+
+  const dir = path.join(program.directory, `src/decks`)
+
+  debug(`Initializing ${dir} directory`)
+  mkdirp.sync(dir)
+}
+
+exports.onCreateNode = ({ node, actions, getNode }, opts = {}) => {
+  const { name = 'decks' } = opts
+  if (node.internal.type !== 'Mdx') return
+
+  const value = path.join('/', name, createFilePath({ node, getNode }))
+  actions.createNodeField({
+    name: 'deck',
+    node,
+    value,
+  })
+}
+
+const stripSlash = str => str.replace(/\/$/, '')
+
+exports.createPages = async ({ graphql, actions }, opts = {}) => {
+  const { name = 'decks' } = opts
+
+  const result = await graphql(`
+    {
+      allMdx {
+        edges {
+          node {
+            id
+            fields {
+              deck
+            }
+            parent {
+              ... on File {
+                name
+                sourceInstanceName
+              }
+            }
+          }
+        }
+      }
+    }
+  `)
+  if (result.errors) {
+    debug(result.errors)
+    return
+  }
+
+  const decks = result.data.allMdx.edges
+    .filter(edge => {
+      return edge.node.parent.sourceInstanceName === 'decks'
+    })
+    .map(edge => edge.node)
+
+  // index page
+  actions.createPage({
+    path: path.join('/', name),
+    component: require.resolve('./src/templates/index.js'),
+  })
+
+  decks.forEach(deck => {
+    const matchPath = path.join(deck.fields.deck, '*')
+    actions.createPage({
+      path: deck.fields.deck,
+      matchPath: path.join(deck.fields.deck, '*'),
+      component: require.resolve('./src/templates/deck.js'),
+      context: {
+        id: deck.id,
+        basepath: stripSlash(deck.fields.deck),
+      },
+    })
+  })
+}

packages/gatsby-theme/index.js

@@ -0,0 +1 @@
+// noop

packages/gatsby-theme/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@mdx-deck/gatsby-theme",
+  "version": "2.1.0",
+  "main": "index.js",
+  "author": "Brent Jackson <jxnblk@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "start": "gatsby develop",
+    "build": "gatsby build"
+  },
+  "peerDependencies": {
+    "gatsby": "^2.3.17",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "gatsby": "^2.3.17",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "dependencies": {
+    "@mdx-deck/components": "^2.1.0",
+    "@mdx-deck/themes": "^2.1.0",
+    "@mdx-js/mdx": "1.0.0-rc.0",
+    "@mdx-js/react": "1.0.0-rc.0",
+    "debug": "^4.1.1",
+    "gatsby-mdx": "^0.5.6",
+    "gatsby-plugin-compile-es6-packages": "^1.1.0",
+    "gatsby-plugin-emotion": "^4.0.6",
+    "gatsby-source-filesystem": "^2.0.29",
+    "lodash.get": "^4.4.2",
+    "mkdirp": "^0.5.1",
+    "remark-emoji": "^2.0.2",
+    "remark-unwrap-images": "^0.2.0"
+  }
+}

packages/gatsby-theme/src/decks/beep.mdx

@@ -0,0 +1,21 @@
+<!-- todo: normal export syntax doesn't work with gatsby-mdx -->
+
+import { comic } from '@mdx-deck/themes'
+
+export const theme = { ...comic }
+
+# Beep
+
+---
+
+This is another deck
+
+---
+
+In the *same* Gatsby site!
+
+---
+
+:sunglasses:
+Cool.
+

packages/gatsby-theme/src/decks/hello.mdx

@@ -0,0 +1,31 @@
+
+# Hello There! :sunglasses:
+
+---
+
+This is the MDX Deck Gatsby theme
+
+---
+
+`npm i @mdx-deck/gatsby-theme`
+
+---
+
+```js
+// gatsby-config.js
+module.exports = {
+  __experimentalThemes: [
+    '@mdx-deck/gatsby-theme',
+  ]
+}
+```
+
+---
+
+`mkdir src src/decks`
+
+---
+
+1. Add an MDX deck to `src/decks`
+2. Navigate to `http://localhost.com/decks`
+

packages/gatsby-theme/src/index.js

@@ -0,0 +1 @@
+export default {}

packages/gatsby-theme/src/layouts/deck.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { MDXProvider } from '@mdx-js/react'
+import { MDXDeck } from '@mdx-deck/components'
+import Root from './root'
+import splitter from '../splitter'
+
+const wrapper = page => props => (
+  <MDXDeck {...splitter({ ...page, ...props })} />
+)
+
+export default props => {
+  const components = {
+    wrapper: wrapper(props),
+  }
+  return (
+    <Root>
+      <MDXProvider components={components}>{props.children}</MDXProvider>
+    </Root>
+  )
+}

packages/gatsby-theme/src/layouts/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { navigate } from 'gatsby'
+import { MDXProvider } from '@mdx-js/react'
+import { Provider, Zoom, Slide } from '@mdx-deck/components'
+import Root from './root'
+import splitter from '../splitter'
+
+const wrapper = props => {
+  const { slides, theme, themes } = splitter(props)
+  const [First] = slides
+  return (
+    <Provider theme={theme} themes={themes}>
+      <Zoom zoom={1 / 3}>
+        <Slide>
+          <First />
+        </Slide>
+      </Zoom>
+    </Provider>
+  )
+}
+
+const Thumb = props => (
+  <div
+    role="link"
+    css={{
+      cursor: 'pointer',
+      overflow: 'hidden',
+    }}
+    onClick={e => {
+      navigate(props.slug)
+    }}
+  >
+    <MDXProvider components={{ wrapper }}>{props.children}</MDXProvider>
+    <div
+      css={{
+        textAlign: 'center',
+        padding: 4,
+      }}
+    >
+      {props.title}
+    </div>
+  </div>
+)
+
+export default props => (
+  <Root>
+    <div
+      css={{
+        padding: 32,
+      }}
+    >
+      <h1>MDX Decks</h1>
+      <ul
+        css={{
+          listStyle: 'none',
+          padding: 0,
+          display: 'flex',
+          flexWrap: 'wrap',
+        }}
+      >
+        {props.decks.map(deck => (
+          <li key={deck.id} style={{ width: 100 / 3 + '%' }}>
+            <Thumb {...props} {...deck} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  </Root>
+)

packages/gatsby-theme/src/layouts/root.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Global } from '@emotion/core'
+
+export default props => (
+  <>
+    <Global
+      styles={{
+        '*': { boxSizing: 'border-box' },
+        body: {
+          margin: 0,
+          fontFamily: 'system-ui, sans-serif',
+        },
+      }}
+    />
+    {props.children}
+  </>
+)

packages/gatsby-theme/src/pages/index.mdx

@@ -0,0 +1,8 @@
+import { Link } from 'gatsby'
+
+# @mdx-deck/gatsby-theme
+
+A Gatsby theme for creating presentation decks with MDX
+
+<Link to='/decks'>View decks</Link>
+

packages/gatsby-theme/src/splitter.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export default props => {
+  const { basepath } = props.pageContext || {}
+  const { theme, themes } = props
+  const arr = React.Children.toArray(props.children)
+  const splits = []
+  const slides = []
+
+  arr.forEach((child, i) => {
+    if (child.props.mdxType === 'hr') splits.push(i)
+  })
+
+  let previousSplit = 0
+  splits.forEach(i => {
+    const children = [...arr.slice(previousSplit, i)]
+    slides.push(() => children)
+    previousSplit = i + 1
+  })
+  slides.push(() => [...arr.slice(previousSplit)])
+
+  return {
+    ...props,
+    theme,
+    themes,
+    slides,
+    basepath,
+  }
+}

packages/gatsby-theme/src/templates/deck.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import MDXRenderer from 'gatsby-mdx/mdx-renderer'
+import { graphql } from 'gatsby'
+import Layout from '../layouts/deck'
+
+export default props => {
+  const { mdx } = props.data
+  const children = <MDXRenderer children={mdx.code.body} />
+  return <Layout {...props} children={children} />
+}
+
+export const query = graphql`
+  query($id: String!) {
+    mdx(id: { eq: $id }) {
+      id
+      code {
+        body
+      }
+    }
+  }
+`

packages/gatsby-theme/src/templates/index.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import MDXRenderer from 'gatsby-mdx/mdx-renderer'
+import get from 'lodash.get'
+import Layout from '../layouts/index'
+
+const getTitle = node => {
+  const headings = node.headings.filter(h => h.depth === 1)
+  return get(headings, `0.value`, node.slug)
+}
+
+export default props => {
+  const decks = props.data.allMdx.edges
+    .map(({ node }) => ({
+      ...node,
+      slug: node.fields.deck,
+      title: getTitle(node),
+      children: <MDXRenderer children={node.code.body} />,
+    }))
+    .filter(node => node.parent.sourceInstanceName === 'decks')
+  return <Layout {...props} decks={decks} />
+}
+
+export const query = graphql`
+  {
+    allMdx {
+      edges {
+        node {
+          id
+          fields {
+            deck
+          }
+          code {
+            body
+          }
+          headings {
+            depth
+            value
+          }
+          parent {
+            ... on File {
+              sourceInstanceName
+            }
+          }
+        }
+      }
+    }
+  }
+`

packages/html-plugin/package.json

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

packages/layouts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-deck/layouts",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "src/index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",

packages/loader/index.js

@@ -5,7 +5,10 @@ const mdxPlugin = require('@mdx-deck/mdx-plugin')
 module.exports = async function(src) {
   const callback = this.async()
   const options = getOptions(this) || {}
-  options.remarkPlugins = options.mdPlugins || []
+  options.remarkPlugins = [
+    ...options.remarkPlugins,
+    ...(options.mdPlugins || []),
+  ]
   options.remarkPlugins.push(mdxPlugin)
 
   const result = mdx.sync(src, options)

packages/loader/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mdx-deck/loader",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@mdx-deck/mdx-plugin": "^2.0.9",
-    "@mdx-js/mdx": "^1.0.0-rc.0",
+    "@mdx-deck/mdx-plugin": "^2.1.0",
+    "@mdx-js/mdx": "1.0.0-rc.0",
     "loader-utils": "^1.2.3"
   }
 }

packages/mdx-deck/cli.js

@@ -22,7 +22,7 @@ const cli = meow(
     $ ${chalk.green('mdx-deck deck.mdx')}
 
     $ ${chalk.green('mdx-deck build deck.mdx')}
-  
+
   ${chalk.gray('Options')}
 
       -h --host     Dev server host
@@ -60,6 +60,9 @@ const cli = meow(
         type: 'boolean',
         default: true,
       },
+      basepath: {
+        type: 'string',
+      },
     },
   }
 )

packages/mdx-deck/lib/config.js

@@ -6,13 +6,11 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
 const merge = require('webpack-merge')
 const chalk = require('chalk')
-const remark = {
-  emoji: require('remark-emoji'),
-  unwrapImages: require('remark-unwrap-images'),
-}
 const HTMLPlugin = require('@mdx-deck/webpack-html-plugin')
 const babel = require('../babel.config')
 
+const remarkPlugins = [require('remark-emoji'), require('remark-unwrap-images')]
+
 const rules = [
   {
     test: /\.jsx?$/,
@@ -38,7 +36,7 @@ const rules = [
       {
         loader: require.resolve('@mdx-deck/loader'),
         options: {
-          remarkPlugins: [remark.emoji, remark.unwrapImages],
+          remarkPlugins,
         },
       },
     ],

packages/mdx-deck/lib/entry.js

@@ -13,6 +13,11 @@ export default class App extends React.Component {
   }
 }
 
+const { basepath } = OPTIONS
+App.defaultProps = {
+  basepath,
+}
+
 if (typeof document !== 'undefined') {
   const div = document.getElementById('root')
   render(<App />, div)

packages/mdx-deck/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdx-deck",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "MDX-based presentation decks",
   "bin": {
     "mdx-deck": "./cli.js"
@@ -26,13 +26,13 @@
     "@emotion/babel-preset-css-prop": "^10.0.7",
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
-    "@mdx-deck/components": "^2.0.8",
-    "@mdx-deck/layouts": "^2.0.0",
-    "@mdx-deck/loader": "^2.0.9",
-    "@mdx-deck/themes": "^2.0.2",
-    "@mdx-deck/webpack-html-plugin": "^2.0.4",
-    "@mdx-js/mdx": "^1.0.0-rc.0",
-    "@mdx-js/react": "^1.0.0-rc.0",
+    "@mdx-deck/components": "^2.1.0",
+    "@mdx-deck/layouts": "^2.1.0",
+    "@mdx-deck/loader": "^2.1.0",
+    "@mdx-deck/themes": "^2.1.0",
+    "@mdx-deck/webpack-html-plugin": "^2.1.0",
+    "@mdx-js/mdx": "1.0.0-rc.0",
+    "@mdx-js/react": "1.0.0-rc.0",
     "babel-loader": "^8.0.5",
     "chalk": "^2.4.2",
     "connect": "^3.6.6",
@@ -42,7 +42,7 @@
     "find-up": "^3.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "meow": "^5.0.0",
-    "mini-css-extract-plugin": "^0.5.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "pkg-conf": "^3.0.0",
     "react": "^16.8.3",
     "react-dev-utils": "^8.0.0",

packages/mdx-plugin/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mdx-deck/mdx-plugin",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "",
   "main": "index.js",
   "keywords": [],
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@mdx-js/mdx": "^1.0.0-rc.0"
+    "@mdx-js/mdx": "1.0.0-rc.0"
   },
   "dependencies": {
     "unist-util-is": "^2.1.2",

packages/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-deck/themes",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "main": "src/index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",

packages/themes/src/swiss.js

@@ -2,7 +2,6 @@ import base from './base'
 
 const white = '#fff'
 const black = '#000'
-const blue = '#2d5dd7'
 const red = '#f00'
 
 export default {

templates/basic/package.json

@@ -1,13 +1,13 @@
 {
   "private": true,
   "name": "@mdx-deck/basic-template",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "scripts": {
     "start": "mdx-deck deck.mdx",
     "build": "mdx-deck build deck.mdx",
     "help": "mdx-deck"
   },
   "devDependencies": {
-    "mdx-deck": "^2.0.9"
+    "mdx-deck": "^2.1.0"
   }
 }