From 1db1973071a0bfc7387019a4e007611a18593c38 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Sat, 28 Jul 2018 18:32:05 -0400 Subject: [PATCH] Adjust parsing in loader --- cli.js | 54 +++++++++++++++++++++++++++++++++++++++++++++--- docs/Layout.js | 1 + lib/SlideDeck.js | 27 ++++++++++++++++-------- lib/dev.js | 2 +- lib/entry.js | 2 +- lib/loader.js | 5 +++-- package.json | 8 ++++++- 7 files changed, 82 insertions(+), 17 deletions(-) create mode 100644 docs/Layout.js diff --git a/cli.js b/cli.js index 3472c9d..a087465 100755 --- a/cli.js +++ b/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) diff --git a/docs/Layout.js b/docs/Layout.js new file mode 100644 index 0000000..b45dfaa --- /dev/null +++ b/docs/Layout.js @@ -0,0 +1 @@ +import React from 'react' diff --git a/lib/SlideDeck.js b/lib/SlideDeck.js index 90a9d38..2807e9c 100644 --- a/lib/SlideDeck.js +++ b/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', - height: '90vh' + width: '100%', + 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 + })) return ( -
+ { @@ -155,7 +164,7 @@ export default class SlideDeck extends React.Component { {this.state.index + 1}/{this.state.length} -
+ ) diff --git a/lib/dev.js b/lib/dev.js index a0c006f..a1ea287 100644 --- a/lib/dev.js +++ b/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) }) ) diff --git a/lib/entry.js b/lib/entry.js index 554a0ef..a1b83f3 100644 --- a/lib/entry.js +++ b/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' /> ) } diff --git a/lib/loader.js b/lib/loader.js index 51085ed..971f948 100644 --- a/lib/loader.js +++ b/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) } diff --git a/package.json b/package.json index f6ab087..90ffbc4 100644 --- a/package.json +++ b/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",