Edit docs

MIGRATION.md

@@ -18,6 +18,7 @@
   - `--out-dir` - decks are now built in the `public/` directory
   - `--no-html` - individual slides are rendered client side, but the first slide is always rendered as static HTML using Gatsby
 - Custom `Presenter` components can no longer be added to a theme. Use the component shadowing API with the Gatsby theme instead.
+- Multiple MDX files can no longer be combined into a single presentation
 
 [theme ui]: https://theme-ui.com
 

docs/advanced.md

@@ -3,112 +3,34 @@
 ## Custom Provider component
 
 A custom Provider component is useful for adding custom context providers in React or adding persistent UI elements to the entire deck.
-
-To define a custom Provider component, you'll need to import it into your custom theme and set it using the key `Provider` like shown below:
+To define a custom Provider component, you'll need to import it and add it as the `Provider` key in your theme.
 
 ```js
 // example theme.js
 import Provider from './Provider'
 
 export default {
-  font: 'Georgia, serif',
+  fonts: {
+    body: 'Georgia, serif',
+  },
   Provider,
 }
 ```
 
-A custom Provider component will receive the application's state as props,
-which can be used to show custom page numbers or add other elements to the UI.
-
-#### Props
-
-- `slides`: (array) the components for each slide
-- `index`: (number) the current slide index
-- `mode`: (string) the current mode (one of `'normal'`, `'presenter'`, or `'overview'`)
-- `step`: (number) the current visible step in an Appear or Step component
-- Each slide includes a `meta` object with a `notes` field when the Notes component is used within a slide
-
-#### Example
-
-The example below will display the current slide out of the total amount of slides.
+Use the `useDeck` hook to get the presentation state in your custom `Provider` component.
 
 ```js
-// Example Provider.js
+// example Provider.js
 import React from 'react'
+import { useDeck } from 'mdx-deck'
 
-function AtTheBottomCenter ({ children }) {
-  const css = {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    color: #ffffff;
-    textAlign: 'center',
-  }
+export default props => {
+  const state = useDeck()
 
-  return <div css={css}>
-    {children}
-  </div>
-}
-
-export function Provider ({ children, ...props }) {
-  return <>
-    {children}
-    <AtTheBottomCenter>{props.index}/{props.slides.length}</AtTheBottomCenter>
-  </>
+  return (
+    <div>
+      {props.children}
+    </div>
+  )
 }
 ```
-
-## Combining multiple mdx files
-
-Unlike the official `@mdx-js/loader`,
-the `@mdx-deck/loader` exports an additional `slides` array of components instead of just the entire document.
-Multiple MDX files can be combined into a single presentation if the filesize is getting difficult to manage.
-
-First create a couple `.mdx` files like any other MDX Deck file, with `---` to separate the different slides.
-
-```mdx
-# one.mdx
-
----
-
-This is the first file
-```
-
-```mdx
-# two.mdx
-
----
-
-This is the second file
-```
-
-Next, create a `.js` file to import and combine the two `.mdx` files.
-
-```js
-// deck.js
-// if you want to include a theme, you would export here:
-// export { dark as theme } from 'mdx-deck/themes';
-
-import { slides as one } from './one.mdx'
-import { slides as two } from './two.mdx'
-
-export const slides = [...one, ...two]
-```
-
-Then, point the MDX Deck CLI comment in your `package.json` to the `deck.js` file.
-
-```json
-"scripts": {
-  "start": "mdx-deck deck.js"
-}
-```
-
-## Custom Components
-
-To build custom components that hook into internal MDX Deck state, you might want to use the following APIs:
-
-- [useSteps](api.md#usesteps-hook)
-- [useDeck](api.md#usedeck-hook)
-
-[mdx]: https://mdxjs.com
-[mdxprovider]: https://github.com/mdx-js/mdx/blob/master/docs/getting-started/index.md#mdxprovider