jan 2019 details and update to spectical slide lib

.babelrc

@@ -1,26 +1,26 @@
 {
   "presets": [
-    [ "es2015", { "loose": true, "modules" : false } ],
-    "stage-0",
-    "react"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ],
   "plugins": [
-    "transform-decorators-legacy",
+    "react-hot-loader/babel",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
   ],
   "env": {
     "production": {
       "plugins": [
-        "transform-es2015-modules-commonjs",
+        ["@babel/plugin-transform-modules-commonjs"],
         "transform-react-remove-prop-types",
-        "transform-react-constant-elements",
-        "transform-react-inline-elements",
-        "transform-runtime",
-        "transform-decorators-legacy",
-      ],
+        "@babel/plugin-transform-react-constant-elements",
+        "@babel/plugin-transform-react-inline-elements",
+        "@babel/plugin-transform-runtime",
+        ["@babel/plugin-proposal-decorators", { "legacy": true }]
+      ]
     },
     "test": {
       "plugins": [
-        "transform-es2015-modules-commonjs"
+        "@babel/plugin-transform-modules-commonjs"
       ]
     }
   }

.eslintrc

@@ -0,0 +1,21 @@
+---
+"extends":
+  - "formidable/configurations/es6-react"
+
+"rules":
+  "indent": [2, 2, {"SwitchCase": 1}]
+  "max-len": 0
+  "no-magic-numbers": 0
+  "react/prefer-es6-class": 0
+  "react/no-multi-comp": 0
+  "quotes": [2, "single"]
+"env":
+  "browser": true,
+  "node": true
+"globals":
+  "afterEach": true,
+  "describe": true,
+  "expect": true,
+  "it": true,
+  "jest": true,
+  "test": true

README.md

@@ -0,0 +1,56 @@
+# Spectacle Boilerplate
+
+## Contents
+
+- [Reference](#reference)
+- [Getting Started](#getting-started)
+- [Tutorial](#tutorial)
+- [Build & Deployment](#build-deployment)
+
+## Reference
+
+The Spectacle core API is available in the [Spectacle Docs](https://github.com/FormidableLabs/spectacle/blob/master/README.md).
+
+## Getting Started
+
+1. Download the boilerplate
+
+   ```sh
+   git clone git@github.com:FormidableLabs/spectacle-boilerplate.git
+   ```
+
+2. Remove existing version control
+
+   ```sh
+   rm -R .git
+   ```
+
+3. Install dependencies
+
+   ```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
+
+```sh
+yarn build
+```
+
+If you want to deploy the slideshow to surge, run
+
+```sh
+yarn deploy
+```

assets/deck.example

@@ -0,0 +1,27 @@
+return (
+  <Deck transition={['zoom','slide']} transitionDuration={800}>
+    <Slide bgColor="primary">
+      <Heading size={1} fit caps>
+        React Presentations
+      </Heading>
+      <Heading size={2} fit caps>
+        Written In React
+      </Heading>
+    </Slide>
+    <Slide bgColor="black">
+      <Heading size={1} fit textColor="primary" textFont="secondary">
+        Wait What?
+      </Heading>
+    </Slide>
+    <Slide bgColor="primary" textColor="black" align="center top">
+      <Heading size={1} textColor="black" textFont="primary">
+        Thats right
+      </Heading>
+      <List>
+        <ListItem>Inline style based theme system</ListItem>
+        <ListItem>Autofit Text</ListItem>
+        <ListItem>PDF Export</ListItem>
+      </List>
+    </Slide>
+  </Deck>
+)

assets/interactive.js

@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+import { Heading } from "spectacle";
+
+export default class Interactive extends Component {
+  constructor() {
+    super();
+    this.state = {
+      count: 0
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState({
+      count: this.state.count + 1
+    });
+  }
+  render() {
+    const styles = {
+      padding: 20,
+      background: "black",
+      minWidth: 300,
+      marginTop: 20,
+      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
+            </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,16 +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>LNUG MC slidedeck</title>
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/prism/1.3.0/themes/prism-tomorrow.css">
-</head>
-<body>
-  <div id="root"></div>
-  <script src="https://cdn.jsdelivr.net/prism/1.3.0/prism.js" type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-jsx.min.js" type="text/javascript"></script>
-  <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>LNUG 🎤 London Node User Group emcee</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,6 +1,32 @@
 import React from "react";
-import { render } from "react-dom";
+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";
 
-render(<Presentation/>, document.getElementById("root"));
+const CustomErrorReporter = ({ error }) => <Redbox error={error} />;
+
+CustomErrorReporter.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired
+};
+
+ReactDOM.render(
+  <AppContainer errorReporter={CustomErrorReporter}>
+    <Presentation />
+  </AppContainer>,
+  document.getElementById("root")
+);
+
+if (module.hot) {
+  module.hot.accept("./presentation", () => {
+    const NextPresentation = require("./presentation").default;
+    ReactDOM.render(
+      <AppContainer errorReporter={CustomErrorReporter}>
+        <NextPresentation />
+      </AppContainer>,
+      document.getElementById("root")
+    );
+  });
+}