diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..e158a03 --- /dev/null +++ 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) + + diff --git a/examples/appear/deck.mdx b/examples/appear/deck.mdx new file mode 100644 index 0000000..db17c3a --- /dev/null +++ b/examples/appear/deck.mdx @@ -0,0 +1,26 @@ +import { Appear } from '@mdx-deck/components' + +# Hello! + +--- + + + +--- + +## One + + + +## Two +## Three + + + diff --git a/examples/appear/package.json b/examples/appear/package.json new file mode 100644 index 0000000..369230e --- /dev/null +++ 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" + } +} diff --git a/examples/aspect-ratio/deck.mdx b/examples/aspect-ratio/deck.mdx new file mode 100644 index 0000000..82878f2 --- /dev/null +++ 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 + diff --git a/examples/aspect-ratio/package.json b/examples/aspect-ratio/package.json new file mode 100644 index 0000000..ff0488c --- /dev/null +++ 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" + } +} diff --git a/examples/basic/deck.mdx b/examples/basic/deck.mdx new file mode 100644 index 0000000..f2ae0e6 --- /dev/null +++ b/examples/basic/deck.mdx @@ -0,0 +1,6 @@ + +# Hello! + +--- + +This is MDX Deck diff --git a/examples/basic/package.json b/examples/basic/package.json new file mode 100644 index 0000000..912d245 --- /dev/null +++ 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" + } +} diff --git a/examples/head/deck.mdx b/examples/head/deck.mdx new file mode 100644 index 0000000..236da97 --- /dev/null +++ b/examples/head/deck.mdx @@ -0,0 +1,12 @@ +import { Head } from '@mdx-deck/components' + + + Hello + + +# Hello! + +--- + +This deck has a custom title + diff --git a/examples/head/package.json b/examples/head/package.json new file mode 100644 index 0000000..9c1ea25 --- /dev/null +++ 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" + } +} diff --git a/examples/images/deck.mdx b/examples/images/deck.mdx new file mode 100644 index 0000000..9951233 --- /dev/null +++ b/examples/images/deck.mdx @@ -0,0 +1,23 @@ +import { + Image, +} from '@mdx-deck/components' + +# Hello! + +--- + + + +## Background Image + + + + diff --git a/examples/images/package.json b/examples/images/package.json new file mode 100644 index 0000000..6ddce5d --- /dev/null +++ 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" + } +} diff --git a/examples/layouts/deck.mdx b/examples/layouts/deck.mdx new file mode 100644 index 0000000..f5efc4e --- /dev/null +++ b/examples/layouts/deck.mdx @@ -0,0 +1,59 @@ +import { + Invert, + Split, + SplitRight, + Horizontal, + FullScreenCode, +} from '@mdx-deck/layouts' + +# Hello! + +--- + + + +## Invert Layout + + + +--- + + + +![](https://source.unsplash.com/random/768x2048?brooklyn) + +## Split Layout + + + +--- + + + +![](https://source.unsplash.com/random/768x2048?brooklyn) + +## SplitRight Layout + + + +--- + + + +## Horizontal Layout + +![](https://source.unsplash.com/random/768x2048?brooklyn) + +![](https://source.unsplash.com/random/768x2048?brooklyn) + + + +--- + + + +```jsx + +``` + + diff --git a/examples/layouts/package.json b/examples/layouts/package.json new file mode 100644 index 0000000..1d18601 --- /dev/null +++ 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" + } +} diff --git a/examples/multiple/deck.js b/examples/multiple/deck.js new file mode 100644 index 0000000..92c450c --- /dev/null +++ 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] diff --git a/examples/multiple/one.mdx b/examples/multiple/one.mdx new file mode 100644 index 0000000..99f7c9b --- /dev/null +++ b/examples/multiple/one.mdx @@ -0,0 +1,6 @@ + +# Hello! + +--- + +This is MDX Deck #1 diff --git a/examples/multiple/package.json b/examples/multiple/package.json new file mode 100644 index 0000000..e2078dd --- /dev/null +++ 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" + } +} diff --git a/examples/multiple/two.mdx b/examples/multiple/two.mdx new file mode 100644 index 0000000..7c78900 --- /dev/null +++ b/examples/multiple/two.mdx @@ -0,0 +1,6 @@ + +# This is Deck # 2 + +--- + +:sunglasses: diff --git a/examples/prism/deck.mdx b/examples/prism/deck.mdx new file mode 100644 index 0000000..17b5969 --- /dev/null +++ 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 => +

Highlighting

+``` diff --git a/examples/prism/package.json b/examples/prism/package.json new file mode 100644 index 0000000..9c16b6a --- /dev/null +++ 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" + } +} diff --git a/examples/provider/deck.mdx b/examples/provider/deck.mdx new file mode 100644 index 0000000..e315869 --- /dev/null +++ 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 + diff --git a/examples/provider/package.json b/examples/provider/package.json new file mode 100644 index 0000000..220e19a --- /dev/null +++ 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" + } +} diff --git a/examples/provider/theme.js b/examples/provider/theme.js new file mode 100644 index 0000000..8eb8200 --- /dev/null +++ b/examples/provider/theme.js @@ -0,0 +1,21 @@ +import React from 'react' + +const Provider = props => ( +
+ {props.children} +
+ Put your name here +
+
+) + +export default { + Provider, +} diff --git a/examples/syntax-highlighting/deck.mdx b/examples/syntax-highlighting/deck.mdx new file mode 100644 index 0000000..5a12749 --- /dev/null +++ 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 => +

Highlighting

+``` diff --git a/examples/syntax-highlighting/package.json b/examples/syntax-highlighting/package.json new file mode 100644 index 0000000..beb9347 --- /dev/null +++ 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" + } +} diff --git a/package.json b/package.json index ed38218..8f8cf1b 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "private": true, - "version": "2.0.0-0", "workspaces": [ "packages/*", "templates/*", + "examples/*", "docs" ], "scripts": { diff --git a/packages/components/src/Head.js b/packages/components/src/Head.js index 94c58cd..0b533ee 100644 --- 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) }, diff --git a/packages/mdx-deck/README.md b/packages/mdx-deck/README.md index 821e338..ca311ba 100644 --- 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