Add modal components

packages/gatsby-theme-next/README.md

@@ -15,15 +15,15 @@ Prototype for MDX Deck v3
 - [x] mode-switch keys
 - [x] mode state
 - [ ] mode components
-  - [ ] Presenter
-  - [ ] Overview
-  - [ ] Grid
+  - [x] Presenter
+  - [x] Overview
+  - [x] Grid
   - [ ] Print
+- [x] add legacy theme transformer
+- [x] export theme/themes API
 - [-] slide styles
 - [-] theme-ui
 - [ ] port default themes over
-- [ ] add legacy theme transformer
-- [ ] export theme/themes API
 - [ ] react helmet ??? how can this even work??
   - [ ] custom Head component
   - [ ] remove Head in slides parser

packages/gatsby-theme-next/src/components/deck.js

@@ -15,6 +15,8 @@ import { modes } from '../constants'
 import convertLegacyTheme from '../convert-legacy-theme'
 
 import Presenter from './presenter'
+import Overview from './overview'
+import Grid from './grid'
 
 const Keyboard = () => {
   useKeyboard()
@@ -64,6 +66,12 @@ export default ({
     case modes.presenter:
       Mode = Presenter
       break
+    case modes.overview:
+      Mode = Overview
+      break
+    case modes.grid:
+      Mode = Grid
+      break
   }
 
   return (

packages/gatsby-theme-next/src/components/grid.js

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { navigate } from '@reach/router'
+import useDeck from '../hooks/use-deck'
+import { modes } from '../constants'
+import SlideList from './slide-list'
+
+export default ({ slides }) => {
+  const { slug, setState } = useDeck()
+  return (
+    <div
+      sx={{
+        minHeight: '100vh',
+        color: 'white',
+        bg: 'black',
+      }}>
+      <div
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+        }}>
+        <SlideList
+          slides={slides}
+          onClick={i => {
+            navigate([slug, i].join('/'))
+            setState({ mode: modes.normal })
+          }}
+          sx={{
+            width: '25%',
+            m: 0,
+          }}
+        />
+      </div>
+    </div>
+  )
+}

packages/gatsby-theme-next/src/components/overview.js

@@ -0,0 +1,63 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { navigate } from '@reach/router'
+import useDeck from '../hooks/use-deck'
+import Zoom from './zoom'
+import Slide from './slide'
+import SlideList from './slide-list'
+
+export default ({ slides, children }) => {
+  const { slug, index, length } = useDeck()
+
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        height: '100vh',
+        fontFamily: 'ui',
+        color: 'white',
+        bg: 'black',
+      }}>
+      <div
+        sx={{
+          width: 100 / 6 + '%',
+          minWidth: 0,
+          flex: 'none',
+          height: '100vh',
+          overflowY: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          p: 2,
+        }}>
+        <SlideList
+          slides={slides}
+          zoom={1 / 6}
+          onClick={i => {
+            navigate([slug, i].join('/'))
+          }}
+        />
+      </div>
+      <div
+        sx={{
+          width: 500 / 6 + '%',
+          py: 3,
+          pr: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100vh',
+        }}>
+        <div
+          sx={{
+            flex: '1 1 auto',
+          }}>
+          <Zoom zoom={5 / 6}>{children}</Zoom>
+        </div>
+        <div
+          sx={{
+            py: 3,
+          }}>
+          {index} / {length - 1}
+        </div>
+      </div>
+    </div>
+  )
+}

packages/gatsby-theme-next/src/components/presenter.js

@@ -31,7 +31,7 @@ export const Presenter = ({ slides, children }) => {
             width: '75%',
             p: 3,
           }}>
-          <Zoom>{children}</Zoom>
+          <Zoom zoom={3 / 4}>{children}</Zoom>
         </div>
         <div
           sx={{

packages/gatsby-theme-next/src/components/slide-list.js

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import React, { useEffect, useRef } from 'react'
+import Zoom from './zoom'
+import Slide from './slide'
+import useDeck from '../hooks/use-deck'
+
+const noop = () => {}
+
+export const SlideList = ({
+  slides = [],
+  ratio = 16 / 9,
+  zoom = 1 / 4,
+  onClick = noop,
+  ...props
+}) => {
+  const { index } = useDeck()
+  const thumb = useRef(null)
+
+  useEffect(() => {
+    const el = thumb.current
+    if (!el) return
+    if (typeof el.scrollIntoViewIfNeeded === 'function') {
+      el.scrollIntoViewIfNeeded()
+    }
+  })
+
+  return (
+    <React.Fragment>
+      {slides.map((slide, i) => (
+        <div
+          {...props}
+          key={i}
+          role="link"
+          ref={i === index ? thumb : null}
+          onClick={e => {
+            onClick(i)
+          }}
+          style={
+            index === i
+              ? {
+                  position: 'relative',
+                  zIndex: 1,
+                }
+              : null
+          }
+          sx={{
+            m: 2,
+            cursor: 'pointer',
+            outline: index === i ? `4px solid cyan` : null,
+          }}>
+          <Zoom zoom={zoom} ratio={ratio}>
+            <Slide slide={slide} preview />
+          </Zoom>
+        </div>
+      ))}
+    </React.Fragment>
+  )
+}
+
+export default SlideList

packages/gatsby-theme-next/src/components/zoom.js

@@ -7,7 +7,6 @@ export const Zoom = ({
   ...props
 }) => (
   <div
-    {...props}
     sx={{
       width: '100%',
       position: 'relative',

packages/gatsby-theme-next/src/hooks/use-steps.js

@@ -7,6 +7,6 @@ export default length => {
     if (typeof context.register !== 'function') return
     context.register(context.index, 'steps', length)
   }, [])
-  // if (context.preview) return length
+  if (context.preview) return length
   return context.step
 }