From 9bafb75a58289a391d28c7817d36ca8d98cc2341 Mon Sep 17 00:00:00 2001
From: Randy Topliffe <randytopliffe@gmail.com>
Date: Tue, 26 Mar 2019 14:23:01 -0400
Subject: [PATCH 1/3] Update Advanced Docs

- Update Advanced docs to provide an example of how to define your own
custom provider and clarify how to set a custom Provider in your theme
---
 docs/advanced.md | 47 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/docs/advanced.md b/docs/advanced.md
index 9d2adc2..b1135d5 100644
--- a/docs/advanced.md
+++ b/docs/advanced.md
@@ -20,8 +20,9 @@ at the [default set of components](../packages/components/src/mdx-components.js)
 
 ## Custom Provider component
 
-A custom Provider component can be added to the theme to wrap the entire application.
-This is useful for adding custom context providers in React or adding persistent UI elements to the entire deck.
+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: 
 
 ```js
 // example theme.js
@@ -44,6 +45,48 @@ which can be used to show custom page numbers or add other elements to the UI.
 - `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.
+
+```js
+import React, { useEffect, useRef, useState } from 'react'
+import { css } from '@emotion/core'
+
+function AtTheBottomCenter ({ children }) {
+  const ref = useRef();
+  const [left, setLeft] = useState(0)
+
+  useEffect(function WindowSize () {
+    const bodyWidth = document.body.clientWidth
+    const width = ref.current.clientWidth
+
+    setLeft((bodyWidth / 2) - (width / 2))
+  })
+
+  const css = css`
+    position: absolute;
+    bottom: 0;
+    color: #ffffff;
+  `
+
+  return <div
+    ref={ref}
+    css={ css }
+    style={{ left }}
+    >
+    { children }
+  </div>
+}
+
+export function Provider ({ children, ...props }) {
+  return <>
+    { children }
+    <AtTheBottomCenter>{ props.index }/{ props.slides.length }</AtTheBottomCenter>
+  </>
+}
+```
+
 ## Combining multiple mdx files
 
 Unlike the official `@mdx-js/loader`,

From 984e69e150daa957b75a875630890abf1351d5c2 Mon Sep 17 00:00:00 2001
From: Randy Topliffe <randytopliffe@gmail.com>
Date: Mon, 8 Apr 2019 10:31:01 -0400
Subject: [PATCH 2/3] Fix Provider examples

- Update provider example to be simpler
---
 docs/advanced.md | 31 ++++++++++---------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/docs/advanced.md b/docs/advanced.md
index b1135d5..9df84d9 100644
--- a/docs/advanced.md
+++ b/docs/advanced.md
@@ -22,7 +22,7 @@ at the [default set of components](../packages/components/src/mdx-components.js)
 
 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 into your custom theme and set it using the key `Provider` like shown below:
 
 ```js
 // example theme.js
@@ -50,31 +50,20 @@ which can be used to show custom page numbers or add other elements to the UI.
 The example below will display the current slide out of the total amount of slides.
 
 ```js
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { css } from '@emotion/core'
 
 function AtTheBottomCenter ({ children }) {
-  const ref = useRef();
-  const [left, setLeft] = useState(0)
-
-  useEffect(function WindowSize () {
-    const bodyWidth = document.body.clientWidth
-    const width = ref.current.clientWidth
-
-    setLeft((bodyWidth / 2) - (width / 2))
-  })
-
-  const css = css`
-    position: absolute;
-    bottom: 0;
+  const css = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
     color: #ffffff;
-  `
+    textAlign: 'center',
+  }
 
-  return <div
-    ref={ref}
-    css={ css }
-    style={{ left }}
-    >
+  return <div css={ css }>
     { children }
   </div>
 }

From 03347297bfb9fbce5eb6f235e2b5afc692532423 Mon Sep 17 00:00:00 2001
From: Randy Topliffe <randytopliffe@gmail.com>
Date: Tue, 23 Apr 2019 13:41:50 -0400
Subject: [PATCH 3/3] Few improvements

- Add comment to explicitly mark the code as an example of a Provider
- Remove unused import
---
 docs/advanced.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/advanced.md b/docs/advanced.md
index 9df84d9..e0e3821 100644
--- a/docs/advanced.md
+++ b/docs/advanced.md
@@ -50,8 +50,8 @@ which can be used to show custom page numbers or add other elements to the UI.
 The example below will display the current slide out of the total amount of slides.
 
 ```js
+// Example Provider.js
 import React from 'react'
-import { css } from '@emotion/core'
 
 function AtTheBottomCenter ({ children }) {
   const css = {
@@ -63,15 +63,15 @@ function AtTheBottomCenter ({ children }) {
     textAlign: 'center',
   }
 
-  return <div css={ css }>
-    { children }
+  return <div css={css}>
+    {children}
   </div>
 }
 
 export function Provider ({ children, ...props }) {
   return <>
-    { children }
-    <AtTheBottomCenter>{ props.index }/{ props.slides.length }</AtTheBottomCenter>
+    {children}
+    <AtTheBottomCenter>{props.index}/{props.slides.length}</AtTheBottomCenter>
   </>
 }
 ```