feat: display slides with webcam as background

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+public

cli.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+// Original source: https://raw.githubusercontent.com/jxnblk/mdx-deck/master/packages/mdx-deck/cli.js
+const path = require('path')
+const meow = require('meow')
+const execa = require('execa')
+const chalk = require('chalk')
+const fs = require('fs-extra')
+const pkg = require('./package.json')
+
+const log = (...args) => {
+  console.log(chalk.green('[mdx-deck]'), ...args)
+}
+log.error = (...args) => {
+  console.log(chalk.red('[err]'), ...args)
+}
+
+const cli = meow(
+  `
+  ${chalk.gray('Usage')}
+
+    $ ${chalk.green('mdx-deck deck.mdx')}
+
+    $ ${chalk.green('mdx-deck build deck.mdx')}
+
+  ${chalk.gray('Options')}
+
+      -h --host     Dev server host
+      -p --port     Dev server port
+      --no-open     Prevent from opening in default browser
+
+`,
+  {
+    description: chalk.green('@mdx-deck/lite ') + chalk.gray(pkg.description),
+    flags: {
+      port: {
+        type: 'string',
+        alias: 'p',
+        default: '8000',
+      },
+      host: {
+        type: 'string',
+        alias: 'h',
+        default: 'localhost',
+      },
+      open: {
+        type: 'boolean',
+        alias: 'o',
+        default: true,
+      },
+    },
+  }
+)
+
+const [cmd, file] = cli.input
+const filename = file || cmd
+
+if (!filename) cli.showHelp(0)
+
+process.env.__SRC__ = path.resolve(filename)
+
+const opts = Object.assign({}, cli.flags)
+
+let dev
+
+const gatsby = async (...args) => {
+  await execa('gatsby', ['clean'], {
+    cwd: __dirname,
+    stdio: 'inherit',
+    preferLocal: true,
+  })
+  return execa('gatsby', args.filter(Boolean), {
+    cwd: __dirname,
+    stdio: 'inherit',
+    preferLocal: true,
+  })
+}
+
+switch (cmd) {
+  case 'build':
+    gatsby('build').then(() => {
+      const public = path.join(__dirname, 'public')
+      const dist = path.join(process.cwd(), 'public')
+      if (public === dist) return
+      fs.copySync(public, dist)
+    })
+    break
+  case 'dev':
+  default:
+    gatsby(
+      'develop',
+      '--host',
+      opts.host,
+      '--port',
+      opts.port,
+      opts.open && '--open'
+    )
+    break
+}

decks/hello.mdx

@@ -5,3 +5,9 @@
 ## Another slide
 
 ---
+
+* foo
+* bar
+* baz
+
+---

gatsby-config.js

@@ -0,0 +1,44 @@
+const path = require('path')
+
+const src = process.env.__SRC__
+const dirname = path.dirname(src)
+
+module.exports = {
+  plugins: [
+    // {
+    //   resolve: '@mdx-deck/gatsby-plugin',
+    //   options: {
+    //     path: src,
+    //     dirname,
+    //   },
+    // },
+    {
+      resolve: 'gatsby-theme-mdx-deck',
+      // options: {
+      //   // enable or disable gatsby-plugin-mdx
+      //   mdx: false,
+      //   // source directory
+      //   contentPath: dirname,
+      //   // base path for routes generate by this theme
+      //   basePath: ''
+      // }
+    },
+    // {
+    //   resolve: 'gatsby-source-filesystem',
+    //   options: {
+    //     path: dirname + "/decks/",
+    //     ignore: [
+    //       'node_modules',
+    //       'public',
+    //       '.cache',
+    //     ]
+    //   },
+    // },
+    // {
+    //   resolve: 'gatsby-plugin-compile-es6-packages',
+    //   options: {
+    //     modules: ['mdx-deck', '@mdx-deck/themes', '@mdx-deck/gatsby-plugin'],
+    //   },
+    // },
+  ],
+}

package.json

@@ -5,6 +5,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "zoetic": "./cli.js"
+  },
   "repository": "[email protected]:kantord/zoetic.git",
   "author": "Dániel Kántor <[email protected]>",
   "description": "Markdown presentations using your webcam",
@@ -18,10 +21,15 @@
     "semantic-release": "^19.0.2"
   },
   "scripts": {
-    "prepare": "husky install",
-    "develop": "mdx-deck decks/hello.mdx"
+    "develop": "gatsby develop",
+    "start": "./cli.js hello.mdx",
+    "build": "./cli.js build hello.mdx",
+    "help": "./cli.js"
   },
   "dependencies": {
-    "mdx-deck": "^4.1.1"
+    "gatsby": "2.32.13",
+    "gatsby-theme-mdx-deck": "^4.1.0",
+    "mdx-deck": "^4.1.1",
+    "react-webcam": "^6.0.1"
   }
 }

src/gatsby-theme-mdx-deck/components/slide.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import useDeck from 'gatsby-theme-mdx-deck/src/hooks/use-deck'
+import useSwipe from 'gatsby-theme-mdx-deck/src/hooks/use-swipe'
+import Context from 'gatsby-theme-mdx-deck/src/context'
+import { modes } from 'gatsby-theme-mdx-deck/src/constants'
+
+
+export const Slide = ({ slide, index, preview, ...props }) => {
+  const outer = useDeck()
+  const swipeProps = useSwipe()
+  const context = {
+    ...outer,
+    index,
+    preview,
+  }
+
+  return (
+    <Context.Provider value={context}>
+      <div
+        style={{
+          background: "transparent",
+        }}
+        {...(!preview ? swipeProps : {})}
+        sx={{
+          boxSizing: 'border-box',
+          width: '100%',
+          height: context.mode === modes.print ? '100vh' : '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          position: 'relative',
+          color: 'text',
+          variant: 'styles.Slide',
+        }}>
+        {slide}
+      </div>
+    </Context.Provider>
+  )
+}
+
+export default Slide

src/gatsby-theme-mdx-deck/components/wrapper.js

@@ -0,0 +1,72 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import React, { Fragment, useState, useEffect } from 'react'
+import useDeck from 'gatsby-theme-mdx-deck/src/hooks/use-deck'
+import { modes } from 'gatsby-theme-mdx-deck/src/constants'
+import Webcam from "react-webcam";
+
+const DefaultProvider = props =>
+  React.createElement(Fragment, null, props.children)
+
+const WebcamAsBackground = () => {
+  return (
+    <Webcam
+      style={{
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
+        objectFit: "cover",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1000,
+      }}
+    />
+  )
+}
+
+export default props => {
+  const [height, setHeight] = useState('100vh')
+  const { mode, theme } = useDeck()
+
+  useEffect(() => {
+    // handle mobile safari height
+    setHeight(window.innerHeight)
+    const handleResize = e => {
+      setHeight(window.innerHeight)
+    }
+    const stopTouch = e => {
+      if (mode !== modes.normal) return
+      e.preventDefault()
+    }
+    window.addEventListener('resize', handleResize)
+    document.body.addEventListener('touchstart', stopTouch)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      document.body.removeEventListener('touchstart', stopTouch)
+    }
+  }, [mode])
+
+  const { Provider = DefaultProvider } = theme
+
+  return (
+    <Provider>
+      <WebcamAsBackground />
+      <div
+        style={{
+          background: "transparent"
+        }}
+        {...props}
+        sx={{
+          width: '100vw',
+          height: mode !== modes.print ? height : '100vh',
+          variant: 'styles.root',
+          '*': {
+            boxSizing: 'border-box',
+          },
+        }}
+      />
+    </Provider>
+  )
+}