Clean up theme package

package.json

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

packages/components/src/MDXDeck.js

@@ -58,6 +58,7 @@ export class MDXDeck extends React.Component {
   }
 
   handleKeyDown = e => {
+    const { basepath } = this.props
     const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = e
     const { activeElement } = document
     if (inputElements.includes(activeElement.tagName)) {
@@ -68,7 +69,7 @@ export class MDXDeck extends React.Component {
 
     const { pathname } = globalHistory.location
     if (keyCode === keys.p && shiftKey && altKey) {
-      navigate('/print')
+      navigate(basepath + '/print')
       this.setState({ mode: 'print' })
     }
     if (pathname === '/print') return
@@ -108,7 +109,9 @@ export class MDXDeck extends React.Component {
     const { basepath } = this.props
     const { pathname } = globalHistory.location
     const pagepath = pathname.replace(basepath, '')
-    return Number(pagepath.split('/')[1] || 0)
+    const n = Number(pagepath.split('/')[1])
+    const index = isNaN(n) ? -1 : n
+    return index
   }
 
   getMeta = i => {
@@ -225,7 +228,8 @@ export class MDXDeck extends React.Component {
     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 context = {
       ...this.state,
@@ -256,16 +260,15 @@ export class MDXDeck extends React.Component {
           <Wrapper {...this.props} {...this.state} modes={modes} index={index}>
             <Swipeable onSwipedRight={this.previous} onSwipedLeft={this.next}>
               <Router basepath={basepath}>
-                <FirstSlide path={basepath + '/'} />
-                <Slide path={'/'} index={0} {...context}>
-                  <FirstSlide path={'/'} />
+                <Slide path="/" index={0} {...context}>
+                  <FirstSlide path="/" />
                 </Slide>
                 {slides.map((Component, i) => (
                   <Slide key={i} path={i + '/*'} index={i} {...context}>
                     <Component path={i + '/*'} />
                   </Slide>
                 ))}
-                <Print path={'/print'} {...this.props} />
+                <Print path="print" {...this.props} />
               </Router>
             </Swipeable>
           </Wrapper>

packages/components/src/Overview.js

@@ -4,6 +4,8 @@ import Zoom from './Zoom'
 import Slide from './Slide'
 import Pre from './Pre'
 
+const query = '?mode=overview'
+
 export const Overview = props => {
   const { index, slides, basepath } = props
   const activeThumb = React.createRef()
@@ -42,7 +44,7 @@ export const Overview = props => {
             key={i}
             role="link"
             onClick={e => {
-              navigate(basepath + '/' + i)
+              navigate(basepath + '/' + i + query)
             }}
             style={{
               display: 'block',

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

@@ -23,7 +23,12 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-compile-es6-packages',
       options: {
-        modules: [pkg.name],
+        modules: [
+          pkg.name,
+          '@mdx-deck/components',
+          '@mdx-deck/themes',
+          '@mdx-deck/layouts',
+        ],
       },
     },
   ],

packages/gatsby-theme/package.json

@@ -9,28 +9,26 @@
     "build": "gatsby build"
   },
   "peerDependencies": {
-    "@mdx-js/mdx": "^1.0.0-rc.0",
-    "@mdx-js/react": "^1.0.0-rc.0",
     "gatsby": "^2.3.17",
-    "gatsby-mdx": "^0.5.6",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "@mdx-js/mdx": "^1.0.0-rc.0",
-    "@mdx-js/react": "^1.0.0-rc.0",
     "gatsby": "^2.3.17",
-    "gatsby-mdx": "^0.5.6",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
   "dependencies": {
+    "gatsby-mdx": "^0.5.6",
+    "@mdx-js/mdx": "^1.0.0-rc.0",
+    "@mdx-js/react": "^1.0.0-rc.0",
     "@mdx-deck/components": "^2.0.8",
     "@mdx-deck/themes": "^2.0.2",
     "debug": "^4.1.1",
     "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"
   }
 }

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

@@ -1,5 +1,5 @@
 
-# Hello
+# Hello There! :sunglasses:
 
 ---
 

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

@@ -1,10 +0,0 @@
-
-# Leia
-
----
-
-Is the best cat
-
----
-
-:kissing_cat:

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Global } from '@emotion/core'
 import { MDXProvider } from '@mdx-js/react'
 import { MDXDeck } from '@mdx-deck/components'
 import Root from './root'

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

@@ -19,37 +19,48 @@ const wrapper = props => {
   )
 }
 
-const Thumb = props => {
-  console.log(props)
-
-  return <MDXProvider components={{ wrapper }}>{props.children}</MDXProvider>
-}
+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={{}}>
+    <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}>
-            <div
-              role="link"
-              css={{
-                cursor: 'pointer',
-              }}
-              onClick={e => {
-                navigate(deck.slug)
-              }}
-            >
-              <Thumb {...props} {...deck} />
-              {deck.slug}
-            </div>
+          <li key={deck.id} style={{ width: 100 / 3 + '%' }}>
+            <Thumb {...props} {...deck} />
           </li>
         ))}
       </ul>

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

@@ -1,18 +1,26 @@
 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.slug,
-    children: <MDXRenderer children={node.code.body} />,
-  }))
+  const decks = props.data.allMdx.edges
+    .map(({ node }) => ({
+      ...node,
+      slug: node.fields.slug,
+      title: getTitle(node),
+      children: <MDXRenderer children={node.code.body} />,
+    }))
+    .filter(node => node.parent.sourceInstanceName === 'decks')
   return <Layout {...props} decks={decks} />
 }
 
-// todo: filter??
 export const query = graphql`
   {
     allMdx {
@@ -25,6 +33,15 @@ export const query = graphql`
           code {
             body
           }
+          headings {
+            depth
+            value
+          }
+          parent {
+            ... on File {
+              sourceInstanceName
+            }
+          }
         }
       }
     }

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/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)