Merge pull request #345 from jxnblk/examples

Add examples
2024-11-25 15:50:39 +03:00 · 2019-04-21 20:35:40 -04:00 · 2019-04-21 20:35:40 -04:00 · 76bab3903f
commit 76bab3903f
parent 4d4a722ca5 928244b2ef
27 changed files with 405 additions and 3 deletions
--- a/examples/README.md
+++ b/examples/README.md
@ -0,0 +1,18 @@
+
+# Examples
+
+- [Basic Example](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/basic)
+- [Multiple Decks](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/multiple)
+- [Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/syntax-highlighting)
+- [Prism Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/prism)
+- [Aspect Ratio](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/aspect-ratio)
+- [Layouts](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/layouts)
+- [Images](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/images)
+- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
+- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
+- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
+
+<!--
+- [useSteps](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/use-steps)
+- [useDeck](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/use-deck)
+-->
--- a/examples/appear/deck.mdx
+++ b/examples/appear/deck.mdx
@ -0,0 +1,26 @@
+import { Appear } from '@mdx-deck/components'
+
+# Hello!
+
+---
+
+<ul>
+  <li>One</li>
+  <Appear>
+    <li>Two</li>
+    <li>Three</li>
+    <li>Four</li>
+  </Appear>
+</ul>
+
+---
+
+## One
+
+<Appear>
+
+## Two
+## Three
+
+</Appear>
+
--- a/examples/appear/package.json
+++ b/examples/appear/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/appear-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/aspect-ratio/deck.mdx
+++ b/examples/aspect-ratio/deck.mdx
@ -0,0 +1,18 @@
+import future from '@mdx-deck/themes/future'
+import aspect from '@mdx-deck/themes/aspect'
+
+export const themes = [
+  future,
+  aspect,
+]
+
+# Hello!
+
+---
+
+This deck is fluid to a 16:9 aspect ratio
+
+---
+
+Images will still render full bleed at other aspect ratios
+
--- a/examples/aspect-ratio/package.json
+++ b/examples/aspect-ratio/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/aspect-ratio-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/basic/deck.mdx
+++ b/examples/basic/deck.mdx
@ -0,0 +1,6 @@
+
+# Hello!
+
+---
+
+This is MDX Deck
--- a/examples/basic/package.json
+++ b/examples/basic/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/basic-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/head/deck.mdx
+++ b/examples/head/deck.mdx
@ -0,0 +1,12 @@
+import { Head } from '@mdx-deck/components'
+
+<Head>
+  <title>Hello</title>
+</Head>
+
+# Hello!
+
+---
+
+This deck has a custom title
+
--- a/examples/head/package.json
+++ b/examples/head/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/head-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/images/deck.mdx
+++ b/examples/images/deck.mdx
@ -0,0 +1,23 @@
+import {
+  Image,
+} from '@mdx-deck/components'
+
+# Hello!
+
+---
+
+<Image
+  src='https://source.unsplash.com/random/768x2048?brooklyn'
+  style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'white',
+    backgroundColor: 'black',
+  }}>
+
+## Background Image
+
+</Image>
+
+
--- a/examples/images/package.json
+++ b/examples/images/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/images-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/layouts/deck.mdx
+++ b/examples/layouts/deck.mdx
@ -0,0 +1,59 @@
+import {
+  Invert,
+  Split,
+  SplitRight,
+  Horizontal,
+  FullScreenCode,
+} from '@mdx-deck/layouts'
+
+# Hello!
+
+---
+
+<Invert>
+
+## Invert Layout
+
+</Invert>
+
+---
+
+<Split>
+
+![](https://source.unsplash.com/random/768x2048?brooklyn)
+
+## Split Layout
+
+</Split>
+
+---
+
+<SplitRight>
+
+![](https://source.unsplash.com/random/768x2048?brooklyn)
+
+## SplitRight Layout
+
+</SplitRight>
+
+---
+
+<Horizontal>
+
+## Horizontal Layout
+
+![](https://source.unsplash.com/random/768x2048?brooklyn)
+
+![](https://source.unsplash.com/random/768x2048?brooklyn)
+
+</Horizontal>
+
+---
+
+<FullScreenCode>
+
+```jsx
+<Button>FullScreenCode Layout</Button>
+```
+
+</FullScreenCode>
--- a/examples/layouts/package.json
+++ b/examples/layouts/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/layouts-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/multiple/deck.js
+++ b/examples/multiple/deck.js
@ -0,0 +1,4 @@
+import { slides as one } from './one.mdx'
+import { slides as two } from './two.mdx'
+
+export const slides = [...one, ...two]
--- a/examples/multiple/one.mdx
+++ b/examples/multiple/one.mdx
@ -0,0 +1,6 @@
+
+# Hello!
+
+---
+
+This is MDX Deck #1
--- a/examples/multiple/package.json
+++ b/examples/multiple/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/multiple-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.js",
+    "build": "mdx-deck build deck.js",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/multiple/two.mdx
+++ b/examples/multiple/two.mdx
@ -0,0 +1,6 @@
+
+# This is Deck # 2
+
+---
+
+:sunglasses:
--- a/examples/prism/deck.mdx
+++ b/examples/prism/deck.mdx
@ -0,0 +1,18 @@
+import future from '@mdx-deck/themes/future'
+import highlight from '@mdx-deck/themes/syntax-highlighter-prism'
+
+export const themes = [
+  future,
+  highlight
+]
+
+# Hello!
+
+---
+
+```jsx
+import React from 'react'
+
+export default props =>
+  <h1>Highlighting</h1>
+```
--- a/examples/prism/package.json
+++ b/examples/prism/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/prism-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/provider/deck.mdx
+++ b/examples/provider/deck.mdx
@ -0,0 +1,14 @@
+import comic from '@mdx-deck/themes/comic'
+import theme from './theme'
+
+export const themes = [
+  comic,
+  theme,
+]
+
+# Hello!
+
+---
+
+This deck has a custom Provider component
+
--- a/examples/provider/package.json
+++ b/examples/provider/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/provider-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/examples/provider/theme.js
+++ b/examples/provider/theme.js
@ -0,0 +1,21 @@
+import React from 'react'
+
+const Provider = props => (
+  <div>
+    {props.children}
+    <div
+      css={{
+        position: 'fixed',
+        right: 0,
+        bottom: 0,
+        margin: 16,
+      }}
+    >
+      Put your name here
+    </div>
+  </div>
+)
+
+export default {
+  Provider,
+}
--- a/examples/syntax-highlighting/deck.mdx
+++ b/examples/syntax-highlighting/deck.mdx
@ -0,0 +1,18 @@
+import future from '@mdx-deck/themes/future'
+import highlight from '@mdx-deck/themes/syntax-highlighter'
+
+export const themes = [
+  future,
+  highlight
+]
+
+# Hello!
+
+---
+
+```jsx
+import React from 'react'
+
+export default props =>
+  <h1>Highlighting</h1>
+```
--- a/examples/syntax-highlighting/package.json
+++ b/examples/syntax-highlighting/package.json
@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/syntax-highlighting-example",
+  "version": "2.3.1",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.1"
+  }
+}
--- a/package.json
+++ b/package.json
@ -1,9 +1,9 @@
 {
  "private": true,
-  "version": "2.0.0-0",
  "workspaces": [
    "packages/*",
    "templates/*",
+    "examples/*",
    "docs"
  ],
  "scripts": {
--- a/packages/components/src/Head.js
+++ b/packages/components/src/Head.js
@ -29,7 +29,13 @@ export const UserHead = ({ mdx }) =>
          child => child.props.originalType === Head
        )
        const head = React.Children.toArray(
-          heads.reduce((acc, head) => [...acc, ...head.props.children], [])
+          heads.reduce(
+            (acc, head) => [
+              ...acc,
+              ...React.Children.toArray(head.props.children),
+            ],
+            []
+          )
        )
        return createPortal(head, document.head)
      },
--- a/packages/mdx-deck/README.md
+++ b/packages/mdx-deck/README.md
@ -296,7 +296,9 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
 - [Advanced Usage](docs/advanced.md)
 - [API](docs/api.md)

-## Examples
+## Real Examples
+
+See how others have used MDX Deck for their presentations.

 - [Design Systems & React][design-systems-react] by [Diana Mounter](https://mobile.twitter.com/broccolini)
 - [Bringing Brazil to the Cloud, Now][brazil-now] by [Guillermo Rauch](https://mobile.twitter.com/rauchg/)
@ -304,6 +306,21 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
 - [I Got 99 Problems but GraphQL Ain't One][99-problems] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)
 - [Stop de #divFest][stop-div-fest] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)

+## Usage Examples
+
+The following examples will open in CodeSandbox.
+
+- [Basic Example](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/basic)
+- [Multiple Decks](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/multiple)
+- [Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/syntax-highlighting)
+- [Prism Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/prism)
+- [Aspect Ratio](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/aspect-ratio)
+- [Layouts](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/layouts)
+- [Images](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/images)
+- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
+- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
+- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
+
 ---

 ### Related