mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-11 06:35:24 +03:00
Add Image component
This commit is contained in:
parent
ef7b891bad
commit
c1ff9717c1
12
.travis.yml
Normal file
12
.travis.yml
Normal file
@ -0,0 +1,12 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 10
|
||||
before_deploy:
|
||||
- npm run build
|
||||
deploy:
|
||||
provider: pages
|
||||
skip_cleanup: true
|
||||
github_token: $GH_TOKEN
|
||||
local_dir: site
|
||||
on:
|
||||
branch: master
|
14
README.md
14
README.md
@ -3,6 +3,8 @@
|
||||
|
||||
Create presentation decks with [MDX][]
|
||||
|
||||
**Beta**
|
||||
|
||||
```sh
|
||||
npm i mdx-deck
|
||||
```
|
||||
@ -105,11 +107,17 @@ TK
|
||||
|
||||
---
|
||||
|
||||
- [ ] default styles
|
||||
- [ ] URL hash
|
||||
- [ ] Root provider
|
||||
- [ ] export build
|
||||
- [ ] add default themes
|
||||
- [ ] theme docs
|
||||
- [ ] exporting docs
|
||||
- [ ] components docs
|
||||
- [ ] Full Image component
|
||||
- [x] default styles
|
||||
- [x] export build
|
||||
- [x] URL hash
|
||||
|
||||
[MDX]: https://github.com/mdx-js/mdx
|
||||
[MDXProvider]: https://github.com/mdx-js/mdx#mdxprovider
|
||||
[styled-system]: https://github.com/jxnblk/styled-system
|
||||
[styled-components]: https://github.com/styled-components/styled-components
|
||||
|
@ -2,6 +2,11 @@ import React from 'react'
|
||||
import Box from 'superbox'
|
||||
|
||||
export default ({ children }) =>
|
||||
<Box p={4} bg='tomato'>
|
||||
<Box
|
||||
p={4}
|
||||
bg='magenta'
|
||||
css={{
|
||||
width: '100vw'
|
||||
}}>
|
||||
{children}
|
||||
</Box>
|
||||
|
@ -1,31 +1,43 @@
|
||||
import Layout from './Layout'
|
||||
import { Image } from '../src'
|
||||
// export { default as theme } from './theme'
|
||||
|
||||
# Hello
|
||||
# mdx-deck
|
||||
|
||||
MDX-based presention decks
|
||||
---
|
||||
# This is a presentation deck!
|
||||
# Presentation decks
|
||||
---
|
||||
# Built with [MDX][]
|
||||
[MDX]: https://github.com/mdx-js/mdx
|
||||
---
|
||||
import Box from 'superbox'
|
||||
|
||||
<Box p={3} bg='magenta'>
|
||||
You can import React components!
|
||||
<Box
|
||||
fontSize={4}
|
||||
p={4}
|
||||
bg='magenta'>
|
||||
Import React components
|
||||
</Box>
|
||||
---
|
||||
export default Layout
|
||||
|
||||
# Slide Layouts
|
||||
And set per-slide layouts
|
||||
# Layouts
|
||||
Add layouts per-slide
|
||||
|
||||
---
|
||||
- You can use lists as well
|
||||
- Which is great for bullet points
|
||||
- Or making your point
|
||||
|
||||
- Make bulleted lists
|
||||
- To help make your point
|
||||
|
||||
---
|
||||
1. Install mdx-deck
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. `npm i -D mdx-deck`
|
||||
2. Write some markdown and JSX
|
||||
3. Present
|
||||
|
||||
---
|
||||
```
|
||||
<button>code example</button>
|
||||
@ -36,3 +48,5 @@ And set per-slide layouts
|
||||
– Anonymous
|
||||
---
|
||||
![](https://s3.amazonaws.com/jxnblk/ok-cli.gif)
|
||||
---
|
||||
<Image src='https://s3.amazonaws.com/jxnblk/ok-cli.gif' />
|
||||
|
@ -22,7 +22,7 @@
|
||||
"gray-matter": "^4.0.1",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"meow": "^5.0.0",
|
||||
"ok-cli": "^3.0.0-8",
|
||||
"ok-cli": "^3.0.0-9",
|
||||
"pkg-conf": "^2.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-dev-utils": "^5.0.1",
|
||||
|
22
src/Image.js
Normal file
22
src/Image.js
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { width, height } from 'styled-system'
|
||||
|
||||
const Image = styled.div([], {
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
},
|
||||
props => ({
|
||||
backgroundImage: `url(${props.src})`
|
||||
}),
|
||||
width,
|
||||
height,
|
||||
props => props.css
|
||||
)
|
||||
|
||||
Image.defaultProps = {
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
}
|
||||
|
||||
export default Image
|
@ -6,12 +6,15 @@ import {
|
||||
color
|
||||
} from 'styled-system'
|
||||
|
||||
const css = key => props => props.theme[key]
|
||||
|
||||
const Heading = styled.h1([], {
|
||||
lineHeight: 1.25
|
||||
},
|
||||
fontSize,
|
||||
space,
|
||||
color
|
||||
color,
|
||||
css('heading')
|
||||
)
|
||||
Heading.defaultProps = {
|
||||
color: 'heading',
|
||||
@ -61,24 +64,29 @@ const h6 = props =>
|
||||
fontSize={[ 2, 3 ]}
|
||||
/>
|
||||
|
||||
const a = styled.a([], {}, color)
|
||||
const a = styled.a([], color, css('link'))
|
||||
a.defaultProps = {
|
||||
target: '_blank',
|
||||
color: 'link'
|
||||
}
|
||||
|
||||
const p = styled.p([], {}, fontSize, space, color)
|
||||
const p = styled.p([],
|
||||
fontSize,
|
||||
space,
|
||||
color,
|
||||
css('paragraph')
|
||||
)
|
||||
|
||||
const ul = styled.ul([], {
|
||||
textAlign: 'left'
|
||||
}, fontSize)
|
||||
}, fontSize, css('ul'))
|
||||
ul.defaultProps = {
|
||||
fontSize: [ 2, 3 ]
|
||||
}
|
||||
|
||||
const ol = styled.ol([], {
|
||||
textAlign: 'left'
|
||||
}, fontSize)
|
||||
}, fontSize, css('ol'))
|
||||
ol.defaultProps = {
|
||||
fontSize: [ 2, 3 ]
|
||||
}
|
||||
@ -87,9 +95,14 @@ const li = styled.li([])
|
||||
const blockquote = styled.blockquote([], {
|
||||
textAlign: 'left',
|
||||
fontWeight: 'bold',
|
||||
}, fontSize, space, color)
|
||||
},
|
||||
fontSize,
|
||||
space,
|
||||
color,
|
||||
css('quote')
|
||||
)
|
||||
blockquote.defaultProps = {
|
||||
fontSize: [ 3, 4 ],
|
||||
fontSize: [ 2, 3, 4 ],
|
||||
px: 0,
|
||||
mx: 0,
|
||||
color: 'quote'
|
||||
@ -97,18 +110,23 @@ blockquote.defaultProps = {
|
||||
|
||||
const pre = styled.pre([], props => ({
|
||||
fontFamily: props.theme.monospace
|
||||
}), fontSize, space, color)
|
||||
}),
|
||||
fontSize,
|
||||
space,
|
||||
color,
|
||||
css('pre')
|
||||
)
|
||||
pre.defaultProps = {
|
||||
fontSize: 2,
|
||||
fontSize: [ 1, 2 ],
|
||||
m: 0,
|
||||
p: 2,
|
||||
color: 'code',
|
||||
bg: 'codeBackground'
|
||||
color: 'pre',
|
||||
bg: 'preBackground'
|
||||
}
|
||||
|
||||
const code = styled.code([], props => ({
|
||||
fontFamily: props.theme.monospace
|
||||
}), fontSize, space, color)
|
||||
}), fontSize, space, color, css('code'))
|
||||
code.defaultProps = {
|
||||
color: 'code',
|
||||
bg: 'codeBackground'
|
||||
@ -117,7 +135,7 @@ code.defaultProps = {
|
||||
const img = styled.img([], {
|
||||
maxWidth: '100%',
|
||||
height: 'auto'
|
||||
})
|
||||
}, css('image'))
|
||||
|
||||
export default {
|
||||
h1,
|
||||
@ -132,7 +150,8 @@ export default {
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
pre,
|
||||
code,
|
||||
pre: props => props.children,
|
||||
code: pre,
|
||||
inlineCode: code,
|
||||
img
|
||||
}
|
||||
|
@ -7,8 +7,10 @@ import debounce from 'lodash.debounce'
|
||||
|
||||
import defaultTheme from './theme'
|
||||
import defaultComponents from './components'
|
||||
|
||||
export { default as theme } from './theme'
|
||||
export { default as components } from './components'
|
||||
export { default as Image } from './Image'
|
||||
|
||||
export const inc = state => ({ index: (state.index + 1) % state.length })
|
||||
export const dec = state => state.index > 0
|
||||
@ -20,6 +22,7 @@ const CarouselRoot = styled.div([], {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
})
|
||||
|
||||
const CarouselInner = styled.div([], {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
@ -53,7 +56,9 @@ export const Slide = styled.div([], {
|
||||
}, space, color)
|
||||
|
||||
Slide.defaultProps = {
|
||||
p: [ 4, 5, 6 ],
|
||||
px: [ 4, 5, 6 ],
|
||||
pt: [ 3, 4 ],
|
||||
pb: [ 4, 5 ],
|
||||
color: 'text',
|
||||
bg: 'background'
|
||||
}
|
||||
@ -191,7 +196,7 @@ export default class SlideDeck extends React.Component {
|
||||
))}
|
||||
</Carousel>
|
||||
<Dots
|
||||
mt={-48}
|
||||
mt={-32}
|
||||
mx='auto'
|
||||
index={index}
|
||||
length={length}
|
||||
|
@ -10,11 +10,13 @@ export default {
|
||||
link: '#07c',
|
||||
heading: '#000',
|
||||
quote: '#000',
|
||||
pre: '#f0f',
|
||||
preBackground: '#333',
|
||||
code: '#f0f',
|
||||
codeBackground: '#333',
|
||||
codeBackground: 'transparent',
|
||||
},
|
||||
css: {
|
||||
fontSize: '32px',
|
||||
// textAlign: 'center'
|
||||
}
|
||||
},
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user