Update boilerplate to match new Getting Started tutorial (#70)

.eslintrc

@@ -8,7 +8,7 @@
   "no-magic-numbers": 0
   "react/prefer-es6-class": 0
   "react/no-multi-comp": 0
-
+  "quotes": [2, "single"]
 "env":
   "browser": true,
   "node": true

README.md

@@ -4,45 +4,53 @@
 
 - [Reference](#reference)
 - [Getting Started](#getting-started)
+- [Tutorial](#tutorial)
 - [Build & Deployment](#build-deployment)
 
 ## Reference
 
-The Spectacle core API is available at [https://github.com/FormidableLabs/spectacle/blob/master/README.md](https://github.com/FormidableLabs/spectacle/blob/master/README.md).
+The Spectacle core API is available in the [Spectacle Docs](https://github.com/FormidableLabs/spectacle/blob/master/README.md).
 
 ## Getting Started
 
-After downloading the boilerplate, your first order of business is to open a terminal and run 
-```bash
-yarn
-```
-or 
-```bash
-npm install
-```
-if you're about that life.
+1. Download the boilerplate
 
-Next, run 
-```bash
-rm -R .git
-```
-to remove the existing version control.
+   ```sh
+   git clone [email protected]:Formidable.com/spectacle-boilerplate.git
+   ```
 
-Then, to start up the local server, run
-```bash
-npm start
-```
+2. Remove existing version control
+
+   ```sh
+   rm -R .git
+   ```
+
+3. Install dependencies
 
-Open a browser and hit [http://localhost:3000](http://localhost:3000), and we are ready to roll.
+   ```sh
+   yarn install
+   ```
+
+4. Start the webpack server. The server will run at [`localhost:3000`](http://localhost:3000).
+
+   ```sh
+   yarn start
+   ```
+
+## Tutorial
+
+If want you a step-by-step guide for getting started with Spectacle, a basic tutorial is available [here](https://github.com/FormidableLabs/spectacle/blob/master/docs/tutorial.md).
 
 ## Build & Deployment
 
 Building the dist version of the project is as easy as running
-```bash
-npm run build
+
+```sh
+yarn build
 ```
 
-If you want to deploy the slideshow to surge, run 
-```bash
-npm run deploy
+If you want to deploy the slideshow to surge, run
+
+```sh
+yarn deploy
 ```

assets/deck.example

@@ -20,7 +20,6 @@ return (
       <List>
         <ListItem>Inline style based theme system</ListItem>
         <ListItem>Autofit Text</ListItem>
-        <ListItem>react-router navigation</ListItem>
         <ListItem>PDF Export</ListItem>
       </List>
     </Slide>

assets/interactive.js

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { Heading } from "spectacle";
+import React, { Component } from 'react';
+import { Heading } from 'spectacle';
 
 export default class Interactive extends Component {
   constructor() {
@@ -17,27 +17,32 @@ export default class Interactive extends Component {
   render() {
     const styles = {
       padding: 20,
-      background: "black",
+      background: 'black',
       minWidth: 300,
       marginTop: 20,
-      textTransform: "uppercase",
-      border: "none",
-      color: "white",
-      outline: "none",
-      fontWeight: "bold",
-      fontSize: "2em"
+      textTransform: 'uppercase',
+      border: 'none',
+      color: 'white',
+      outline: 'none',
+      fontWeight: 'bold',
+      fontSize: '2em'
     };
     return (
       <div>
-      {this.state.count < 5 ?
-        <div>
-          <Heading fit size={5} textColor="black">
-            The button has been clicked {this.state.count} times
+        {this.state.count < 5 ? (
+          <div>
+            <Heading fit size={5} textColor="black">
+              The button has been clicked {this.state.count} times
+            </Heading>
+            <button style={styles} type="button" onClick={this.handleClick}>
+              Click Me
+            </button>
+          </div>
+        ) : (
+          <Heading size={5} fit caps textColor="black">
+            Easy there pal
           </Heading>
-          <button style={styles} type="button" onClick={this.handleClick}>Click Me</button>
-        </div> :
-          <Heading size={5} fit caps textColor="black">Easy there pal</Heading>
-        }
+        )}
       </div>
     );
   }

index.html

@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
-  <title>Spectacle Boilerplate</title>
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
-</head>
-<body>
-  <div id="root"></div>
-  <script src="./dist/bundle.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width initial-scale=1 user-scalable=no"
+    />
+    <title>Spectacle Boilerplate</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./dist/bundle.js"></script>
+  </body>
 </html>

index.js

@@ -1,12 +1,12 @@
-import React from "react";
-import PropTypes from "prop-types";
-import ReactDOM from "react-dom";
-import { AppContainer } from "react-hot-loader";
-import Redbox from "redbox-react";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import Redbox from 'redbox-react';
+import { AppContainer } from 'react-hot-loader';
 
-import Presentation from "./presentation";
+import Presentation from './presentation';
 
-const CustomErrorReporter = ({ error }) => <Redbox error={ error } />;
+const CustomErrorReporter = ({ error }) => <Redbox error={error} />;
 
 CustomErrorReporter.propTypes = {
   error: PropTypes.instanceOf(Error).isRequired
@@ -16,16 +16,17 @@ ReactDOM.render(
   <AppContainer errorReporter={CustomErrorReporter}>
     <Presentation />
   </AppContainer>,
-  document.getElementById("root"),
+  document.getElementById('root')
 );
 
 if (module.hot) {
-  module.hot.accept("./presentation", () => {
-    const NextPresentation = require("./presentation").default;    ReactDOM.render(
+  module.hot.accept('./presentation', () => {
+    const NextPresentation = require('./presentation').default;
+    ReactDOM.render(
       <AppContainer errorReporter={CustomErrorReporter}>
         <NextPresentation />
       </AppContainer>,
-      document.getElementById("root"),
+      document.getElementById('root')
     );
   });
 }

package.json

@@ -4,14 +4,14 @@
   "description": "ReactJS Powered Presentation Framework",
   "main": "lib/index.js",
   "scripts": {
-    "clean": "rimraf dist",
     "build": "npm run clean & cross-env NODE_ENV=production webpack --config webpack.config.production.js",
-    "lint": "eslint --ext .js,.jsx .",
+    "clean": "rimraf dist",
     "deploy": "npm run build && surge -p .",
     "export": "spectacle-renderer --delay 3000",
+    "lint": "eslint --ext .js,.jsx .",
     "start": "cross-env NODE_ENV=development node server.js"
   },
-  "author": "",
+  "author": "Formidable Labs <[email protected]> (https://formidable.com)",
   "license": "MIT",
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
@@ -35,6 +35,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@webpack-cli/migrate": "^0.1.2",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
     "cross-env": "^5.2.0",
@@ -43,6 +44,7 @@
     "eslint-config-formidable": "^4.0.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.11.1",
     "express": "^4.16.3",
     "file-loader": "^2.0.0",