Show speaker notes in presenter mode

docs/index.mdx

@@ -33,12 +33,20 @@ import Box from 'superbox'
 3. Present
 
 ---
+
 ```
 <button>code example</button>
 ```
 
 <Notes>
-  Hi this is some notes
+  <ul>
+    <li>
+      Hi these are notes
+    </li>
+    <li>
+      And it's React!
+    </li>
+  </ul>
 </Notes>
 
 ---

src/Flex.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { space, color } from 'styled-system'
+import { space, width, color } from 'styled-system'
 
 const Flex = styled.div([], {
   display: 'flex',
@@ -7,6 +7,10 @@ const Flex = styled.div([], {
   '@media print': {
     display: 'none'
   }
-}, props => props.css, space, color)
+}, props => props.css,
+  space,
+  width,
+  color
+)
 
 export default Flex

src/Notes.js

@@ -3,14 +3,29 @@ import { withDeck } from './context'
 import { withSlide } from './Slide'
 
 export default withDeck(withSlide(class extends React.Component {
-  componentDidUpdate () {
-    console.log(
-      this.props.children,
-      this.props.slide,
-      this.props.deck
-    )
+  setNotes = (props) => {
+    const { slide, deck, children } = props
+    if (!slide.index) return
+    deck.addNotes({
+      index: slide.index,
+      children
+    })
   }
 
+  componentWillMount () {
+    this.setNotes(this.props)
+  }
+
+  /* todo
+  componentWillUpdate (next) {
+    this.setNotes(next)
+  }
+
+  shouldComponentUpdate (next) {
+    return next.children !== this.props.children
+  }
+  */
+
   render () {
     return false
   }

src/Presenter.js

@@ -12,6 +12,7 @@ export const Presenter = ({
   length,
   slides = [],
   mode,
+  notes = {},
   ...props
 }) => {
   const Next = slides[index + 1]
@@ -24,11 +25,10 @@ export const Presenter = ({
         height: '100vh'
       }}
     >
-      <Flex
-        my='auto'
-        css={{ alignItems: 'flex-start' }}>
+      <Flex my='auto'>
         <Box
           mx='auto'
+          width={5/8}
           css={{
             border: '1px solid rgba(128, 128, 128, 0.25)'
           }}>
@@ -38,21 +38,36 @@ export const Presenter = ({
             </Root>
           </Zoom>
         </Box>
-        <Box
+        <Flex
+          width={1/4}
           mx='auto'
           css={{
-            border: '1px solid rgba(128, 128, 128, 0.25)'
+            flex: 'none',
+            flexDirection: 'column'
           }}>
-          <Zoom zoom={1/4}>
-            <Root {...props}>
-              {Next && (
-                <Slide>
-                  <Next />
-                </Slide>
-              )}
-            </Root>
-          </Zoom>
-        </Box>
+          <Box
+            mx='auto'
+            css={{
+              border: '1px solid rgba(128, 128, 128, 0.25)'
+            }}>
+            <Zoom zoom={1/4}>
+              <Root {...props}>
+                {Next && (
+                  <Slide>
+                    <Next />
+                  </Slide>
+                )}
+              </Root>
+            </Zoom>
+          </Box>
+          <Box
+            py={3}
+            css={{
+              flex: 'auto'
+            }}>
+            {notes[index]}
+          </Box>
+        </Flex>
       </Flex>
       <Flex mt='auto' px={3} py={3}>
         <Mono>Slide {index} of {length}</Mono>

src/index.js

@@ -51,7 +51,8 @@ export class SlideDeck extends React.Component {
   state = {
     length: this.props.slides.length,
     index: 0,
-    mode: modes.normal
+    mode: modes.normal,
+    notes: {}
   }
 
   update = fn => this.setState(fn)
@@ -106,6 +107,15 @@ export class SlideDeck extends React.Component {
     this.setState({ index })
   }
 
+  addNotes = ({ index, children }) => {
+    this.setState(state => ({
+      notes: {
+        ...state.notes,
+        [index]: children
+      }
+    }))
+  }
+
   componentDidMount () {
     document.body.addEventListener('keydown', this.handleKeyDown)
     window.addEventListener('hashchange', this.handleHashChange)
@@ -147,6 +157,7 @@ export class SlideDeck extends React.Component {
     const context = {
       ...this.state,
       slides,
+      addNotes: this.addNotes
     }
 
     return (