Basic resize handling

README.md

@@ -8,10 +8,6 @@ npm i mdx-deck
 ```
 
 ````md
----
-imports:
-  - import Demo from './components/Demo'
----
 
 # This is the title of my deck
 
@@ -27,6 +23,7 @@ imports:
 
 ---
 
+import Demo from './components/Demo'
 
 <Demo />
 
@@ -40,4 +37,9 @@ imports:
 mdx-deck deck.mdx
 ```
 
+---
+
+- [ ] default styles
+- [ ] export build
+
 [MDX]: https://github.com/mdx-js/mdx

docs/index.mdx

@@ -1,5 +1,5 @@
 import Layout from './Layout'
-export { default as theme } from './theme'
+// export { default as theme } from './theme'
 
 # Hello
 

lib/SlideDeck.js

@@ -33,12 +33,18 @@ export class Carousel extends React.Component {
       this.isScroll = false
       return
     }
-    const { scrollLeft } = e.target
-    const rect = e.target.getBoundingClientRect()
+    const el = this.root.current
+    if (!el) return
+    const { scrollLeft } = el
+    const rect = el.getBoundingClientRect()
     const n = Math.round(scrollLeft / rect.width)
     this.props.onScroll(n)
   }, 200)
 
+  handleResize = debounce(e => {
+    this.scrollTo(this.props.index)
+  }, 200)
+
   scrollTo = (index) => {
     if (!this.root.current) return
     const el = this.root.current.querySelector('#slide-' + index)
@@ -47,10 +53,12 @@ export class Carousel extends React.Component {
   }
 
   componentDidMount () {
+    window.addEventListener('resize', this.handleResize)
     this.root.current.addEventListener('scroll', this.handleScroll)
   }
 
   componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize)
     this.root.current.removeEventListener('scroll', this.handleScroll)
   }
 
@@ -88,7 +96,12 @@ Slide.defaultProps = {
   bg: 'background'
 }
 
-export const Root = styled.div([], { backgroundColor: 'tomato' }, width, height)
+export const Root = styled.div([], {
+},
+  props => props.theme.css,
+  width,
+  height
+)
 
 export default class SlideDeck extends React.Component {
   static propTypes = {
@@ -142,9 +155,6 @@ export default class SlideDeck extends React.Component {
       height
     } = this.props
     const { index } = this.state
-    console.log(slides.map(Slide => {
-      return <Slide />
-    }))
 
     return (
       <ThemeProvider theme={theme}>

lib/components.js

@@ -21,14 +21,14 @@ Heading.defaultProps = {
 const h1 = props =>
   <Heading
     {...props}
-    fontSize={[ 4, 5, 6 ]}
+    fontSize={[ 3, 4, 5 ]}
   />
 
 const H2 = Heading.withComponent('h2')
 const h2 = props =>
   <H2
     {...props}
-    fontSize={[ 4, 5, 6 ]}
+    fontSize={[ 2, 3, 4 ]}
   />
 
 const a = styled.a([], {}, color)
@@ -39,5 +39,16 @@ a.defaultProps = {
 export default {
   h1,
   h2,
-  a
+  // h3,
+  // h4,
+  // h5,
+  // h6,
+  a,
+  // p,
+  // ul,
+  // ol,
+  // li,
+  // pre,
+  // code,
+  // img
 }

lib/theme.js

@@ -1,6 +1,12 @@
 export default {
+  fontSizes: [
+    16, 24, 32, 48, 64, 96, 128
+  ],
   colors: {
     text: '#000',
     background: '#fff',
+  },
+  css: {
+    textAlign: 'center'
   }
 }