build slide decks in external repos

Author: dave thompson

.babelrc

@@ -1,4 +1,3 @@
-lib/index.js
 dist
 node_modules
 .DS_Store

.gitignore

@@ -25,20 +25,18 @@ Open `http://localhost:9001` in your browser.
 
 ## Create your presentation
 
-Fork and clone the repo, then:
+Clone the repo, then:
 
     > npm install
-    > cp -r ./presentations/example ./presentations/{your-presentation-directory}
+    > cp -r presentations/example {your-presentation-directory}
     > npm run build-dev {your-presentation-directory}
 
-Navigate to `http://localhost:9001` in your browser. Make changes to `{your-presentation-title}/slideList`, and they should be hot-loaded into your browser whenever you save.
+Navigate to `http://localhost:9001` in your browser. Make changes to `{your-presentation-directory}/index.js`, and they should be hot-loaded into your browser whenever you save.
 
 ## Create your slides
 
 Slides are normal React components that can be written with JSX and ES6. You're free to include whatever markup and styles you'd like.
 
-Include and order slides within `{your-presentation-title}/slideList`.
-
 I recommend using [glamorous](https://github.com/paypal/glamorous) to style slides, but CSS can also be imported from within slide source code.
 
     import './my-slide-styles.css';
@@ -53,22 +51,7 @@ Use the `CodeBlock` component to get js syntax highlighting and code editing.
       </CodeBlock>
     );
 
-## Publishing to Github pages
-
-Generate pages locally, push to master, and then [enable serving pages from master:docs/](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch).
-
-```bash
-npm run ghpages
-```
-
-## Package presentation as zip file
-
-Create a zip file containing a presentation within the `built-presentations` directory.
-Extract the zip file and open `index.html` to view the presentation.
-
-    > npm run package {your-presentation-directory}
-
 ## Screen sharing and remote meetings
 
-Slide transitions cause some screen sharing apps like WebEx to have significant lag.
+Slide transitions cause some screen sharing apps to have significant lag.
 Disable transitions by pressing `ctrl-t` while viewing the presentation in the browser.

README.md

@@ -1,10 +1,9 @@
 #!/bin/bash
 
-SLIDE_LIST="$1"
-if [ -z $SLIDE_LIST ]
-then
-  SLIDE_LIST="component-library"
-fi
-
-sed "s|--slide-list-dir--|../presentations/$SLIDE_LIST|g" ./lib/index.tpl.js > ./lib/index.js
-webpack
+dist="$(dirname ${1})/dist/$(basename ${1})"
+zipDist="${dist}/$(basename ${1}).zip"
+echo "building presentation ${1} -> ${dist}"
+rm -rf ${dist}
+webpack --config="webpack.config.js" --entry="${1}/index.js" --output-path="${dist}" --output-filename="index.js" && \
+echo "zipping presentation ${dist}/* -> ${zipDist}" && \
+zip -r "${zipDist}" "${dist}/"

bin/build

@@ -1,4 +1,5 @@
 #!/bin/bash
 
 npm run build $1
-webpack-dev-server --contentBase "dist/" --port 9001 --host 0.0.0.0 --inline true
+dist="$(dirname ${1})/dist/$(basename ${1})"
+webpack-dev-server --debug --entry=${1}/index.js --output-path=${dist} --output-filename=index.js --contentBase="${dist}/" --port 9001 --host 0.0.0.0 --inline true

bin/build-dev

@@ -2,23 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRedirect, hashHistory } from 'react-router';
 import App from './components/App';
-import slideList from './--slide-list-dir--/slideList';
 
 import './index.html';
 
-class AppWithSlides extends React.Component {
-  render() {
-    return <App {...this.props}>{slideList}</App>;
+export function renderSlideList(slideList) {
+  let AppWithSlides = (props) => {
+    return <App {...props}>{slideList}</App>;
   }
-}
 
-class AppWithNoTransitionsAndSlides extends React.Component {
-  render() {
-    return <App disableTransitions={true} {...this.props}>{slideList}</App>;
+  let AppWithNoTransitionsAndSlides = (props) => {
+    return <App disableTransitions={true} {...props}>{slideList}</App>;
   }
-}
 
-(() => {
   if (!window.React) {
     window.React = React; // Global React needed for React dev tools
   }
@@ -37,4 +32,4 @@ class AppWithNoTransitionsAndSlides extends React.Component {
   );
 
   ReactDOM.render(routes, window.document.getElementById("app"));
-})();
+}