fix: improve mobile support

packages/gatsby-plugin/package.json

@@ -14,17 +14,22 @@
     "react-dom": "^16.10.0"
   },
   "devDependencies": {
+    "@types/theme-ui": "^0.6.0",
     "gatsby": "^2.14.0",
     "react": "^16.10.0",
     "react-dom": "^16.10.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.17",
     "@mdx-js/loader": "^1.5.3",
     "@mdx-js/mdx": "^1.5.3",
     "gatsby-page-utils": "^0.0.39",
     "gatsby-plugin-react-helmet": "^3.1.18",
     "hhmmss": "^1.0.0",
     "react-helmet": "^5.2.1",
+    "react-swipeable": "^6.2.0",
     "remark-emoji": "^2.0.2",
     "remark-images": "^2.0.0",
     "remark-unwrap-images": "^2.0.0",

packages/gatsby-plugin/src/control.js

@@ -0,0 +1,129 @@
+/** @jsx jsx */
+import { jsx, Button, IconButton, Flex, Box } from 'theme-ui'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faChevronLeft,
+  faChevronRight,
+  faExpand,
+  faPrint,
+  faTh,
+  faDesktop,
+  faThList,
+  faFilePowerpoint,
+} from '@fortawesome/free-solid-svg-icons'
+import { useDeck } from './context'
+import modes from './modes'
+import React, { useState, useRef } from 'react'
+
+const toolbarShowPeriod = 2 * 1000
+
+export default () => {
+  const context = useDeck()
+  const [showToolbar, setShowToolbar] = useState(false)
+  const closeToolbarTimeoutRef = useRef(null)
+  const toggleToolbar = () => {
+    if (closeToolbarTimeoutRef.current) {
+      clearTimeout(closeToolbarTimeoutRef.current)
+    }
+    closeToolbarTimeoutRef.current = setTimeout(() => {
+      setShowToolbar(false)
+    }, toolbarShowPeriod)
+    setShowToolbar(true)
+  }
+  React.useEffect(() => {
+    document.documentElement.addEventListener('mousedown', toggleToolbar)
+    document.documentElement.addEventListener('mousemove', toggleToolbar)
+    document.documentElement.addEventListener('touchend', toggleToolbar)
+    document.documentElement.addEventListener('touchmove', toggleToolbar)
+    document.documentElement.addEventListener('touchstart', toggleToolbar)
+    return () => {
+      if (closeToolbarTimeoutRef.current) {
+        clearTimeout(closeToolbarTimeoutRef.current)
+      }
+      document.documentElement.removeEventListener('mousedown', toggleToolbar)
+      document.documentElement.removeEventListener('mousemove', toggleToolbar)
+      document.documentElement.removeEventListener('touchend', toggleToolbar)
+      document.documentElement.removeEventListener('touchmove', toggleToolbar)
+      document.documentElement.removeEventListener('touchstart', toggleToolbar)
+    }
+  }, [context])
+  return (
+    <div
+      sx={{
+        position:
+          context.mode === modes.grid || context.mode === modes.print
+            ? 'fixed'
+            : 'absolute',
+        zIndex: 10,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        variant: 'styles.Footer',
+        color: 'white',
+        visibility: showToolbar ? 'visible' : 'hidden',
+      }}>
+      <Flex
+        sx={{
+          borderRadius: 5,
+          backgroundColor: 'black',
+          padding: 1,
+          opacity: '70%',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          margin: '0 auto',
+          width: 'max-content',
+        }}>
+        <IconButton
+          bg="transparent"
+          color="text"
+          onClick={() => context.toggleMode(modes.presenter)}>
+          <FontAwesomeIcon icon={faFilePowerpoint} size="2x" />
+        </IconButton>
+        <IconButton
+          bg="transparent"
+          color="text"
+          onClick={() => context.toggleMode(modes.print)}>
+          <FontAwesomeIcon icon={faPrint} size="2x" />
+        </IconButton>
+        <IconButton
+          bg="transparent"
+          color="text"
+          onClick={() =>
+            document.fullscreenElement
+              ? document.exitFullscreen()
+              : document.documentElement.requestFullscreen()
+          }>
+          <FontAwesomeIcon icon={faExpand} size="2x" />
+        </IconButton>
+        <IconButton bg="transparent" color="text" onClick={context.previous}>
+          <FontAwesomeIcon icon={faChevronLeft} size="2x" />
+        </IconButton>
+        <Box sx={{ marginTop: 'auto', marginBottom: 'auto' }}>
+          {context.index + 1} / {context.length + 1}
+        </Box>
+        <IconButton bg="transparent" color="text" onClick={context.next}>
+          <FontAwesomeIcon icon={faChevronRight} size="2x" />
+        </IconButton>
+        <IconButton
+          bg="transparent"
+          color="text"
+          onClick={() => context.toggleMode(modes.grid)}>
+          <FontAwesomeIcon icon={faTh} size="2x" />
+        </IconButton>
+        <IconButton
+          bg="transparent"
+          color="text"
+          onClick={() => context.toggleMode(modes.overview)}>
+          <FontAwesomeIcon icon={faThList} size="2x" />
+        </IconButton>
+        <IconButton
+          bg="transparent"
+          color="text"
+          onClick={() => context.setMode(modes.default)}>
+          <FontAwesomeIcon icon={faDesktop} size="2x" />
+        </IconButton>
+      </Flex>
+    </div>
+  )
+}

packages/gatsby-plugin/src/deck.js

@@ -4,11 +4,13 @@ import { ThemeProvider, merge } from 'theme-ui'
 import split from './split-slides'
 import { Context } from './context'
 import Keyboard from './keyboard'
+import { useSwipeWithCustomContext } from './use-swipe'
 import modes from './modes'
 import Storage from './storage'
 import Container from './container'
 import Slide from './slide'
 import baseTheme from './theme'
+import Control from './control'
 
 const getIndex = props => {
   if (!props.location) return 0
@@ -23,9 +25,8 @@ export default props => {
   const slide = slides[index]
 
   const [mode, setMode] = React.useState(modes.default)
-  const toggleMode = next => setMode(current =>
-    current === next ? modes.default : next
-  )
+  const toggleMode = next =>
+    setMode(current => (current === next ? modes.default : next))
 
   const [step, setStep] = React.useState(0)
   const [steps, setSteps] = React.useState(0)
@@ -54,8 +55,6 @@ export default props => {
     }
   }, [])
 
-  if (!slide) return false
-
   const context = {
     slides,
     slug,
@@ -80,7 +79,7 @@ export default props => {
     if (steps && step > 0) {
       setStep(n => n - 1)
     } else {
-      setIndex(n => n > 0 ? n - 1 : n)
+      setIndex(n => (n > 0 ? n - 1 : n))
       setStep(0)
       setSteps(0)
     }
@@ -90,27 +89,30 @@ export default props => {
     if (step < steps) {
       setStep(n => n + 1)
     } else {
-      setIndex(n => n < slides.length - 1 ? n + 1 : n)
+      setIndex(n => (n < slides.length - 1 ? n + 1 : n))
       setStep(0)
       setSteps(0)
     }
   }
 
   const theme = merge(baseTheme, props.theme || {})
 
+  const { ref, ...swipeHandlers } = useSwipeWithCustomContext({ context })
+
+  if (!slide) return false
+
   return (
     <Context.Provider value={context}>
+      <Control />
       <Keyboard />
       <Storage />
       <Helmet>
         {slides.head.children}
-        {theme.googleFont && <link rel='stylesheet' href={theme.googleFont} />}
+        {theme.googleFont && <link rel="stylesheet" href={theme.googleFont} />}
       </Helmet>
-      <ThemeProvider
-        theme={theme}
-        components={theme.components}>
+      <ThemeProvider theme={theme} components={theme.components}>
         <Container>
-          <Slide>
+          <Slide innerRef={ref} {...swipeHandlers}>
             {slide}
           </Slide>
         </Container>

packages/gatsby-plugin/src/slide.js

@@ -6,9 +6,11 @@ export default ({
   width = '100%',
   height = '100%',
   children,
+  innerRef,
   ...props
-}) =>
+}) => (
   <div
+    ref={innerRef}
     {...props}
     sx={{
       boxSizing: 'border-box',
@@ -27,3 +29,4 @@ export default ({
     }}>
     {children}
   </div>
+)

packages/gatsby-plugin/src/theme.js

@@ -4,6 +4,7 @@ export default {
     text: '#fff',
     background: '#000',
     backdrop: '#111',
+    primary: '#fff',
   },
   fonts: {
     body: 'system-ui, sans-serif',
@@ -69,5 +70,5 @@ export default {
     Footer: {
       px: 3,
     },
-  }
+  },
 }

packages/gatsby-plugin/src/use-swipe.js

@@ -0,0 +1,54 @@
+import { useSwipeable } from 'react-swipeable'
+import { useDeck } from './context'
+import modes from './modes'
+
+const toggleMode = next => state =>
+  state.mode === next ? { mode: modes.normal } : { mode: next }
+
+export const useSwipe = () => {
+  const context = useDeck()
+
+  const onSwipedLeft = e => {
+    context.next()
+  }
+
+  const onSwipedRight = e => {
+    context.previous()
+  }
+
+  const onSwipedUp = e => {
+    context.setMode(modes.presenter)
+  }
+
+  const onSwipedDown = e => {
+    context.setMode(modes.normal)
+  }
+
+  const props = useSwipeable({
+    onSwipedLeft,
+    onSwipedRight,
+    onSwipedUp,
+    onSwipedDown,
+  })
+
+  return props
+}
+
+export const useSwipeWithCustomContext = ({ context }) => {
+  const onSwipedLeft = e => {
+    context.next()
+  }
+
+  const onSwipedRight = e => {
+    context.previous()
+  }
+
+  const props = useSwipeable({
+    onSwipedLeft,
+    onSwipedRight,
+  })
+
+  return props
+}
+
+export default useSwipe