Printer mode

Author: kenwheeler

README.markdown

@@ -27,6 +27,8 @@ Exporting a totally sweet looking PDF from your totally sweet looking Spectacle
 
 ![http://i.imgur.com/t6GL5Oc.png](http://i.imgur.com/t6GL5Oc.png)
 
+If you want to print your slides, and want a printer friendly version, simply repeat the above process but instead print from [http://localhost:3000/#/?export&print](http://localhost:3000/#/?export&print)
+
 ## Basic Concepts
 
 ### Main file

index.jsx

@@ -28,7 +28,7 @@ Presentation.contextTypes = {
   router: React.PropTypes.object
 }
 
-Presentation = Context(Presentation, {styles: config.theme, flux: flux});
+Presentation = Context(Presentation, {styles: config.theme, print: config.print, flux: flux});
 
 React.render(
   <Router history={new HashHistory}>

presentation/config.js

@@ -2,5 +2,6 @@ module.exports = {
   width: 1000,
   margin: 40,
   theme: require('../themes/default/index'),
+  print: require('../themes/default/print'),
   html: require('../themes/default/html')
 }

presentation/deck.jsx

@@ -30,7 +30,7 @@ export default class extends React.Component {
           <Heading size={2} fit caps textColor="black">
             Where You Can Write Your Decks In JSX
           </Heading>
-          <Link href="https://github.com/FormidableLabs/spectacle"><Text bold caps textColor="white">View on Github</Text></Link>
+          <Link href="https://github.com/FormidableLabs/spectacle"><Text bold caps textColor="tertiary">View on Github</Text></Link>
           <Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
         </Slide>
         <Slide transition={['slide']} bgColor="black">
@@ -67,12 +67,12 @@ export default class extends React.Component {
           <Heading caps fit>Flexible Layouts</Heading>
           <Layout>
             <Fill>
-              <Heading size={4} caps textColor="black" bgColor="white" margin={10}>
+              <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
                 Left
               </Heading>
             </Fill>
             <Fill>
-              <Heading size={4} caps textColor="black" bgColor="white" margin={10}>
+              <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
                 Right
               </Heading>
             </Fill>
@@ -85,14 +85,14 @@ export default class extends React.Component {
           </BlockQuote>
         </Slide>
         <Slide transition={['slide', 'spin']} bgColor="primary">
-          <Heading caps fit size={1} textColor="white">
+          <Heading caps fit size={1} textColor="tertiary">
             Smooth
           </Heading>
-          <Heading caps fit size={1} textColor="black">
+          <Heading caps fit size={1} textColor="secondary">
             Combinable Transitions
           </Heading>
         </Slide>
-        <Slide transition={['fade']} bgColor="black" textColor="primary" align="center middle">
+        <Slide transition={['fade']} bgColor="secondary" textColor="primary" align="center middle">
           <List>
             <ListItem><Appear>Inline style based theme system</Appear></ListItem>
             <ListItem><Appear>Autofit text</Appear></ListItem>
@@ -103,12 +103,12 @@ export default class extends React.Component {
           </List>
         </Slide>
         <Slide transition={['slide']} bgColor="primary">
-          <Heading size={1} caps fit textColor="white">
+          <Heading size={1} caps fit textColor="tertiary">
             Your presentations are interactive
           </Heading>
           <Interactive/>
         </Slide>
-        <Slide transition={['spin','slide']} bgColor="white">
+        <Slide transition={['spin','slide']} bgColor="tertiary">
           <Heading size={1} caps fit textColor="primary">
             Made with love in Seattle by
           </Heading>

src/slide.jsx

@@ -33,10 +33,18 @@ const Slide = React.createClass({
   },
   render() {
     let exportMode = false;
+    let printMode = false;
     if (this.context.router.state.location.query &&
         'export' in this.context.router.state.location.query) {
       exportMode = true;
+      if ('print' in this.context.router.state.location.query) {
+        printMode = true;
+      }
     }
+    let printStyles = printMode ? {
+      backgroundColor: 'white',
+      backgroundImage: 'none'
+    } : {};
     let styles = {
       outer: {
         position: exportMode ? 'relative' : 'absolute',
@@ -60,7 +68,7 @@ const Slide = React.createClass({
     };
     return (
       <div className="spectacle-slide"
-        style={[styles.outer, this.getStyles(), this.getTransitionStyles()]}>
+        style={[styles.outer, this.getStyles(), this.getTransitionStyles(), printStyles]}>
         <div style={[styles.inner]}>
           <div ref="content"
             style={[styles.content, this.context.styles.components.content]}>

src/utils/context.jsx

@@ -10,7 +10,16 @@ function context(Component, params) {
     },
 
     getChildContext() {
-      return params;
+      let styles = {};
+      if (this.props.location.query && 'print' in this.props.location.query) {
+        styles = params.print;
+      } else {
+        styles = params.styles;
+      }
+      return {
+        styles: styles,
+        flux: params.flux
+      };
     },
 
     render: function render() {

themes/default/index.js

@@ -30,7 +30,7 @@ module.exports = {
       display: 'inline-block'
     },
     quote: {
-      borderLeft: '1px solid #f9c300',
+      borderLeft: '1px solid ' + colors.primary,
       paddingLeft: 40,
       display: 'block',
       color: colors.primary,

themes/default/print.js

@@ -0,0 +1,156 @@
+var colors = {
+  primary: 'black',
+  secondary: 'black',
+  tertiary: 'black'
+};
+
+var fonts = {
+  primary: 'Open Sans Condensed',
+  secondary: 'Lobster Two',
+  tertiary: 'monospace'
+}
+
+module.exports = {
+  colors: colors,
+  fonts: fonts,
+  global: {
+    body: {
+      background: 'white',
+      fontFamily: fonts.primary,
+      fontWeight: 'normal',
+      fontSize: '2em',
+      color: 'black',
+      overflow: 'hidden'
+    },
+    '.hljs': {
+      background: 'white',
+      color: 'black'
+    },
+    '.hljs span': {
+      color: 'black !important'
+    }
+  },
+  components: {
+    blockquote: {
+      textAlign: 'left',
+      position: 'relative',
+      display: 'inline-block'
+    },
+    quote: {
+      borderLeft: '1px solid ' + colors.primary,
+      paddingLeft: 40,
+      display: 'block',
+      color: 'black',
+      fontSize: '4.9em',
+      lineHeight: 1,
+      fontWeight: 'bold',
+    },
+    cite: {
+      color: 'black',
+      display: 'block',
+      clear: 'left',
+      fontSize: '2em',
+      marginTop: '1em'
+    },
+    content: {
+      margin: 'auto'
+    },
+    codePane: {
+      pre: {
+        maxWidth: 800,
+        margin: 'auto',
+        fontSize: '1.5em',
+        fontWeight: 'normal',
+        fontFamily: fonts.tertiary
+      },
+      code: {
+        textAlign: 'left',
+        padding: 20,
+        fontWeight: 'normal'
+      }
+    },
+    code: {
+      color: 'black',
+      fontSize: '2.66em',
+      fontFamily: fonts.tertiary,
+      margin: '0.25em auto',
+      backgroundColor: 'rgba(0,0,0,0.15)',
+      padding: "0 10px",
+      borderRadius: 3
+    },
+    heading: {
+      h1: {
+        color: 'black',
+        fontSize: '7.05em',
+        fontFamily: fonts.primary,
+        lineHeight: 1,
+        fontWeight: 'bold',
+        margin: 0
+      },
+      h2: {
+        color: 'black',
+        fontSize: '5.88em',
+        fontFamily: fonts.primary,
+        lineHeight: 1,
+        fontWeight: 'bold',
+        margin: 0
+      },
+      h3: {
+        color: 'black',
+        fontSize: '4.9em',
+        fontFamily: fonts.secondary,
+        lineHeight: 1,
+        fontWeight: 'bold',
+        margin: '0.5em auto'
+      },
+      h4: {
+        color: 'black',
+        fontSize: '3.82em',
+        fontFamily: fonts.primary,
+        lineHeight: 1,
+        fontWeight: 'bold',
+        margin: '0.5em auto'
+      },
+      h5: {
+        color: 'black',
+        fontSize: '3.19em',
+        fontFamily: fonts.primary,
+        lineHeight: 1,
+        fontWeight: 'bold',
+        margin: '0.5em auto'
+      },
+      h6: {
+        color: 'black',
+        fontSize: '2.66em',
+        fontFamily: fonts.primary,
+        lineHeight: 1,
+        fontWeight: 'bold',
+        margin: '0.5em auto'
+      }
+    },
+    image: {
+      display: 'block',
+      margin: '0.5em auto'
+    },
+    link: {
+      textDecoration: 'none'
+    },
+    listItem: {
+      fontSize: '2.66em'
+    },
+    list: {
+      textAlign: 'left',
+      listStylePosition: 'inside',
+      padding: 0
+    },
+    s: {
+      strikethrough: {}
+    },
+    text: {
+      color: 'black',
+      fontSize: '2.66em',
+      fontFamily: fonts.primary,
+      margin: '0.25em auto'
+    }
+  }
+}