Adjust embed component

packages/components/src/AspectRatioSlide.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import styled from '@emotion/styled'
 import FluidFontSize from './FluidFontSize'
 import useTheme from './useTheme'

packages/components/src/Embed.js

@@ -21,41 +21,61 @@ import { jsx } from '@emotion/core'
 import Provider from './Provider'
 import Slide from './Slide'
 import GoogleFonts from './GoogleFonts'
-import Ratio from './Ratio'
 import splitSlides from './splitSlides'
 
+// fix for regression in gatsby-theme
+import merge from 'lodash.merge'
+import defaultTheme from '@mdx-deck/themes/base'
+
 const Placeholder = ({ index }) => (
   <pre style={{ fontSize: 16 }}>not found: slide {index}</pre>
 )
 
+// fix for regression in gatsby-theme
+const mergeThemes = themes =>
+  themes.reduce(
+    (acc, theme) =>
+      typeof theme === 'function' ? theme(acc) : merge(acc, theme),
+    {}
+  )
+
 const wrapper = props => {
-  const { slides, theme, themes, ratio, zoom } = splitSlides(props)
+  const { slides, theme: baseTheme, themes, ratio, zoom } = splitSlides(props)
+  // fix for regression in gatsby-theme
+  const theme = mergeThemes([
+    defaultTheme,
+    baseTheme,
+    ...themes,
+    {
+      aspectRatio: ratio,
+    },
+  ])
   const Content = slides[props.slide - 1] || Placeholder
 
   return (
-    <Provider theme={theme} themes={themes}>
+    <Provider theme={theme}>
       <GoogleFonts />
-      <Ratio ratio={ratio}>
+      <Slide zoom={zoom}>
-        <Slide
+        <Content index={props.slide - 1} />
-          style={{
+      </Slide>
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            width: 100 / zoom + '%',
-            height: 100 / zoom + '%',
-            transformOrigin: '0 0',
-            transform: `scale(${zoom})`,
-          }}
-        >
-          <Content index={props.slide - 1} />
-        </Slide>
-      </Ratio>
     </Provider>
   )
 }
 
-export const Embed = ({ src: Deck, slide = 1, ratio = 9 / 16, zoom = 1 }) => (
+export const Embed = ({
-  <Deck components={{ wrapper }} slide={slide} ratio={ratio} zoom={zoom} />
+  src: Deck,
+  slide = 1,
+  ratio = 16 / 9,
+  zoom = 1,
+  ...props
+}) => (
+  <Deck
+    {...props}
+    components={{ wrapper }}
+    slide={slide}
+    ratio={ratio}
+    zoom={zoom}
+  />
 )
 
 export default Embed

packages/components/src/MDXDeck.js

@@ -1,7 +1,6 @@
-import React, { useContext, useReducer, useMemo } from 'react'
+import React, { useContext, useReducer } from 'react'
 import PropTypes from 'prop-types'
 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'
@@ -97,7 +96,6 @@ export const MDXDeck = props => {
         return Grid
       default:
         return BaseWrapper
-        break
     }
   }
 

packages/components/src/Notes.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { useDeck } from './context'
 
 export const Notes = props => {

packages/components/src/Presenter.js

@@ -7,7 +7,6 @@ import Clock from './Clock'
 
 export const Presenter = props => {
   const { slides, metadata, index } = props
-  const Current = slides[index]
   const Next = slides[index + 1]
   const { notes } = metadata[index] || {}
 

packages/components/src/Steps.js

@@ -1,5 +1,3 @@
-import React from 'react'
-import { useDeck } from './context'
 import useSteps from './useSteps'
 
 export const Steps = props => {

packages/components/src/splitSlides.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 export const splitSlides = props => {
+  console.log('splitSlides', props)
   const { theme, themes } = props
   const arr = React.Children.toArray(props.children)
   const splits = []