Adjust parsing in loader

cli.js

@@ -1,16 +1,64 @@
 #!/usr/bin/env node
-
+const meow = require('meow')
 const open = require('react-dev-utils/openBrowser')
+const chalk = require('chalk')
 const dev = require('./lib/dev')
 
-const opts = {
+const config = require('pkg-conf').sync('mdx-deck')
+
+const log = (...args) => {
+  console.log(
+    chalk.magenta('[mdx-deck]'),
+    ...args
+  )
 }
+log.error = (...args) => {
+  console.log(
+    chalk.red('[err]'),
+    ...args
+  )
+}
+
+const cli = meow(`
+  Usage
+
+    $ mdx-deck deck.mdx
+
+    $ mdx-deck build deck.mdx
+
+  Options
+
+    -p --port   Dev server port
+
+    --no-open   Prevent from opening in default browser
+
+`, {
+  flags: {
+    port: {
+      type: 'string',
+      alias: 'p'
+    },
+    open: {
+      type: 'boolean',
+      alias: 'o',
+      default: true
+    }
+  }
+})
+
+const [ entry ] = cli.input
+
+if (!entry) cli.showHelp(0)
+
+const opts = Object.assign({
+  entry,
+}, config, cli.flags)
 
 dev(opts)
   .then(res => {
     const url = 'http://localhost:' + res.port
     open(url)
-    console.log(url)
+    log('listening on', chalk.magenta(url))
   })
   .catch(err => {
     console.error(err)

docs/Layout.js

@@ -0,0 +1 @@
+import React from 'react'

lib/SlideDeck.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MDXProvider } from '@mdx-js/tag'
 import styled, { ThemeProvider } from 'styled-components'
-import { color } from 'styled-system'
+import { width, height, color } from 'styled-system'
 import debounce from 'lodash.debounce'
 
 import defaultTheme from './theme'
@@ -16,7 +16,8 @@ export const dec = state => state.index > 0
 const CarouselRoot = styled.div([], {
   display: 'flex',
   overflowX: 'auto',
-  width: '100vw',
+  width: '100%',
+  height: '100%',
   scrollSnapType: 'mandatory',
   '::-webkit-scrollbar': {
     display: 'none'
@@ -78,8 +79,8 @@ export const Slide = styled.div([], {
   justifyContent: 'center',
   flexDirection: 'column',
   overflow: 'hidden',
-  width: '100vw',
+  width: '100%',
-  height: '90vh'
+  height: '100%'
 }, color)
 
 Slide.defaultProps = {
@@ -87,6 +88,8 @@ Slide.defaultProps = {
   bg: 'background'
 }
 
+export const Root = styled.div([], { backgroundColor: 'tomato' }, width, height)
+
 export default class SlideDeck extends React.Component {
   static propTypes = {
     slides: PropTypes.array.isRequired,
@@ -95,7 +98,9 @@ export default class SlideDeck extends React.Component {
   static defaultProps = {
     slides: [],
     theme: defaultTheme,
-    components: defaultComponents
+    components: defaultComponents,
+    width: '100vw',
+    height: '100vh',
   }
 
   state = {
@@ -106,7 +111,6 @@ export default class SlideDeck extends React.Component {
   update = fn => this.setState(fn)
 
   handleKeyDown = e => {
-    console.log(e)
     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
     switch (e.key) {
       case 'ArrowRight':
@@ -133,14 +137,19 @@ export default class SlideDeck extends React.Component {
     const {
       slides,
       theme,
-      components
+      components,
+      width,
+      height
     } = this.props
     const { index } = this.state
+    console.log(slides.map(Slide => {
+      return <Slide />
+    }))
 
     return (
       <ThemeProvider theme={theme}>
         <MDXProvider components={components}>
-          <div>
+          <Root width={width} height={height}>
             <Carousel
               index={index}
               onScroll={index => {
@@ -155,7 +164,7 @@ export default class SlideDeck extends React.Component {
             <samp>{this.state.index + 1}/{this.state.length}</samp>
             <button onClick={e => this.update(dec)}>previous</button>
             <button onClick={e => this.update(inc)}>next</button>
-          </div>
+          </Root>
         </MDXProvider>
       </ThemeProvider>
     )

lib/dev.js

@@ -116,7 +116,7 @@ const start = async (opts = {}) => {
   config.plugins.push(
     new webpack.DefinePlugin({
       OPTIONS: JSON.stringify(opts),
-      // APP_FILENAME: JSON.stringify(opts.entry),
+      APP_FILENAME: JSON.stringify(opts.entry),
       HOT_PORT: JSON.stringify(hotPort)
     })
   )

lib/entry.js

@@ -10,7 +10,6 @@ import slides, {
   meta
 } from '../docs/index.mdx'
 
-
 class App extends React.Component {
   render () {
     const {
@@ -24,6 +23,7 @@ class App extends React.Component {
         slides={slides}
         theme={theme}
         components={components}
+        height='100vh'
       />
     )
   }

lib/loader.js

@@ -16,11 +16,13 @@ module.exports = async function (src) {
     .map(str => str.trim())
     .map(str => str.replace(EXREG, ''))
     .map(str => {
-      const lines = str.split('\n\n')
+      const lines = str.split('\n')
       inlineModules.push(
         ...lines.filter(str => MODREG.test(str))
       )
       return lines.filter(str => !MODREG.test(str))
+        .filter(Boolean)
+        .join('\n')
     })
 
   const {
@@ -37,7 +39,6 @@ export const meta = ${stringifyObject(data)}
 export default [
   ${slides.join(',\n\n')}
 ]`
-  // console.log(code)
 
   return callback(null, code)
 }

package.json

@@ -3,8 +3,11 @@
   "version": "1.0.0-0",
   "description": "",
   "main": "index.js",
+  "bin": {
+    "mdx-deck": "./cli.js"
+  },
   "scripts": {
-    "start": "./cli.js"
+    "start": "./cli.js docs/index.mdx"
   },
   "keywords": [],
   "author": "Brent Jackson",
@@ -12,14 +15,17 @@
   "dependencies": {
     "@mdx-js/tag": "^0.14.1",
     "chalk": "^2.4.1",
+    "clipboardy": "^1.2.3",
     "debounce": "^1.1.0",
     "get-port": "^4.0.0",
     "gray-matter": "^4.0.1",
     "koa": "^2.5.2",
     "koa-webpack": "^5.1.0",
     "lodash.throttle": "^4.1.1",
+    "meow": "^5.0.0",
     "mini-html-webpack-plugin": "^0.2.3",
     "ok-cli": "^2.0.9",
+    "pkg-conf": "^2.1.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "prop-types": "^15.6.2",
     "react-dev-utils": "^5.0.1",