jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-29 13:58:02 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #345 from jxnblk/examples

Browse Source 
Add examples
This commit is contained in:
Brent Jackson 2019-04-21 20:35:40 -04:00 committed by GitHub
commit 76bab3903f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 405 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
examples/README.md Normal file
View File

@ -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)
-->

26
examples/appear/deck.mdx Normal file
View File

@ -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>

13
examples/appear/package.json Normal file
View File

@ -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"
}
}

18
examples/aspect-ratio/deck.mdx Normal file
View File

@ -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

13
examples/aspect-ratio/package.json Normal file
View File

@ -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"
}
}

6
examples/basic/deck.mdx Normal file
View File

@ -0,0 +1,6 @@
# Hello!
---
This is MDX Deck

13
examples/basic/package.json Normal file
View File

@ -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"
}
}

12
examples/head/deck.mdx Normal file
View File

@ -0,0 +1,12 @@
import { Head } from '@mdx-deck/components'
<Head>
<title>Hello</title>
</Head>
# Hello!
---
This deck has a custom title

13
examples/head/package.json Normal file
View File

@ -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"
}
}

23
examples/images/deck.mdx Normal file
View File

@ -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>

13
examples/images/package.json Normal file
View File

@ -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"
}
}

59
examples/layouts/deck.mdx Normal file
View File

@ -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>

13
examples/layouts/package.json Normal file
View File

@ -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"
}
}

4
examples/multiple/deck.js Normal file
View File

@ -0,0 +1,4 @@
import { slides as one } from './one.mdx'
import { slides as two } from './two.mdx'
export const slides = [...one, ...two]

6
examples/multiple/one.mdx Normal file
View File

@ -0,0 +1,6 @@
# Hello!
---
This is MDX Deck #1

13
examples/multiple/package.json Normal file
View File

@ -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"
}
}

6
examples/multiple/two.mdx Normal file
View File

@ -0,0 +1,6 @@
# This is Deck # 2
---
:sunglasses:

18
examples/prism/deck.mdx Normal file
View File

@ -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>
```

13
examples/prism/package.json Normal file
View File

@ -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"
}
}

14
examples/provider/deck.mdx Normal file
View File

@ -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

13
examples/provider/package.json Normal file
View File

@ -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"
}
}

21
examples/provider/theme.js Normal file
View File

@ -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,
}

18
examples/syntax-highlighting/deck.mdx Normal file
View File

@ -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>
```

13
examples/syntax-highlighting/package.json Normal file
View File

@ -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"
}
}

2
package.json
View File

@ -1,9 +1,9 @@
{ {
"private": true, "private": true,
"version": "2.0.0-0",
"workspaces": [ "workspaces": [
"packages/*", "packages/*",
"templates/*", "templates/*",
"examples/*",
"docs" "docs"
], ],
"scripts": { "scripts": {

8
packages/components/src/Head.js
View File

@ -29,7 +29,13 @@ export const UserHead = ({ mdx }) =>
child => child.props.originalType === Head child => child.props.originalType === Head
) )
const head = React.Children.toArray( 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) return createPortal(head, document.head)
}, },

19
packages/mdx-deck/README.md
View File

@ -296,7 +296,9 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
- [Advanced Usage](docs/advanced.md) - [Advanced Usage](docs/advanced.md)
- [API](docs/api.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) - [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/) - [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) - [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) - [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 ### Related