MDX Slide Parsing and CLI

README.md

@@ -44,4 +44,4 @@ ReactJS based Presentation Library
 
 ## FAQ
 
-@TODO
+@TODO

bin/actions.js

@@ -0,0 +1,51 @@
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const path = require('path');
+const config = require('../webpack.config');
+
+const port = 3000;
+
+const options = {
+  hot: true
+};
+
+const launchServer = (configUpdates = {}) => {
+  const customConfig = { ...config, ...configUpdates };
+  const server = new WebpackDevServer(webpack(customConfig), options);
+
+  server.listen(port, 'localhost', function(err) {
+    if (err) {
+      console.log(err);
+    }
+    console.log('WebpackDevServer listening at localhost:', port);
+  });
+};
+
+const launchMDXServer = mdxFilePath => {
+  if (!mdxFilePath) {
+    // developer error - must supply an entry file path
+    throw new Error('MDX file path must be provided.');
+  }
+
+  const cliRoot = path.resolve(__dirname, '..');
+  const absoluteMdxFilePath = path.resolve(mdxFilePath);
+  const nodeModules = path.resolve(__dirname, '../node_modules');
+
+  const configUpdates = {
+    mode: 'development',
+    context: cliRoot,
+    entry: './mdx-slides/index.js',
+    resolve: {
+      alias: {
+        'spectacle-user-mdx': absoluteMdxFilePath
+      },
+      modules: [nodeModules]
+    }
+  };
+
+  launchServer(configUpdates);
+};
+
+module.exports = {
+  launchMDXServer
+};

bin/args.js

@@ -0,0 +1,32 @@
+const yargs = require('yargs');
+const validatePresentationMode = require('./validate/presentation-mode');
+
+const validate = async parser => {
+  const { argv } = parser;
+  const { src } = argv;
+
+  return await validatePresentationMode(src);
+};
+
+const args = () =>
+  yargs
+    .usage(`Usage: spectacle -s <file>`)
+
+    // MDX File
+    .option('src', {
+      alias: 's',
+      describe: 'Path to a file from which a presentation will be generated.',
+      default: 'slides.mdx',
+      type: 'string'
+    })
+
+    // Logistical
+    .help()
+    .alias('help', 'h')
+    .version()
+    .alias('version', 'v')
+    .strict();
+
+module.exports = {
+  parse: () => validate(args())
+};

bin/cli.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+const args = require('./args');
+const actions = require('./actions');
+
+const main = () =>
+  Promise.resolve()
+    // Parse arguments.
+    .then(args.parse)
+    .then(parsedInput => {
+      const mdxFilePath = parsedInput.mdx;
+      if (mdxFilePath) {
+        actions.launchMDXServer(mdxFilePath);
+      }
+      // add future actions here
+      else {
+        throw new Error('Unsupported action.');
+      }
+    })
+    .catch(err => {
+      // Try to get full stack, then full string if not.
+      console.error(err.stack || err.toString());
+      process.exit(1);
+    });
+
+if (require.main === module) {
+  main();
+}

bin/validate/presentation-mode.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const fs = require('fs');
+
+const isMDXFileType = extension => extension === '.mdx' || extension === '.md';
+
+const fileExists = srcPath => {
+  const absSrcPath = path.resolve(srcPath);
+  return new Promise(resolve => {
+    fs.exists(absSrcPath, exists => {
+      resolve(exists);
+    });
+  });
+};
+
+const validatePresentationMode = async src => {
+  /* - the default action of the CLI is to boot up a presentation from a file
+   * - src defaults to `slides.mdx`
+   * - first, check to see if the file type is supported
+   * - then check to see if the default or provided file exists
+   */
+
+  const validatedValue = {};
+  const extension = path.extname(src);
+
+  if (isMDXFileType(extension)) {
+    validatedValue['mdx'] = src;
+  }
+  // support other file types here
+  else {
+    throw new Error(`The file type ${extension} is not currently supported.`);
+  }
+
+  const exists = await fileExists(src);
+  if (!exists) {
+    throw new Error(
+      `A file cannot be found at the path "${src}". Remember that the default file is ./slides.mdx`
+    );
+  }
+
+  return validatedValue;
+};
+
+module.exports = validatePresentationMode;

examples/JS/TestJS.js → examples/js/test-js.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Deck from '../../src/components/Deck.js';
-import Slide from '../../src/components/Slide.js';
-import SlideElementWrapper from '../../src/components/SlideElementWrapper';
+import Deck from '../../src/components/deck.js';
+import Slide from '../../src/components/slide.js';
+import SlideElementWrapper from '../../src/components/slide-element-wrapper';
 
 const TestJs = () => (
   <Deck loop={true}>
@@ -12,12 +12,12 @@ const TestJs = () => (
     <Slide>
       <p> Slide 3! </p>
       <SlideElementWrapper elementNum={0}>
-        <div>Hey, just one "animated" slide element here</div>
+        <div>{`Hey, just one "animated" slide element here`}</div>
       </SlideElementWrapper>
     </Slide>
     <Slide>
-      <p>I'm a static slide element that should always show</p>
-      <p>This means that we don't need a SlideElementWrapper</p>
+      <p>{`I'm a static slide element that should always show`}</p>
+      <p>{`This means that we don't need a SlideElementWrapper`}</p>
       <SlideElementWrapper elementNum={0}>
         <p slide-element="true"> ZERO Slide 4 x 3! </p>
       </SlideElementWrapper>
@@ -27,7 +27,7 @@ const TestJs = () => (
       <SlideElementWrapper elementNum={2}>
         <p slide-element="true"> TWO Slide 4 x 3! </p>
       </SlideElementWrapper>
-      <p>I'm also a static non-animated "slide element"!</p>
+      <p>{`I'm also a static non-animated "slide element"!`}</p>
     </Slide>
     <div>HEY PHIL. YOU DOUBTED US???</div>
   </Deck>

examples/mdx/slides.mdx

@@ -0,0 +1,59 @@
+import Test from './test-component';
+export const testProp = 50;
+
+# Hello World 👋
+
+- one
+- two
+- three
+
+---
+
+## Next
+
+<Test height={testProp} />
+
+---
+
+# Write your Spectacle Presentations in Markdown
+
+## And seamlessly use React Components
+
+**How sweet is that**  
+**(super sweet)**
+
+---
+
+![datboi](https://pbs.twimg.com/media/CkjFUyTXEAEysBY.jpg)
+
+---
+
+###### Typography
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+Standard Text
+
+---
+
+> Example Quote
+
+---
+
+```javascript
+class SuperCoolComponent extends React.Component {
+  render() {
+    return <p>code slide works in markdown too whaaaaat</p>;
+  }
+}
+```

examples/mdx/test-component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Test = ({ height }) => {
+  return <div style={{ height, width: '100%', backgroundColor: 'yellow' }} />;
+};
+
+Test.propTypes = {
+  height: PropTypes.number.isRequired
+};
+
+export default Test;