Merge pull request #366 from codepunkt/themable_presenter

feat: themable Presenter

docs/theming.md

@@ -125,6 +125,7 @@ The following keys are available for theming:
 - `Slide`: CSS to apply to the wrapping Slide component
 - `components`: object of MDX components to render markdown
 - `Provider`: component for wrapping the entire app
+- `Presenter`: component for wrapping the presenter mode
 - `googleFont`: CSS HREF for adding a Google Font `<link>` tag
 
 ## Advanced Usage

packages/components/src/MDXDeck.js

@@ -4,6 +4,7 @@ import { Router, globalHistory, navigate } from '@reach/router'
 import { Global } from '@emotion/core'
 import { Swipeable } from 'react-swipeable'
 import merge from 'lodash.merge'
+import defaultTheme from '@mdx-deck/themes/base'
 
 import Provider from './Provider'
 import Slide from './Slide'
@@ -41,24 +42,17 @@ const getIndex = ({ basepath }) => {
   return index
 }
 
+const mergeThemes = themes =>
+  themes.reduce(
+    (acc, theme) =>
+      typeof theme === 'function' ? theme(acc) : merge(acc, theme),
+    {}
+  )
+
 const mergeState = (state, next) =>
   merge({}, state, typeof next === 'function' ? next(state) : next)
 const useState = init => useReducer(mergeState, init)
 
-const getWrapper = mode => {
-  switch (mode) {
-    case PRESENTER:
-      return Presenter
-    case OVERVIEW:
-      return Overview
-    case GRID:
-      return Grid
-    default:
-      return BaseWrapper
-      break
-  }
-}
-
 export const MDXDeckContext = React.createContext()
 
 const useDeckState = () => {
@@ -83,8 +77,9 @@ export const MDXDeckState = ({ children }) => {
 }
 
 export const MDXDeck = props => {
-  const { slides, basepath } = props
+  const { slides, basepath, theme: baseTheme, themes = [] } = props
   const { state, setState } = useDeckState(MDXDeckContext)
+  const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
 
   const index = getIndex(props)
 
@@ -92,6 +87,20 @@ export const MDXDeck = props => {
     return state.metadata[i] || {}
   }
 
+  const getWrapper = mode => {
+    switch (mode) {
+      case PRESENTER:
+        return theme.Presenter || Presenter
+      case OVERVIEW:
+        return Overview
+      case GRID:
+        return Grid
+      default:
+        return BaseWrapper
+        break
+    }
+  }
+
   const register = (index, meta) => {
     setState({
       metadata: {
@@ -155,7 +164,7 @@ export const MDXDeck = props => {
   const Wrapper = getWrapper(state.mode)
 
   return (
-    <Provider {...props} {...context}>
+    <Provider {...props} {...context} theme={theme}>
       <Catch>
         <Style {...context} />
         <Keyboard {...props} {...context} />

packages/components/src/Provider.js

@@ -1,23 +1,13 @@
 import React from 'react'
 import { ThemeProvider } from 'emotion-theming'
-import merge from 'lodash.merge'
 import { HeadProvider, UserHead } from './Head'
 import { MDXProvider } from '@mdx-js/react'
-import defaultTheme from '@mdx-deck/themes/base'
 import mdxComponents from './mdx-components'
 
 const DefaultProvider = props => <>{props.children}</>
 
-const mergeThemes = themes =>
-  themes.reduce(
-    (acc, theme) =>
-      typeof theme === 'function' ? theme(acc) : merge(acc, theme),
-    {}
-  )
-
 export const Provider = props => {
-  const { headTags, theme: baseTheme, themes = [], mdx } = props
-  const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
+  const { headTags, theme, mdx } = props
   const {
     Provider: UserProvider = DefaultProvider,
     components: themeComponents = {},

packages/components/src/index.js

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