Merge remote-tracking branch 'upstream/master' into components-providers-themes

CHANGELOG.md

@@ -1,6 +1,18 @@
 
 # Changelog
 
+## v1.5.7 2018-08-04
+
+- Add more built-in themes
+
+## v1.5.6 2018-08-05
+
+- Add invisible buttons to left and right for use on mobile devices
+
+## v1.5.5 2018-08-05
+
+- Update docs
+
 ## v1.5.4 2018-08-04
 
 - Add docs for syntax highlighting

README.md

@@ -103,13 +103,7 @@ export { dark as theme } from 'mdx-deck/themes'
 # Dark Theme
 ```
 
-The following themes are available from `mdx-deck/themes`:
-
-- `theme`: default theme with white background
-- `dark`: black background dark theme
-- `future`: dark theme with Avenir Next
-- `condensed`: dark theme with Roboto Condensed
-- `yellow`: bright yellow theme with Roboto Condensed
+For a list of available themes see the [Themes Docs](docs/themes.md).
 
 ### Custom Themes
 
@@ -191,19 +185,22 @@ The following keys are available for theming:
 By default fenced code blocks do not include any syntax highlighting.
 Syntax highlighting in fenced code blocks can be enabled by providing a `prism` style object in a theme.
 The syntax highlighting is built with [react-syntax-highlighter][] and [PrismJS][].
+Create a `theme.js` file and export it via the `MDX` file.
 
 ```js
-// example theme
+export { default as theme } from './theme'
+//...
+```
+
+```js
+// example theme.js
 import { future } from 'mdx-deck/themes'
 import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
 
 export default {
   ...future,
   prism: {
-    style: okaidia,
-    languages: {
-      html: prismHTML
-    }
+    style: okaidia
   }
 }
 ```
@@ -212,17 +209,17 @@ By default, only JavaScript and JSX are enabled for syntax highlighting to keep
 To enable other languages, add a `languages` object to the `prism` object in the theme.
 
 ```js
-// example theme
+// example theme.js
 import { future } from 'mdx-deck/themes'
 import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
-import prismHTML from 'react-syntax-highlighter/languages/prism/html'
+import prismRuby from 'react-syntax-highlighter/languages/prism/ruby'
 
 export default {
   ...future,
   prism: {
     style: okaidia,
     languages: {
-      html: prismHTML
+      ruby: prismRuby
     }
   }
 }

docs/Counter.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from 'styled-components'
+import { space, color } from 'styled-system'
+
+const Root = styled.div([], {
+  display: 'flex',
+  alignItems: 'center'
+})
+
+const Button = styled.button([], {
+  appearance: 'none',
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontWeight: 'bold',
+  borderRadius: '4px',
+  border: 'none',
+  width: '2em',
+  '&:focus': {
+    outline: 'none',
+    boxShadow: '0 0 0 2px magenta'
+  }
+}, space, color)
+Button.defaultProps = {
+  m: 0,
+  px: 3,
+  py: 2,
+  color: 'background',
+  bg: 'text'
+}
+
+const Samp = styled.samp([], {
+}, space)
+
+
+export default class Counter extends React.Component {
+  state = {
+    count: 0
+  }
+
+  inc = () => {
+    this.setState(state => ({count: state.count + 1}))
+  }
+
+  dec = () => {
+    this.setState(state => ({count: state.count - 1}))
+  }
+
+  render() {
+    return (
+      <Root>
+        <Button ml='auto' onClick={this.dec}>-</Button>
+        <Samp mx={3}>{this.state.count}</Samp>
+        <Button mr='auto' onClick={this.inc}>+</Button>
+      </Root>
+    )
+  }
+}

docs/index.mdx

@@ -1,7 +1,7 @@
-export { default as theme } from './theme'
+export { future as theme } from '../themes'
 import { Image, Notes, Appear } from '../dist'
-import Layout from './Layout'
 import { Invert, Split, SplitRight } from '../layouts'
+import Counter from './Counter'
 
 # mdx-deck
 
@@ -41,7 +41,7 @@ import Box from 'superbox'
 
 ```notes
 - These are speaker notes
-- And they won't rendered in your slide
+- And they won't be rendered in your slide
 ```
 ---
 > “Blockquotes are essential to any good presentation”
@@ -68,6 +68,12 @@ import Box from 'superbox'
 </ul>
 ---
 
+### Real React Components
+
+<Counter />
+
+---
+
 <Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
 
 ---
@@ -97,7 +103,7 @@ Prop | Type | Description
 `bg` | string | sets background color
 
 ---
-export default Layout
+export default Invert
 
 # Get started :sunglasses:
 [GitHub](https://github.com/jxnblk/mdx-deck)

docs/themes.md

@@ -0,0 +1,128 @@
+
+# Themes
+
+![](images/default.png)
+Default
+
+```mdx
+export { default as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/big.png)
+Big
+
+```mdx
+export { big as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/book.png)
+Book
+
+```mdx
+export { book as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/code.png)
+Code
+
+```mdx
+export { code as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/comic.png)
+Comic
+
+```mdx
+export { comic as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/condensed.png)
+Condensed
+
+```mdx
+export { condensed as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/dark.png)
+Dark
+
+```mdx
+export { dark as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/future.png)
+Future
+
+```mdx
+export { future as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/hack.png)
+Hack
+
+```mdx
+export { hack as theme } from 'mdx-deck/themes'
+```
+
+---
+
+<!--
+![](images/lobster.png)
+Lobster
+-->
+
+![](images/notes.png)
+Notes
+
+```mdx
+export { notes as theme } from 'mdx-deck/themes'
+```
+
+---
+
+<!--
+![](images/rye.png)
+Rye
+-->
+
+![](images/script.png)
+Script
+
+```mdx
+export { script as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/swiss.png)
+Swiss
+
+```mdx
+export { swiss as theme } from 'mdx-deck/themes'
+```
+
+---
+
+![](images/yellow.png)
+Yellow
+
+```mdx
+export { yellow as theme } from 'mdx-deck/themes'
+```
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdx-deck",
-  "version": "1.5.4",
+  "version": "1.5.7",
   "description": "MDX-based slide deck presentations",
   "main": "dist/index.js",
   "bin": {
@@ -20,7 +20,7 @@
   "author": "Brent Jackson",
   "license": "MIT",
   "dependencies": {
-    "@compositor/webfont": "^1.0.38",
+    "@compositor/webfont": "^1.0.39",
     "@mdx-js/mdx": "^0.15.0-1",
     "@mdx-js/tag": "^0.14.1",
     "chalk": "^2.4.1",

src/Dots.js

@@ -30,7 +30,8 @@ Dot.propTypes = {
 Dot.defaultProps = {
   m: 0,
   p: 1,
-  bg: 'currentcolor',
+  color: 'text',
+  bg: 'text',
 }
 
 export const Dots = ({

src/Provider.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import styled from 'styled-components'
+import Dots from './Dots'
+import { modes, dec, inc } from './index'
+
+const Bottom = styled.div([], {
+  position: 'fixed',
+  left: 0,
+  right: 0,
+  bottom: 0,
+})
+
+const Button = styled.div([], {
+  cursor: 'pointer',
+  width: '64px',
+  height: '100vh'
+})
+const Previous = styled(Button)([], {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+})
+const Next = styled(Button)([], {
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+})
+
+export default class Provider extends React.Component {
+  render () {
+    const {
+      children,
+      mode,
+      index,
+      length,
+      update,
+    } = this.props
+
+    if (mode !== modes.normal) {
+      return (
+        <React.Fragment>
+          {children}
+        </React.Fragment>
+      )
+    }
+
+    return (
+      <React.Fragment>
+        {children}
+        <Bottom>
+          <Dots
+            mx='auto'
+            mb={2}
+            index={index}
+            length={length}
+            onClick={index => {
+              update({ index })
+            }}
+          />
+        </Bottom>
+        <Previous
+          role='button'
+          title='Previous Slide'
+          onClick={e => {
+            update(dec)
+          }}
+        />
+        <Next
+          role='button'
+          title='Next Slide'
+          onClick={e => {
+            update(inc)
+          }}
+        />
+      </React.Fragment>
+    )
+  }
+}

src/index.js

@@ -5,6 +5,7 @@ import { ThemeProvider } from 'styled-components'
 import debounce from 'lodash.debounce'
 
 import { Provider as ContextProvider } from './context'
+import DefaultProvider from './Provider'
 import Carousel from './Carousel'
 import Slide from './Slide'
 import Dots from './Dots'
@@ -233,7 +234,7 @@ export class SlideDeck extends React.Component {
               ...defaultComponents,
               ...components
             }}>
-            <Provider {...this.state}>
+            <Provider {...this.state} update={this.update}>
               {mode === modes.overview ? (
                 <Overview
                   slides={slides}
@@ -253,20 +254,12 @@ export class SlideDeck extends React.Component {
                         key={i}
                         id={'slide-' + i}
                         index={i}
+                        className='Slide'
                       >
                         <Component />
                       </Slide>
                     ))}
                   </Carousel>
-                  <Dots
-                    mt={-32}
-                    mx='auto'
-                    index={index}
-                    length={length}
-                    onClick={index => {
-                      this.setState({ index })
-                    }}
-                  />
                 </Wrapper>
               )}
             </Provider>

src/layouts/Invert.js

@@ -7,6 +7,9 @@ const Invert = styled.div([], {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  '& a': {
+    color: 'inherit'
+  }
 }, color)
 
 Invert.defaultProps = {

src/themes/base.js

@@ -6,7 +6,7 @@ export default {
   ],
   colors: {
     text: '#000',
-    background: 'transparent',
+    background: 'white',
     link: '#07c',
     pre: '#f0f',
     preBackground: '#333',

src/themes/big.js

@@ -0,0 +1,23 @@
+import theme from './base'
+
+const blue = '#0af'
+
+export default {
+  ...theme,
+  font: '"Bowlby One SC", sans-serif',
+  colors: {
+    text: '#dff',
+    background: '#011',
+    blue,
+    link: blue,
+    pre: blue,
+    preBackground: '#000',
+    code: blue,
+  },
+  heading: {
+    fontWeight: 600
+  },
+  quote: {
+    fontWeight: 600
+  }
+}

src/themes/book.js

@@ -0,0 +1,26 @@
+import base from './base'
+
+const white = '#fffceb'
+const black = '#11111f'
+const blue = '#2d5dd7'
+
+export default {
+  ...base,
+  font: '"Crimson Text", serif',
+  colors: {
+    text: black,
+    background: white,
+    link: blue
+  },
+  css: {
+    textAlign: 'left',
+    fontSize: '16px',
+    '@media screen and (min-width:64em)': {
+      fontSize: '32px',
+    },
+    '& .Slide > div': {
+      minWidth: '80vw',
+      minHeight: '60vh'
+    }
+  }
+}

src/themes/code.js

@@ -0,0 +1,18 @@
+import base from './base'
+
+const blue = '#00cdf1'
+const black = '#003d48'
+const link = '#0800e3'
+
+export default {
+  ...base,
+  font: '"Source Code Pro", monospace',
+  monospace: '"Source Code Pro", monospace',
+  colors: {
+    text: black,
+    background: blue,
+    link: link,
+    pre: blue,
+    preBackground: black,
+  }
+}

src/themes/comic.js

@@ -0,0 +1,15 @@
+import base from './base'
+
+const white = '#fffceb'
+const black = '#351e38'
+const blue = '#2d5dd7'
+
+export default {
+  ...base,
+  font: '"Gloria Hallelujah", cursive',
+  colors: {
+    text: black,
+    background: white,
+    link: blue
+  },
+}

src/themes/hack.js

@@ -0,0 +1,29 @@
+import base from './base'
+
+const green = '#42ff71'
+
+export default {
+  ...base,
+  font: '"IBM Plex Mono", monospace',
+  monospace: '"IBM Plex Mono", monospace',
+  colors: {
+    text: green,
+    background: '#000',
+    link: green,
+    pre: '#000',
+    preBackground: green,
+    code: '#000',
+    codeBackground: green,
+  },
+  css: {
+    textAlign: 'left',
+    fontSize: '16px',
+    '@media screen and (min-width:64em)': {
+      fontSize: '32px',
+    },
+    '& .Slide > div': {
+      minWidth: '80vw',
+      minHeight: '60vh'
+    }
+  }
+}

src/themes/index.js

@@ -3,3 +3,24 @@ export { default as dark } from './dark'
 export { default as future } from './future'
 export { default as condensed } from './condensed'
 export { default as yellow } from './yellow'
+export { default as swiss } from './swiss'
+
+// serif
+export { default as book } from './book'
+
+// script
+export { default as script } from './script'
+export { default as comic } from './comic'
+export { default as notes } from './notes'
+export { default as code } from './code'
+export { default as lobster } from './lobster'
+
+// experimental
+export { default as hack } from './hack'
+export { default as rye } from './rye'
+export { default as big } from './big'
+
+// super
+// https://fonts.google.com/specimen/Creepster
+// https://fonts.google.com/specimen/Pirata+One
+// https://fonts.google.com/specimen/Merriweather

src/themes/lobster.js

@@ -0,0 +1,14 @@
+import base from './base'
+
+const text = '#220011'
+
+export default {
+  ...base,
+  font: 'Lobster, cursive',
+  monospace: '"Roboto Mono", monospace',
+  colors: {
+    text: text,
+    background: 'tomato',
+    link: text,
+  }
+}

src/themes/notes.js

@@ -0,0 +1,13 @@
+import base from './base'
+
+export default {
+  ...base,
+  font: '"Annie Use Your Telescope", cursive',
+  css: {
+    fontSize: '16px',
+    textAlign: 'center',
+    '@media screen and (min-width:64em)': {
+      fontSize: '40px',
+    }
+  },
+}

src/themes/rye.js

@@ -0,0 +1,17 @@
+import base from './base'
+
+const white = '#ffeec1'
+
+export default {
+  ...base,
+  font: '"Rye", serif',
+  monospace: '"Roboto Mono", monospace',
+  colors: {
+    text: white,
+    background: 'black',
+    link: white,
+  },
+  h1: {
+    textTransform: 'uppercase',
+  }
+}

src/themes/script.js

@@ -0,0 +1,22 @@
+import theme from './base'
+
+const cream = '#fe9'
+const black = '#320'
+
+export default {
+  ...theme,
+  font: '"Yellowtail", cursive',
+  monospace: '"Roboto Mono", Menlo, monospace',
+  colors: {
+    text: black,
+    background: cream,
+    link: black,
+  },
+  css: {
+    fontSize: '16px',
+    textAlign: 'center',
+    '@media screen and (min-width:64em)': {
+      fontSize: '48px',
+    }
+  },
+}

src/themes/swiss.js

@@ -0,0 +1,27 @@
+import base from './base'
+
+const white = '#fff'
+const black = '#000'
+const blue = '#2d5dd7'
+const red = '#f00'
+
+export default {
+  ...base,
+  font: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+  colors: {
+    text: black,
+    background: white,
+    link: red
+  },
+  css: {
+    textAlign: 'left',
+    fontSize: '16px',
+    '@media screen and (min-width:64em)': {
+      fontSize: '32px',
+    },
+    '& .Slide > div': {
+      minWidth: '80vw',
+      minHeight: '60vh'
+    }
+  }
+}

test/index.js

@@ -70,11 +70,7 @@ describe('components', () => {
 
   describe('Slide', () => {
     test('renders', () => {
-      const json = renderJSON(
-        <Slide index={1}>
-          Hi
-        </Slide>
-      )
+      const json = renderJSON(<Slide index={1}>Hi</Slide>)
       expect(json).toMatchInlineSnapshot(`
 .c0 {
   -webkit-flex: none;
@@ -163,7 +159,8 @@ describe('components', () => {
   opacity: 0.5;
   margin: 0px;
   padding: 4px;
-  background-color: currentcolor;
+  color: text;
+  background-color: text;
 }
 
 .c1:focus {
@@ -182,6 +179,7 @@ describe('components', () => {
 >
   <button
     className="c1"
+    color="text"
     onClick={[Function]}
     title="go to: 0"
   />
@@ -216,7 +214,8 @@ describe('components', () => {
   opacity: 0.5;
   margin: 0px;
   padding: 4px;
-  background-color: currentcolor;
+  color: text;
+  background-color: text;
 }
 
 .c1:focus {
@@ -237,7 +236,8 @@ describe('components', () => {
   opacity: 0.125;
   margin: 0px;
   padding: 4px;
-  background-color: currentcolor;
+  color: text;
+  background-color: text;
 }
 
 .c2:focus {
@@ -256,41 +256,49 @@ describe('components', () => {
 >
   <button
     className="c1"
+    color="text"
     onClick={[Function]}
     title="go to: 0"
   />
   <button
     className="c1"
+    color="text"
     onClick={[Function]}
     title="go to: 1"
   />
   <button
     className="c1"
+    color="text"
     onClick={[Function]}
     title="go to: 2"
   />
   <button
     className="c1"
+    color="text"
     onClick={[Function]}
     title="go to: 3"
   />
   <button
     className="c2"
+    color="text"
     onClick={[Function]}
     title="go to: 4"
   />
   <button
     className="c2"
+    color="text"
     onClick={[Function]}
     title="go to: 5"
   />
   <button
     className="c2"
+    color="text"
     onClick={[Function]}
     title="go to: 6"
   />
   <button
     className="c2"
+    color="text"
     onClick={[Function]}
     title="go to: 7"
   />
@@ -380,7 +388,8 @@ describe('components', () => {
     test('renders', () => {
       const json = renderJSON(<SlideDeck slides={[]} />)
       expect(json).toMatchInlineSnapshot(`
-.c1 {
+Array [
+  .c1 {
   overflow-x: hidden;
   width: 100%;
   height: 100%;
@@ -405,20 +414,6 @@ describe('components', () => {
   transform: translateX(0%);
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin-top: -32px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .c0 {
   font-family: system-ui,sans-serif;
   font-size: 16px;
@@ -426,7 +421,7 @@ describe('components', () => {
   width: 100vw;
   height: 100vh;
   color: #000;
-  background-color: transparent;
+  background-color: white;
 }
 
 @media print {
@@ -443,12 +438,6 @@ describe('components', () => {
   }
 }
 
-@media print {
-  .c3 {
-    display: none;
-  }
-}
-
 @media print {
   .c0 {
     font-size: 24px;
@@ -463,24 +452,94 @@ describe('components', () => {
 }
 
 <div
-  className="c0"
-  color="text"
-  height="100vh"
-  mode="NORMAL"
-  step={-1}
-  width="100vw"
->
-  <div
-    className="c1"
+    className="c0"
+    color="text"
+    height="100vh"
+    mode="NORMAL"
+    step={-1}
+    width="100vw"
   >
     <div
-      className="c2"
+      className="c1"
+    >
+      <div
+        className="c2"
+      />
+    </div>
+  </div>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.c0 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+@media print {
+  .c1 {
+    display: none;
+  }
+}
+
+<div
+    className="c0"
+  >
+    <div
+      className="c1"
     />
-  </div>
-  <div
-    className="c3"
-  />
-</div>
+  </div>,
+  .c1 {
+  cursor: pointer;
+  width: 64px;
+  height: 100vh;
+}
+
+.c0 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+<div
+    className="c0 c1"
+    onClick={[Function]}
+    role="button"
+    title="Previous Slide"
+  />,
+  .c1 {
+  cursor: pointer;
+  width: 64px;
+  height: 100vh;
+}
+
+.c0 {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+<div
+    className="c0 c1"
+    onClick={[Function]}
+    role="button"
+    title="Next Slide"
+  />,
+]
 `)
     })