Add docs for speaker notes

README.md

@@ -262,6 +262,33 @@ To use presenter mode:
 - Display the other window on the screen for the audience to see.
 - Control the presentation from your window by using the left and right arrow keys; the other window should stay in sync
 
+### Speaker Notes
+
+Notes that only show in presenter mode can be added to any slide.
+Speaker notes can be added in one of the following two ways:
+
+**Markdown:** Use the `notes` language attribute in a fenced code block to add speaker notes.
+
+````mdx
+# Slide Content
+
+```notes
+These are only visible in presenter mode
+```
+````
+
+**Notes Component:** Use the `Notes` component to create more complex speaker notes.
+
+````mdx
+import { Notes } from 'mdx-deck'
+
+# Slide Content
+
+<Notes>
+  Only visible in presenter mode
+</Notes>
+````
+
 ## Exporting
 
 Add a `build` script to your `package.json` to export a presentation as HTML with a JS bundle.

docs/index.mdx

@@ -38,22 +38,23 @@ import Box from 'superbox'
 <button>code example</button>
 ```
 
-<Notes>
-  <ul>
-    <li>
-      Hi these are notes
-    </li>
-    <li>
-      And it's React!
-    </li>
-  </ul>
-</Notes>
+```notes
+- These are speaker notes
+- And they won't rendered in your slide
+```
 
 ---
 > “Blockquotes are essential to any good presentation”
 
 – Anonymous
 
+<Notes>
+  <ul>
+    <li>Speaker notes can also be</li>
+    <li>Written in JSX</li>
+  </ul>
+</Notes>
+
 ---
 
 <Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />

src/Mono.js

@@ -5,6 +5,7 @@ export default props =>
   <Box
     {...props}
     css={{
-      fontFamily: 'Menlo, monospace'
+      fontFamily: 'Menlo, monospace',
+      whiteSpace: 'pre-wrap'
     }}
   />

src/components.js

@@ -5,6 +5,8 @@ import {
   space,
   color
 } from 'styled-system'
+import Notes from './Notes'
+import Mono from './Mono'
 
 const css = key => props => props.theme[key]
 
@@ -89,15 +91,16 @@ blockquote.defaultProps = {
   color: 'quote'
 }
 
-const pre = styled.pre([], props => ({
-  fontFamily: props.theme.monospace
+const Pre = styled.pre([], props => ({
+  fontFamily: props.theme.monospace,
+  whiteSpace: 'pre-wrap'
 }),
   fontSize,
   space,
   color,
   css('pre')
 )
-pre.defaultProps = {
+Pre.defaultProps = {
   fontSize: 1,
   m: 0,
   p: 2,
@@ -105,7 +108,20 @@ pre.defaultProps = {
   bg: 'preBackground'
 }
 
-const code = styled.code([], props => ({
+const code = props => {
+  switch (props.className) {
+    case 'language-notes':
+      return (
+        <Notes>
+          <Mono {...props} color='white' />
+        </Notes>
+      )
+    default:
+      return <Pre {...props} />
+  }
+}
+
+const inlineCode = styled.code([], props => ({
   fontFamily: props.theme.monospace
 }), fontSize, space, color, css('code'))
 code.defaultProps = {
@@ -132,7 +148,7 @@ export default {
   ol,
   li,
   pre: props => props.children,
-  code: pre,
-  inlineCode: code,
+  code,
+  inlineCode,
   img
 }