ryan-roemer · ryan-roemer · Aug 19, 2015 · Aug 19, 2015 · Aug 19, 2015 · Aug 19, 2015
diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico
diff --git a/assets/img/polygons.svg b/assets/img/polygons.svg
diff --git a/index.jsx b/index.jsx
@@ -7,13 +7,23 @@ import {Router, Route} from "react-router";
 import HashHistory from "react-router/lib/HashHistory";
 
 import Flux from "spectacle/src/flux/alt";
-
 import Deck from "./presentation/deck";
-import config from "spectacle/presentation/config";
 
-require("normalize.css");
-require("spectacle/themes/default/index.css");
-require("highlight.js/styles/monokai_sublime.css");
+// Configuration
+import config from "spectacle/presentation/config";
+config.theme = require("./themes/formidable/index");
+config.print = require("./themes/formidable/print");
+config.html = require("./themes/formidable/html");
+
+// Styling
+import "normalize.css";
+import "./themes/formidable/index.css";
+import "highlight.js/styles/monokai_sublime.css";
+
+// Hack the favicon into the build directory.
+// This _places_ it in build output.
+// See: https://github.com/HenrikJoreteg/hjs-webpack/issues/24
+import "file?name=favicon.ico!./assets/img/favicon.ico";
 
 // Flux
 const flux = new Flux();

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "hot": "WEBPACK_ENV=hot webpack-dev-server",
     "build": "webpack",
     "lint-node": "eslint -c .eslintrc-node webpack.*.js",
-    "lint-react": "eslint --ext .js,.jsx -c .eslintrc-react *.jsx presentation",
+    "lint-react": "eslint --ext .js,.jsx -c .eslintrc-react *.jsx presentation themes",
     "lint": "npm run lint-node && npm run lint-react",
     "test": "npm run lint"
   },
@@ -31,7 +31,7 @@
     "react": "^0.13.3",
     "react-hot-loader": "^1.2.8",
     "react-router": "^1.0.0-beta2",
-    "spectacle": "git+https://git@github.com/FormidableLabs/spectacle.git#v0.0.5",
+    "spectacle": "0.0.5",
     "style-loader": "^0.12.3",
     "stylus-loader": "^1.2.1",
     "url-loader": "^0.5.6",

diff --git a/presentation/deck.jsx b/presentation/deck.jsx
@@ -13,44 +13,60 @@ import {
 import preloader from "spectacle/src/utils/preloader";
 
 const images = {
+  polygons: require("../assets/img/polygons.svg"),
+  polygonsGray: require("../assets/img/polygons-gray.svg"),
   city: require("spectacle/presentation/city.jpg"),
   logo: require("spectacle/presentation/formidable-logo.svg")
 };
 
-preloader([]);
+preloader([images.city]);
+
+// Styles
+// ------
+const styles = {
+  title: {
+    secondary: "#dcb"
+  },
+  textShadowBlackOutline: ((s, c) => {
+    return `-${s} 0 ${c}, 0 ${s} ${c}, ${s} 0 ${c}, 0 -${s} ${c}`;
+  }("0.025em", "#ccc"))
+};
 
 // Presentation
 // ------------
 export default class extends React.Component {
   render() {
     return (
-      <Deck progress="bar" transition={["zoom", "slide"]} transitionDuration={800}>
-        <Slide transition={["zoom"]} bgColor="primary">
+      <Deck progress="bar" transition={["slide"]}>
+        <Slide transition={["slide"]} bgImage={images.polygons}>
           <Heading size={1} fit caps margin="-20px 0px">
             Wrangling
           </Heading>
-          <Heading size={1} fit caps margin="-20px 0px" textColor="black">
+          <Heading size={1} fit caps margin="-20px 0px" textColor={styles.title.secondary}>
             Large Scale
           </Heading>
           <Heading size={1} fit caps margin="-20px 0px">
             Frontend Web Applications
           </Heading>
           <div style={{display: "inline-block", marginTop: "2.5em"}}>
             <Link href="https://twitter.com/ryan_roemer">
-              <Text bold style={{display: "inline-block"}}>
+              <Text bold style={{display: "inline-block"}} textColor={styles.title.secondary}>
                 @ryan_roemer
               </Text>
             </Link>
-            <Text style={{display: "inline-block", "margin": "0px 0.35em"}}>|</Text>
+            <Text style={{display: "inline-block", "margin": "0px 0.35em"}}
+                  textColor={styles.title.secondary}>
+              |
+            </Text>
             <Link href="https://surge2015.formidablelabs.com">
-              <Text bold style={{display: "inline-block"}}>
+              <Text bold style={{display: "inline-block"}} textColor={styles.title.secondary}>
                 surge2015.formidablelabs.com
               </Text>
             </Link>
           </div>
         </Slide>
 
-        <Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
+        <Slide transition={["slide"]} bgImage={images.city} bgDarken={0.75}>
           <Appear fid="1">
             <Heading size={1} caps fit textColor="primary">
               TODO

diff --git a/themes/formidable/html.js b/themes/formidable/html.js
@@ -0,0 +1,25 @@
+/*eslint-disable max-len, indent*/
+module.exports = function (data) {
+
+  const html = [
+    "<!doctype html>",
+      "<html>",
+        "<head>",
+          "<meta charset=\"utf-8\"/>",
+          "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/>",
+          "<link href=\"http://fonts.googleapis.com/css?family=Lobster+Two:400,700\" rel=\"stylesheet\" type=\"text/css\">",
+          "<link href=\"http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700\" rel=\"stylesheet\" type=\"text/css\">",
+          ((data.css && /\.css$/.test(data.css)) ? "<link href=\"" + data.css + "\" rel=\"stylesheet\" type=\"text/css\" />" : ""),
+        "</head>",
+        "<body>",
+          "<div id=\"root\"></div>",
+          (data.main ? "<script src=\"" + data.main + "\"></script>" : ""),
+        "</body>",
+      "</html>"
+  ].join("");
+
+  return {
+    "200.html": html,
+    "index.html": html
+  };
+};
diff --git a/themes/formidable/index.css b/themes/formidable/index.css
@@ -0,0 +1,13 @@
+.spectacle-slide {
+  -webkit-transform-origin: center center;
+          transform-origin: center center;
+}
+
+/* Firefox */
+_:-moz-tree-row(hover), .spectacle-deck {
+  perspective: 1000px;
+}
+
+_:-moz-tree-row(hover), ul .appear {
+  display: inline;
+}
diff --git a/themes/formidable/index.js b/themes/formidable/index.js
@@ -0,0 +1,27 @@
+import theme from "spectacle/themes/default/index";
+
+const colors = {
+  primary: "#d71920", // Lighter: "rgb(229, 44, 63)",
+  secondary: "black",
+  tertiary: "white"
+};
+
+// Overrides
+// TODO: Have overrides of `colors` and `fonts` to pass in to a function in
+// spectacle itself.
+theme.colors = colors;
+theme.global.body.background = colors.primary;
+theme.global.body.color = colors.secondary;
+theme.progress.pacman.pacmanTop.background = colors.tertiary;
+theme.progress.pacman.pacmanBottom.background = colors.tertiary;
+theme.progress.pacman.point.borderColor = colors.tertiary;
+theme.progress.bar.bar.background = colors.tertiary;
+theme.progress.number.container.color = colors.tertiary;
+theme.components.quote.borderLeft = "1px solid " + colors.primary;
+theme.components.quote.color = colors.primary;
+theme.components.cite.color = colors.tertiary;
+theme.components.heading.h1.color = colors.tertiary;
+theme.components.heading.h2.color = colors.secondary;
+
+export default theme;
+
diff --git a/themes/formidable/print.js b/themes/formidable/print.js
@@ -0,0 +1 @@
+module.exports = require("spectacle/themes/default/print");
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,22 +2,27 @@
 
 var path = require("path");
 var getConfig = require("hjs-webpack");
-var config = require("spectacle/presentation/config");
+var html = require("./themes/formidable/html");
 
 var webpackConfig = module.exports = getConfig({
   in: "./index.jsx",
   out: "dist",
   clearBeforeBuild: true,
-  html: config.html
+  html: html
 });
 
+// Source maps mess up CSS in dev and the `data.css` thing is generally borked.
+//
+// See: https://github.com/FormidableLabs/spectacle/issues/50
 webpackConfig.devtool = "source-map";
 
+// Hack the JS loader at known zeroeth slot.
 webpackConfig.module.loaders[0] = {
   test: /\.jsx?$/,
   include: [
     path.join(__dirname, "index.jsx"),
     path.join(__dirname, "presentation"),
+    path.join(__dirname, "themes"),
 
     // Have to build spectacle as well.
     path.join(__dirname, "node_modules/spectacle/src"),
@@ -33,7 +38,8 @@ if (process.env.WEBPACK_ENV === "hot") {
   webpackConfig.module.loaders[0].loaders.unshift("react-hot");
 } else {
   webpackConfig.entry = webpackConfig.entry.filter(function (entry) {
-    return !/^webpack\/hot\//.test(entry);
+    return !/^webpack\/hot\//.test(entry) &&
+           !/^webpack-dev-server\/client/.test(entry);
   });
 
   // Only available with NPM devDependencies.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require("spectacle/themes/default/print");