mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-11 06:35:24 +03:00
Add examples
This commit is contained in:
parent
4d4a722ca5
commit
a91101363e
18
examples/README.md
Normal file
18
examples/README.md
Normal 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
26
examples/appear/deck.mdx
Normal 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
13
examples/appear/package.json
Normal 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
18
examples/aspect-ratio/deck.mdx
Normal 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
13
examples/aspect-ratio/package.json
Normal 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
6
examples/basic/deck.mdx
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
# Hello!
|
||||
|
||||
---
|
||||
|
||||
This is MDX Deck
|
13
examples/basic/package.json
Normal file
13
examples/basic/package.json
Normal 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
12
examples/head/deck.mdx
Normal 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
13
examples/head/package.json
Normal 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
23
examples/images/deck.mdx
Normal 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
13
examples/images/package.json
Normal 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
59
examples/layouts/deck.mdx
Normal 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
13
examples/layouts/package.json
Normal 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
4
examples/multiple/deck.js
Normal 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
6
examples/multiple/one.mdx
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
# Hello!
|
||||
|
||||
---
|
||||
|
||||
This is MDX Deck #1
|
13
examples/multiple/package.json
Normal file
13
examples/multiple/package.json
Normal 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
6
examples/multiple/two.mdx
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
# This is Deck # 2
|
||||
|
||||
---
|
||||
|
||||
:sunglasses:
|
18
examples/prism/deck.mdx
Normal file
18
examples/prism/deck.mdx
Normal 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
13
examples/prism/package.json
Normal 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
14
examples/provider/deck.mdx
Normal 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
13
examples/provider/package.json
Normal 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
21
examples/provider/theme.js
Normal 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
18
examples/syntax-highlighting/deck.mdx
Normal 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
13
examples/syntax-highlighting/package.json
Normal 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"
|
||||
}
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
{
|
||||
"private": true,
|
||||
"version": "2.0.0-0",
|
||||
"workspaces": [
|
||||
"packages/*",
|
||||
"templates/*",
|
||||
"examples/*",
|
||||
"docs"
|
||||
],
|
||||
"scripts": {
|
||||
|
@ -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)
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user