Refactor gatsby theme layout

packages/components/src/MDXDeck.js

@@ -60,24 +60,30 @@ const getWrapper = mode => {
 
 export const MDXDeckContext = React.createContext()
 
-export const State = ({ children }) => {
+const useDeckState = () => {
+  const context = useContext(MDXDeckContext)
+  if (context) return context
+
   const [state, setState] = useState({
     metadata: {},
     step: 0,
     mode: NORMAL,
   })
 
-  const context = {
+  return {
     state,
     setState,
   }
+}
 
+export const MDXDeckState = ({ children }) => {
+  const context = useDeckState()
   return <MDXDeckContext.Provider value={context} children={children} />
 }
 
-export const Deck = props => {
+export const MDXDeck = props => {
   const { slides, basepath } = props
-  const { state, setState } = useContext(MDXDeckContext)
+  const { state, setState } = useDeckState(MDXDeckContext)
 
   const index = getIndex(props)
 
@@ -172,12 +178,6 @@ export const Deck = props => {
   )
 }
 
-export const MDXDeck = props => (
-  <State>
-    <Deck {...props} />
-  </State>
-)
-
 MDXDeck.propTypes = {
   slides: PropTypes.array.isRequired,
   headTags: PropTypes.array.isRequired,

packages/components/src/context.js

@@ -1,11 +1,11 @@
+// slide context
 import React, { useContext } from 'react'
 
 export const Context = React.createContext({})
 
-export const withContext = Component => props => (
-  <Context.Consumer
-    children={context => <Component {...props} context={context} />}
-  />
-)
-
 export const useDeck = () => useContext(Context)
+
+export const withContext = Component => props => {
+  const context = useDeck()
+  return <Component {...props} context={context} />
+}

packages/components/src/index.js

@@ -1,4 +1,4 @@
-export { MDXDeck } from './MDXDeck'
+export { MDXDeck, MDXDeckState } from './MDXDeck'
 export { Head } from './Head'
 export { Image } from './Image'
 export { Notes } from './Notes'

packages/gatsby-theme/gatsby-browser.js

@@ -0,0 +1 @@
+export { wrapPageElement } from './src'

packages/gatsby-theme/src/index.js

@@ -1 +1,6 @@
-export default {}
+import React from 'react'
+import { MDXDeckState } from '@mdx-deck/components'
+
+export const wrapPageElement = ({ props, element }) => (
+  <MDXDeckState key={props.pageContext.basepath}>{element}</MDXDeckState>
+)

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

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

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

@@ -1,22 +1,13 @@
 import React from 'react'
 import MDXRenderer from 'gatsby-mdx/mdx-renderer'
 import { graphql } from 'gatsby'
-import { MDXDeck, splitSlides } from '@mdx-deck/components'
-
-const Wrapper = props => <MDXDeck {...splitSlides(props)} />
+import Layout from '../layouts/deck'
 
 export default props => {
   const { mdx } = props.data
   const Component = props => <MDXRenderer {...props} children={mdx.code.body} />
 
-  return (
-    <Component
-      basepath={props.pageContext.basepath}
-      components={{
-        wrapper: Wrapper,
-      }}
-    />
-  )
+  return <Layout Component={Component} basepath={props.pageContext.basepath} />
 }
 
 export const query = graphql`