From c9bc8407d81808603a2970b18499e1a941a05136 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 18 Aug 2015 21:09:27 -0700 Subject: [PATCH 1/5] Base formidable theme skeleton. --- index.jsx | 15 ++++++++++----- package.json | 4 ++-- presentation/deck.jsx | 4 ++-- themes/formidable/html.js | 22 ++++++++++++++++++++++ themes/formidable/index.css | 13 +++++++++++++ themes/formidable/index.js | 27 +++++++++++++++++++++++++++ themes/formidable/print.js | 1 + webpack.config.js | 12 ++++++++---- 8 files changed, 85 insertions(+), 13 deletions(-) create mode 100644 themes/formidable/html.js create mode 100644 themes/formidable/index.css create mode 100644 themes/formidable/index.js create mode 100644 themes/formidable/print.js diff --git a/index.jsx b/index.jsx index 3895d4a..c9b72a5 100644 --- a/index.jsx +++ b/index.jsx @@ -7,13 +7,18 @@ 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"; // 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..ce737e4 100644 --- a/presentation/deck.jsx +++ b/presentation/deck.jsx @@ -24,7 +24,7 @@ preloader([]); export default class extends React.Component { render() { return ( - + Wrangling @@ -50,7 +50,7 @@ export default class extends React.Component { - + TODO diff --git a/themes/formidable/html.js b/themes/formidable/html.js new file mode 100644 index 0000000..fee7169 --- /dev/null +++ b/themes/formidable/html.js @@ -0,0 +1,22 @@ +/*eslint-disable max-len, indent*/ +module.exports = function (data) { + return { + "200.html": data.defaultTemplate(), + "index.html": [ + "", + "", + "", + "", + "", + "", + "", + (data.css ? "" : ""), + "", + "", + "
", + (data.main ? "" : ""), + "", + "" + ].join("") + }; +}; 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..9699e70 --- /dev/null +++ b/themes/formidable/index.js @@ -0,0 +1,27 @@ +import theme from "spectacle/themes/default/index"; + +const colors = { + primary: "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..5d2ee55 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,22 +2,25 @@ 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 }); -webpackConfig.devtool = "source-map"; +// Source maps mess up CSS in dev. +// See: +//webpackConfig.devtool = "source-map"; 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 +36,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. From 65325fe6199e0da7e99700756a32eacadf9029b2 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 18 Aug 2015 21:24:11 -0700 Subject: [PATCH 2/5] Add formidable background. --- assets/img/polygons.svg | 1 + presentation/deck.jsx | 7 ++++--- themes/formidable/html.js | 2 +- webpack.config.js | 7 ++++--- 4 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 assets/img/polygons.svg 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/presentation/deck.jsx b/presentation/deck.jsx index ce737e4..e1f4340 100644 --- a/presentation/deck.jsx +++ b/presentation/deck.jsx @@ -13,19 +13,20 @@ import { import preloader from "spectacle/src/utils/preloader"; const images = { + polygon: require("../assets/img/polygons.svg"), city: require("spectacle/presentation/city.jpg"), logo: require("spectacle/presentation/formidable-logo.svg") }; -preloader([]); +preloader([images.city]); // Presentation // ------------ export default class extends React.Component { render() { return ( - - + + Wrangling diff --git a/themes/formidable/html.js b/themes/formidable/html.js index fee7169..64e78b0 100644 --- a/themes/formidable/html.js +++ b/themes/formidable/html.js @@ -10,7 +10,7 @@ module.exports = function (data) { "", "", "", - (data.css ? "" : ""), + ((data.css && /\.css$/.test(data.css)) ? "" : ""), "", "", "
", diff --git a/webpack.config.js b/webpack.config.js index 5d2ee55..1c46973 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,9 +11,10 @@ var webpackConfig = module.exports = getConfig({ html: html }); -// Source maps mess up CSS in dev. -// See: -//webpackConfig.devtool = "source-map"; +// Source maps mess up CSS in dev and the `data.css` thing is generally borked. +// See: https://github.com/FormidableLabs/spectacle/issues/50 +webpackConfig.output.cssFilename = null; +webpackConfig.devtool = "eval-source-map"; webpackConfig.module.loaders[0] = { test: /\.jsx?$/, From 128d7c2128d760b0b7c8d0a0144e17e9cfce365a Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 18 Aug 2015 21:47:56 -0700 Subject: [PATCH 3/5] Add text outline. --- presentation/deck.jsx | 14 ++++++++++++-- themes/formidable/html.js | 37 ++++++++++++++++++++----------------- webpack.config.js | 5 +++-- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/presentation/deck.jsx b/presentation/deck.jsx index e1f4340..5e32aa6 100644 --- a/presentation/deck.jsx +++ b/presentation/deck.jsx @@ -20,6 +20,14 @@ const images = { preloader([images.city]); +// Styles +// ------ +const styles = { + textShadowBlackOutline: ((s, c) => { + return `-${s} 0 ${c}, 0 ${s} ${c}, ${s} 0 ${c}, 0 -${s} ${c}`; + }("0.025em", "#777")) +}; + // Presentation // ------------ export default class extends React.Component { @@ -30,13 +38,15 @@ export default class extends React.Component { Wrangling - + Large Scale Frontend Web Applications -
+
@ryan_roemer diff --git a/themes/formidable/html.js b/themes/formidable/html.js index 64e78b0..4efa430 100644 --- a/themes/formidable/html.js +++ b/themes/formidable/html.js @@ -1,22 +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": data.defaultTemplate(), - "index.html": [ - "", - "", - "", - "", - "", - "", - "", - ((data.css && /\.css$/.test(data.css)) ? "" : ""), - "", - "", - "
", - (data.main ? "" : ""), - "", - "" - ].join("") + "200.html": html, + "index.html": html }; }; diff --git a/webpack.config.js b/webpack.config.js index 1c46973..927412e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,10 +12,11 @@ var webpackConfig = module.exports = getConfig({ }); // Source maps mess up CSS in dev and the `data.css` thing is generally borked. +// // See: https://github.com/FormidableLabs/spectacle/issues/50 -webpackConfig.output.cssFilename = null; -webpackConfig.devtool = "eval-source-map"; +webpackConfig.devtool = "source-map"; +// Hack the JS loader at known zeroeth slot. webpackConfig.module.loaders[0] = { test: /\.jsx?$/, include: [ From c5e9ab8ad2e1eafd1a1b2be755ae03a821c45c3f Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 18 Aug 2015 22:13:04 -0700 Subject: [PATCH 4/5] Add favicon --- assets/img/favicon.ico | Bin 0 -> 1150 bytes index.jsx | 5 +++++ presentation/deck.jsx | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 assets/img/favicon.ico diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..cca60a4f4a2d0c1afa66e4ed170b0baea0420f4e GIT binary patch literal 1150 zcmchXK?=e^3`M`-&P{P4-6;jZy6{{cuDjmFm6zxVV$$-5G>o(z(3U@8GQ6Km3I%rh zRuy!;;JF7*0B$NxX=ci60QBs5m^AKnX`8oro$Hq@seKHR6nOL6%HOZO@L6K*Jk_>7 zwBEn@Sq}yEf61?zqs=SLF!aBcPac5>Ix&6wj>dV#@5jDMc|Y5nhp#=}A@tAtTg>s6 f^B%E(&)Z#c9-gNk=jLOMWsV-)Z;j;nA1I9<2Ub&3 literal 0 HcmV?d00001 diff --git a/index.jsx b/index.jsx index c9b72a5..4e9806b 100644 --- a/index.jsx +++ b/index.jsx @@ -20,6 +20,11 @@ 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/presentation/deck.jsx b/presentation/deck.jsx index 5e32aa6..9d898a6 100644 --- a/presentation/deck.jsx +++ b/presentation/deck.jsx @@ -25,7 +25,7 @@ preloader([images.city]); const styles = { textShadowBlackOutline: ((s, c) => { return `-${s} 0 ${c}, 0 ${s} ${c}, ${s} 0 ${c}, 0 -${s} ${c}`; - }("0.025em", "#777")) + }("0.025em", "#ccc")) }; // Presentation From a3a9aa20b83fbe546f73571e6ff30b9106467096 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 18 Aug 2015 22:31:22 -0700 Subject: [PATCH 5/5] More styling, etc. --- presentation/deck.jsx | 23 ++++++++++++++--------- themes/formidable/index.js | 2 +- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/presentation/deck.jsx b/presentation/deck.jsx index 9d898a6..0897746 100644 --- a/presentation/deck.jsx +++ b/presentation/deck.jsx @@ -13,7 +13,8 @@ import { import preloader from "spectacle/src/utils/preloader"; const images = { - polygon: require("../assets/img/polygons.svg"), + 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") }; @@ -23,6 +24,9 @@ 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")) @@ -34,27 +38,28 @@ export default class extends React.Component { render() { return ( - + Wrangling - + Large Scale Frontend Web Applications -
+
- + @ryan_roemer - | + + | + - + surge2015.formidablelabs.com diff --git a/themes/formidable/index.js b/themes/formidable/index.js index 9699e70..7643da2 100644 --- a/themes/formidable/index.js +++ b/themes/formidable/index.js @@ -1,7 +1,7 @@ import theme from "spectacle/themes/default/index"; const colors = { - primary: "rgb(229, 44, 63)", + primary: "#d71920", // Lighter: "rgb(229, 44, 63)", secondary: "black", tertiary: "white" };