Add default components

README.md

@@ -106,6 +106,7 @@ TK
 ---
 
 - [ ] default styles
+- [ ] URL hash
 - [ ] Root provider
 - [ ] export build
 

cli.js

@@ -73,7 +73,6 @@ const cli = meow(`
 })
 
 const [ cmd, file ] = cli.input
-
 const doc = file || cmd
 
 if (!doc) cli.showHelp(0)

docs/index.mdx

@@ -6,16 +6,34 @@ import Layout from './Layout'
 # This is a presentation deck!
 ---
 # Built with [MDX][]
-You know it!
 [MDX]: https://github.com/mdx-js/mdx
 ---
 import Box from 'superbox'
 
 <Box p={3} bg='magenta'>
-  And you can import React components!
+  You can import React components!
 </Box>
 ---
 export default Layout
 
 # Slide Layouts
-Each slide can have its own layout with a default export
+And set per-slide layouts
+---
+- You can use lists as well
+- Which is great for bullet points
+- Or making your point
+---
+1. Install mdx-deck
+2. Write some markdown and JSX
+3. Present
+---
+```
+<button>code example</button>
+```
+---
+> “Blockquotes are essential to any good presentation”
+
+– Anonymous
+---
+![](https://s3.amazonaws.com/jxnblk/ok-cli.gif)
+---

lib/entry.js

@@ -7,20 +7,7 @@ const slides = mod.default
 const { theme, components } = mod
 
 export default class App extends React.Component {
-  static defaultProps = {
-    slides,
-    theme,
-    components
-  }
-
   render () {
-    const {
-      slides,
-      theme,
-      components
-    } = this.props
-    console.log(theme)
-
     return (
       <SlideDeck
         slides={slides}

src/components.js

@@ -14,41 +14,125 @@ const Heading = styled.h1([], {
   color
 )
 Heading.defaultProps = {
+  color: 'heading',
   mt: 3,
   mb: 3,
 }
 
+const H2 = Heading.withComponent('h2')
+const H3 = Heading.withComponent('h3')
+const H4 = Heading.withComponent('h4')
+const H5 = Heading.withComponent('h5')
+const H6 = Heading.withComponent('h6')
+
 const h1 = props =>
   <Heading
     {...props}
     fontSize={[ 3, 4, 5 ]}
   />
 
-const H2 = Heading.withComponent('h2')
 const h2 = props =>
   <H2
     {...props}
     fontSize={[ 2, 3, 4 ]}
   />
 
+const h3 = props =>
+  <H3
+    {...props}
+    fontSize={[ 2, 3 ]}
+  />
+
+const h4 = props =>
+  <H4
+    {...props}
+    fontSize={[ 2, 3 ]}
+  />
+
+const h5 = props =>
+  <H5
+    {...props}
+    fontSize={[ 2, 3 ]}
+  />
+
+const h6 = props =>
+  <H6
+    {...props}
+    fontSize={[ 2, 3 ]}
+  />
+
 const a = styled.a([], {}, color)
 a.defaultProps = {
+  target: '_blank',
   color: 'link'
 }
 
+const p = styled.p([], {}, fontSize, space, color)
+
+const ul = styled.ul([], {
+  textAlign: 'left'
+}, fontSize)
+ul.defaultProps = {
+  fontSize: [ 2, 3 ]
+}
+
+const ol = styled.ol([], {
+  textAlign: 'left'
+}, fontSize)
+ol.defaultProps = {
+  fontSize: [ 2, 3 ]
+}
+const li = styled.li([])
+
+const blockquote = styled.blockquote([], {
+  textAlign: 'left',
+  fontWeight: 'bold',
+}, fontSize, space, color)
+blockquote.defaultProps = {
+  fontSize: [ 3, 4 ],
+  px: 0,
+  mx: 0,
+  color: 'quote'
+}
+
+const pre = styled.pre([], props => ({
+  fontFamily: props.theme.monospace
+}), fontSize, space, color)
+pre.defaultProps = {
+  fontSize: 2,
+  m: 0,
+  p: 2,
+  color: 'code',
+  bg: 'codeBackground'
+}
+
+const code = styled.code([], props => ({
+  fontFamily: props.theme.monospace
+}), fontSize, space, color)
+code.defaultProps = {
+  color: 'code',
+  bg: 'codeBackground'
+}
+
+const img = styled.img([], {
+  maxWidth: '100%',
+  height: 'auto'
+})
+
 export default {
   h1,
   h2,
-  // h3,
-  // h4,
-  // h5,
-  // h6,
+  h3,
+  h4,
+  h5,
+  h6,
   a,
-  // p,
-  // ul,
-  // ol,
-  // li,
-  // pre,
-  // code,
-  // img
+  p,
+  blockquote,
+  ul,
+  ol,
+  li,
+  pre,
+  code,
+  img
 }

src/theme.js

@@ -1,15 +1,20 @@
 export default {
-  // font: 'Menlo, monospace',
+  // font: '"Avenir Next", sans-serif',
+  monospace: 'Menlo, monospace',
   fontSizes: [
     16, 24, 32, 48, 64, 96, 128
   ],
   colors: {
     text: '#000',
     background: '#fff',
-    link: '#07c'
+    link: '#07c',
+    heading: '#000',
+    quote: '#000',
+    code: '#f0f',
+    codeBackground: '#333',
   },
   css: {
     fontSize: '32px',
-    textAlign: 'center'
+    // textAlign: 'center'
   }
 }