Edit readme

LICENSE.md

@@ -0,0 +1,10 @@
+
+# The MIT License (MIT)
+Copyright (c) 2018 Brent Jackson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

README.md

@@ -9,6 +9,8 @@
 npm i mdx-deck
 ```
 
+## Getting Started
+
 Create an [MDX][] file and separate each slide with `---`.
 
 ````mdx
@@ -51,6 +53,14 @@ import { Box } from 'grid-styled'
 
 ### Theming
 
+mdx-deck uses [styled-components][] for styling.
+
+### Built-in Themes
+
+TK
+
+### Custom Themes
+
 A custom theme can be provided by exporting `theme` from the MDX file.
 
 ```mdx
@@ -64,17 +74,34 @@ The theme should be an object based on [styled-system][]'s theme schema.
 ```js
 // example theme.js
 export default {
-  font: 'Menlo, monospace',
+  font: 'Georgia',
+  monospace: 'Menlo, monospace',
   fontSizes: [
     16, 24, 32, 48, 64, 96, 128
   ],
   colors: {
-    text: '#f0f',
+    text: '#000',
-    background: '#000',
+    background: 'transparent',
-    link: '#0ff'
+    link: '#07c',
+    heading: '#000',
+    quote: '#000',
+    pre: '#f0f',
+    preBackground: '#333',
+    code: '#f0f',
+    codeBackground: 'transparent',
   },
   css: {
     // apply any styles to the root element
+  },
+  // custom CSS can be provided to any of the default components:
+  heading: {
+    fontWeight: 400
+  },
+  link: {
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline',
+    }
   }
 }
 ```
@@ -104,9 +131,71 @@ export default Layout
 # Custom Layout
 ```
 
+### Custom Provider
+
+A custom Provider component can be exported to wrap the entire application.
+This is useful for adding custom context providers, such as a ThemeProvider.
+
+```mdx
+export { default as Provider } from './Provider'
+
+# Hello
+```
+
 ## Exporting
 
-TK
+Run the `build` command to export a presentation as HTML with a JS bundle.
+
+```sh
+mdx-deck build deck.mdx
+```
+
+## React API
+
+mdx-deck components can be used in any React application, such as [create-react-app][] or [next.js][].
+
+### Webpack Loader
+
+mdx-deck uses a custom webpack loader to split MDX files into an array of slides. Use this loader to import mdx files in a webpack application.
+
+```js
+// example webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mdx$/,
+        ignore: /node_modules/,
+        use: [
+          'babel-loader',
+          'mdx-deck/loader'
+        ]
+      }
+    ]
+  }
+}
+```
+
+### SlideDeck Component
+
+```js
+import React from 'react'
+import { SlideDeck } from 'mdx-deck'
+import slides from './deck.mdx'
+import theme from './theme'
+import components from './components'
+
+export default () =>
+  <SlideDeck
+    slides={slides}
+    theme={theme}
+    components={components}
+    width='100vw'
+    height='100vh'
+  />
+```
+
+View the source for other components available for use.
 
 ---
 
@@ -115,13 +204,12 @@ TK
 - [ ] exporting docs
 - [ ] components docs
 - [ ] Provider docs
-- [x] Full Image component
+
-- [x] Root provider
+[MIT License][LICENSE.md]
-- [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
+[create-react-app]: https://github.com/facebook/create-react-app
+[next.js]: https://github.com/zeit/next.js/

src/index.js

@@ -34,15 +34,10 @@ const CarouselInner = styled.div([], {
   transform: `translateX(${-100 * props.index}%)`
 }))
 
-export class Carousel extends React.Component {
+export const Carousel = props =>
-  render () {
+  <CarouselRoot>
-    return (
+    <CarouselInner {...props} />
-      <CarouselRoot>
+  </CarouselRoot>
-        <CarouselInner {...this.props} />
-      </CarouselRoot>
-    )
-  }
-}
 
 export const Slide = styled.div([], {
   flex: 'none',
@@ -122,7 +117,7 @@ export const Root = styled.div([], {
   height
 )
 
-export default class SlideDeck extends React.Component {
+export class SlideDeck extends React.Component {
   static propTypes = {
     slides: PropTypes.array.isRequired,
   }
@@ -210,3 +205,5 @@ export default class SlideDeck extends React.Component {
     )
   }
 }
+
+export default SlideDeck

src/theme.js

@@ -6,7 +6,7 @@ export default {
   ],
   colors: {
     text: '#000',
-    background: '#fff',
+    background: 'transparent',
     link: '#07c',
     heading: '#000',
     quote: '#000',