jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-09-11 06:35:24 +03:00
Code Issues Projects Releases Wiki Activity

Add examples

Browse Source
This commit is contained in:
Brent Jackson 2019-04-21 20:07:57 -04:00
parent 4d4a722ca5
commit a91101363e
26 changed files with 387 additions and 2 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/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"
}
}

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,
"version": "2.0.0-0",
"workspaces": [
"packages/*",
"templates/*",
"examples/*",
"docs"
],
"scripts": {

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

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