Add Image component

.travis.yml

@@ -0,0 +1,12 @@
+language: node_js
+node_js:
+  - 10
+before_deploy:
+  - npm run build
+deploy:
+  provider: pages
+  skip_cleanup: true
+  github_token: $GH_TOKEN
+  local_dir: site
+  on:
+    branch: master

README.md

@@ -3,6 +3,8 @@
 
 Create presentation decks with [MDX][]
 
+**Beta**
+
 ```sh
 npm i mdx-deck
 ```
@@ -105,11 +107,17 @@ TK
 
 ---
 
-- [ ] default styles
-- [ ] URL hash
 - [ ] Root provider
-- [ ] export build
+- [ ] add default themes
+- [ ] theme docs
+- [ ] exporting docs
+- [ ] components docs
+- [ ] Full Image component
+- [x] default styles
+- [x] export build
+- [x] URL hash
 
 [MDX]: https://github.com/mdx-js/mdx
 [MDXProvider]: https://github.com/mdx-js/mdx#mdxprovider
 [styled-system]: https://github.com/jxnblk/styled-system
+[styled-components]: https://github.com/styled-components/styled-components

docs/Layout.js

@@ -2,6 +2,11 @@ import React from 'react'
 import Box from 'superbox'
 
 export default ({ children }) =>
-  <Box p={4} bg='tomato'>
+  <Box
+    p={4}
+    bg='magenta'
+    css={{
+      width: '100vw'
+    }}>
     {children}
   </Box>

docs/index.mdx

@@ -1,31 +1,43 @@
 import Layout from './Layout'
+import { Image } from '../src'
 // export { default as theme } from './theme'
 
-# Hello
+# mdx-deck
+
+MDX-based presention decks
 ---
-# This is a presentation deck!
+# Presentation decks
 ---
 # Built with [MDX][]
 [MDX]: https://github.com/mdx-js/mdx
 ---
 import Box from 'superbox'
 
-<Box p={3} bg='magenta'>
-  You can import React components!
+<Box
+  fontSize={4}
+  p={4}
+  bg='magenta'>
+  Import React components
 </Box>
 ---
 export default Layout
 
-# Slide Layouts
-And set per-slide layouts
+# Layouts
+Add layouts per-slide
+
 ---
-- You can use lists as well
-- Which is great for bullet points
-- Or making your point
+
+- Make bulleted lists
+- To help make your point
+
 ---
-1. Install mdx-deck
+
+## Getting Started
+
+1. `npm i -D mdx-deck`
 2. Write some markdown and JSX
 3. Present
+
 ---
 ```
 <button>code example</button>
@@ -36,3 +48,5 @@ And set per-slide layouts
 – Anonymous
 ---
 ![](https://s3.amazonaws.com/jxnblk/ok-cli.gif)
+---
+<Image src='https://s3.amazonaws.com/jxnblk/ok-cli.gif' />

package.json

@@ -22,7 +22,7 @@
     "gray-matter": "^4.0.1",
     "lodash.throttle": "^4.1.1",
     "meow": "^5.0.0",
-    "ok-cli": "^3.0.0-8",
+    "ok-cli": "^3.0.0-9",
     "pkg-conf": "^2.1.0",
     "prop-types": "^15.6.2",
     "react-dev-utils": "^5.0.1",

src/Image.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import styled from 'styled-components'
+import { width, height } from 'styled-system'
+
+const Image = styled.div([], {
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+},
+  props => ({
+    backgroundImage: `url(${props.src})`
+  }),
+  width,
+  height,
+  props => props.css
+)
+
+Image.defaultProps = {
+  width: '100vw',
+  height: '100vh',
+}
+
+export default Image

src/components.js

@@ -6,12 +6,15 @@ import {
   color
 } from 'styled-system'
 
+const css = key => props => props.theme[key]
+
 const Heading = styled.h1([], {
   lineHeight: 1.25
 },
   fontSize,
   space,
-  color
+  color,
+  css('heading')
 )
 Heading.defaultProps = {
   color: 'heading',
@@ -61,24 +64,29 @@ const h6 = props =>
     fontSize={[ 2, 3 ]}
   />
 
-const a = styled.a([], {}, color)
+const a = styled.a([], color, css('link'))
 a.defaultProps = {
   target: '_blank',
   color: 'link'
 }
 
-const p = styled.p([], {}, fontSize, space, color)
+const p = styled.p([],
+  fontSize,
+  space,
+  color,
+  css('paragraph')
+)
 
 const ul = styled.ul([], {
   textAlign: 'left'
-}, fontSize)
+}, fontSize, css('ul'))
 ul.defaultProps = {
   fontSize: [ 2, 3 ]
 }
 
 const ol = styled.ol([], {
   textAlign: 'left'
-}, fontSize)
+}, fontSize, css('ol'))
 ol.defaultProps = {
   fontSize: [ 2, 3 ]
 }
@@ -87,9 +95,14 @@ const li = styled.li([])
 const blockquote = styled.blockquote([], {
   textAlign: 'left',
   fontWeight: 'bold',
-}, fontSize, space, color)
+},
+  fontSize,
+  space,
+  color,
+  css('quote')
+)
 blockquote.defaultProps = {
-  fontSize: [ 3, 4 ],
+  fontSize: [ 2, 3, 4 ],
   px: 0,
   mx: 0,
   color: 'quote'
@@ -97,18 +110,23 @@ blockquote.defaultProps = {
 
 const pre = styled.pre([], props => ({
   fontFamily: props.theme.monospace
-}), fontSize, space, color)
+}),
+  fontSize,
+  space,
+  color,
+  css('pre')
+)
 pre.defaultProps = {
-  fontSize: 2,
+  fontSize: [ 1, 2 ],
   m: 0,
   p: 2,
-  color: 'code',
-  bg: 'codeBackground'
+  color: 'pre',
+  bg: 'preBackground'
 }
 
 const code = styled.code([], props => ({
   fontFamily: props.theme.monospace
-}), fontSize, space, color)
+}), fontSize, space, color, css('code'))
 code.defaultProps = {
   color: 'code',
   bg: 'codeBackground'
@@ -117,7 +135,7 @@ code.defaultProps = {
 const img = styled.img([], {
   maxWidth: '100%',
   height: 'auto'
-})
+}, css('image'))
 
 export default {
   h1,
@@ -132,7 +150,8 @@ export default {
   ul,
   ol,
   li,
-  pre,
-  code,
+  pre: props => props.children,
+  code: pre,
+  inlineCode: code,
   img
 }

src/index.js

@@ -7,8 +7,10 @@ import debounce from 'lodash.debounce'
 
 import defaultTheme from './theme'
 import defaultComponents from './components'
+
 export { default as theme } from './theme'
 export { default as components } from './components'
+export { default as Image } from './Image'
 
 export const inc = state => ({ index: (state.index + 1) % state.length })
 export const dec = state => state.index > 0
@@ -20,6 +22,7 @@ const CarouselRoot = styled.div([], {
   width: '100%',
   height: '100%',
 })
+
 const CarouselInner = styled.div([], {
   display: 'flex',
   width: '100%',
@@ -53,7 +56,9 @@ export const Slide = styled.div([], {
 }, space, color)
 
 Slide.defaultProps = {
-  p: [ 4, 5, 6 ],
+  px: [ 4, 5, 6 ],
+  pt: [ 3, 4 ],
+  pb: [ 4, 5 ],
   color: 'text',
   bg: 'background'
 }
@@ -191,7 +196,7 @@ export default class SlideDeck extends React.Component {
               ))}
             </Carousel>
             <Dots
-              mt={-48}
+              mt={-32}
               mx='auto'
               index={index}
               length={length}

src/theme.js

@@ -10,11 +10,13 @@ export default {
     link: '#07c',
     heading: '#000',
     quote: '#000',
+    pre: '#f0f',
+    preBackground: '#333',
     code: '#f0f',
-    codeBackground: '#333',
+    codeBackground: 'transparent',
   },
   css: {
     fontSize: '32px',
     // textAlign: 'center'
-  }
+  },
 }