diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000..cca60a4 Binary files /dev/null and b/assets/img/favicon.ico differ diff --git a/assets/img/polygons.svg b/assets/img/polygons.svg new file mode 100644 index 0000000..5899873 --- /dev/null +++ b/assets/img/polygons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.jsx b/index.jsx index 3895d4a..4e9806b 100644 --- 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 index cb30dab..7287ed2 100644 --- 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 index f921397..0897746 100644 --- a/presentation/deck.jsx +++ b/presentation/deck.jsx @@ -13,23 +13,36 @@ 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 ( - - + + Wrangling - + Large Scale @@ -37,20 +50,23 @@ export default class extends React.Component {

- + @ryan_roemer - | + + | + - + surge2015.formidablelabs.com

- + TODO diff --git a/themes/formidable/html.js b/themes/formidable/html.js new file mode 100644 index 0000000..4efa430 --- /dev/null +++ b/themes/formidable/html.js @@ -0,0 +1,25 @@ +/*eslint-disable max-len, indent*/ +module.exports = function (data) { + + const html = [ + "", + "", + "", + "", + "", + "", + "", + ((data.css && /\.css$/.test(data.css)) ? "" : ""), + "", + "", + "

", + (data.main ? "" : ""), + "", + "" + ].join(""); + + return { + "200.html": html, + "index.html": html + }; +}; diff --git a/themes/formidable/index.css b/themes/formidable/index.css new file mode 100644 index 0000000..74c8847 --- /dev/null +++ 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 new file mode 100644 index 0000000..7643da2 --- /dev/null +++ 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 new file mode 100644 index 0000000..afb69f2 --- /dev/null +++ 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 index 2b36713..927412e 100644 --- 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.