Merge pull request #387 from jxnblk/fix-gatsby-theme

Clean up gatsby-theme package

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,65 @@ 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,
+      Slide: {
+        maxWidth: '100%',
+        height: 'auto',
+      },
+    },
+  ])
   const Content = slides[props.slide - 1] || Placeholder
 
   return (
-    <Provider theme={theme} themes={themes}>
+    <Provider theme={theme}>
       <GoogleFonts />
-      <Ratio ratio={ratio}>
-        <Slide
-          style={{
-            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>
+      <Slide zoom={zoom}>
+        <Content index={props.slide - 1} />
+      </Slide>
     </Provider>
   )
 }
 
-export const Embed = ({ src: Deck, slide = 1, ratio = 9 / 16, zoom = 1 }) => (
-  <Deck components={{ wrapper }} slide={slide} ratio={ratio} zoom={zoom} />
+export const Embed = ({
+  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/gatsby-theme/README.md

@@ -11,7 +11,7 @@ _Note:_ This theme **requires MDX v1** and will not work with previous versions
 ```js
 // gatsby-config.js
 module.exports = {
-  __experimentalThemes: ['@mdx-deck/gatsby-theme'],
+  plugins: ['@mdx-deck/gatsby-theme'],
 }
 ```
 
@@ -50,7 +50,7 @@ The following options can be passed to the gatsby theme.
 ```js
 // gatsby-config.js
 module.exports = {
-  __experimentalThemes: [
+  plugins: [
     {
       resolve: '@mdx-deck/gatsby-theme',
       options: {

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

@@ -22,7 +22,7 @@ This is the MDX Deck Gatsby theme
 ```js
 // gatsby-config.js
 module.exports = {
-  __experimentalThemes: [
+  plugins: [
     '@mdx-deck/gatsby-theme',
   ]
 }

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

@@ -1 +0,0 @@
-export default () => false

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

@@ -1 +0,0 @@
-export default () => false

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

@@ -2,8 +2,6 @@ import React from 'react'
 import { navigate } from 'gatsby'
 import { Embed } from '@mdx-deck/components'
 import Root from './root'
-import Header from './header'
-import Footer from './footer'
 
 const Thumb = props => (
   <div
@@ -30,7 +28,6 @@ const Thumb = props => (
 
 export default props => (
   <Root>
-    <Header {...props} />
     <ul
       css={{
         listStyle: 'none',
@@ -57,6 +54,5 @@ export default props => (
         </li>
       ))}
     </ul>
-    <Footer {...props} />
   </Root>
 )

packages/gatsby-theme/src/splitter.js

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import MDXRenderer from 'gatsby-mdx/mdx-renderer'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
 import get from 'lodash.get'
 import Layout from '../layouts/index'
 
@@ -15,8 +15,8 @@ export default props => {
       ...node,
       slug: node.fields.deck,
       title: getTitle(node),
-      children: <MDXRenderer children={node.code.body} />,
-      Component: props => <MDXRenderer {...props} children={node.code.body} />,
+      children: <MDXRenderer children={node.body} />,
+      Component: props => <MDXRenderer {...props} children={node.body} />,
     }))
     .filter(node => node.parent.sourceInstanceName === 'decks')
   return <Layout {...props} decks={decks} />
@@ -31,9 +31,7 @@ export const query = graphql`
           fields {
             deck
           }
-          code {
-            body
-          }
+          body
           headings {
             depth
             value