mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-29 13:58:02 +03:00
Merge branch 'master' into patch-1
This commit is contained in:
Miles Rausch
GitHub
commit
10171cca01
@ -68,6 +68,7 @@ npm start
|
||||
- [mdx-deck: slide decks powered by markdown and react][kcd-medium] by [Kent C. Dodds][]
|
||||
- [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])
|
||||
- [What is MDX][kcd-video] by [Kent C. Dodds][]
|
||||
- [Build a Custom Provider Component for MDX-Deck](ks-egghead) by [Kyle Shevlin][]
|
||||
|
||||
[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react
|
||||
[Kent C. Dodds]: https://mobile.twitter.com/kentcdodds
|
||||
@ -76,6 +77,8 @@ npm start
|
||||
[hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be
|
||||
[hw-demo]: https://github.com/hswolff/mdx-deck-demo
|
||||
[Harry Wolff]: https://mobile.twitter.com/hswolff
|
||||
[ks-egghead]: https://egghead.io/lessons/javascript-build-a-custom-provider-component-for-mdx-deck
|
||||
[Kyle Shevlin]: https://twitter.com/kyleshevlin
|
||||
|
||||
## Quick Start
|
||||
|
||||
@ -222,7 +225,7 @@ mdx-deck includes a built-in presenter mode, with a preview of the next slide an
|
||||
To use presenter mode:
|
||||
|
||||
- Open two windows in the same browser, with the same URL on two different screens. (this should work in both development and exported presentations)
|
||||
- In your window press the `Option + P` (`Alt + P`) key or add `?mode=presenter` to the URL to enter presenter mode.
|
||||
- In your window, press the `Option/Alt + P` keys (or add `?mode=presenter` to the URL) to enter presenter mode.
|
||||
- Display the other window on the screen for the audience to see.
|
||||
- Control the presentation from your window by using the left and right arrow keys; the other window should stay in sync
|
||||
|
||||
|
||||
@ -29,6 +29,8 @@ export { default as theme } from './theme'
|
||||
The theme should be an object with fields for fonts, colors, and CSS for individual components.
|
||||
It's recommended that all custom themes extend the default theme as a base.
|
||||
|
||||
<small>Note: you need to include [all keys](#reference) in the `colors` object for the theming to work correctly. You may want to use a deep [merge](https://www.npmjs.com/search?q=merge) strategy for extending existing themes more easily.</small>
|
||||
|
||||
```js
|
||||
// Example theme.js
|
||||
import theme from 'mdx-deck/themes'
|
||||
@ -40,6 +42,7 @@ export default {
|
||||
font: 'Roboto, sans-serif',
|
||||
// custom colors
|
||||
colors: {
|
||||
...theme.colors, // include existing theme colors
|
||||
text: '#f0f',
|
||||
background: 'black',
|
||||
link: '#0ff',
|
||||
|
||||
890
package-lock.json
generated
890
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
40
package.json
40
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mdx-deck",
|
||||
"version": "1.7.7",
|
||||
"version": "1.7.10",
|
||||
"description": "MDX-based presentation decks",
|
||||
"main": "dist/index.js",
|
||||
"bin": {
|
||||
@ -10,7 +10,7 @@
|
||||
"prepare": "npm run babel",
|
||||
"babel": "babel src -d dist",
|
||||
"watch": "babel src -d dist --watch",
|
||||
"start": "./cli.js docs/index.mdx -p 8989",
|
||||
"start": "./cli.js docs/index.mdx -p 8080",
|
||||
"build": "./cli.js build docs/index.mdx -d site",
|
||||
"pdf": "./cli.js pdf docs/index.mdx -d site",
|
||||
"screenshot": "./cli.js screenshot docs/index.mdx -d docs",
|
||||
@ -23,12 +23,12 @@
|
||||
"repository": "github:jxnblk/mdx-deck",
|
||||
"dependencies": {
|
||||
"@compositor/webfont": "^1.0.39",
|
||||
"@mdx-js/mdx": "^0.15.3",
|
||||
"@mdx-js/tag": "^0.15.0",
|
||||
"@mdx-js/mdx": "^0.15.7",
|
||||
"@mdx-js/tag": "^0.15.6",
|
||||
"ansi-html": "0.0.7",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-styled-components": "^1.7.1",
|
||||
"babel-plugin-styled-components": "^1.8.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
@ -39,9 +39,9 @@
|
||||
"gray-matter": "^4.0.1",
|
||||
"hhmmss": "^1.0.0",
|
||||
"html-entities": "^1.2.1",
|
||||
"koa": "^2.5.3",
|
||||
"koa": "^2.6.2",
|
||||
"koa-static": "^5.0.0",
|
||||
"koa-webpack": "^5.1.0",
|
||||
"koa-webpack": "^5.1.1",
|
||||
"loader-utils": "^1.1.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.get": "^4.4.2",
|
||||
@ -52,21 +52,21 @@
|
||||
"pkg-conf": "^2.1.0",
|
||||
"progress-bar-webpack-plugin": "^1.11.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"puppeteer": "^1.8.0",
|
||||
"puppeteer": "^1.10.0",
|
||||
"querystring": "^0.2.0",
|
||||
"react": "^16.5.2",
|
||||
"react-dev-utils": "^5.0.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"react": "^16.6.1",
|
||||
"react-dev-utils": "^6.1.1",
|
||||
"react-dom": "^16.6.1",
|
||||
"react-swipeable": "^4.3.0",
|
||||
"react-syntax-highlighter": "^8.0.1",
|
||||
"remark-emoji": "^2.0.1",
|
||||
"react-syntax-highlighter": "^8.1.0",
|
||||
"remark-emoji": "^2.0.2",
|
||||
"remark-unwrap-images": "0.0.2-0",
|
||||
"rimraf": "^2.6.2",
|
||||
"stringify-object": "^3.2.2",
|
||||
"styled-components": "^3.4.9",
|
||||
"styled-system": "^3.1.4",
|
||||
"stringify-object": "^3.3.0",
|
||||
"styled-components": "^3.4.10",
|
||||
"styled-system": "^3.1.11",
|
||||
"superbox": "^2.1.0",
|
||||
"webpack": "^4.19.1",
|
||||
"webpack": "^4.25.1",
|
||||
"webpack-hot-client": "^4.1.1",
|
||||
"webpack-merge": "^4.1.4",
|
||||
"webpack-node-externals": "^1.7.2"
|
||||
@ -74,13 +74,13 @@
|
||||
"peerDependencies": {},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"husky": "^1.0.0-rc.15",
|
||||
"husky": "^1.1.3",
|
||||
"jest": "^23.6.0",
|
||||
"jest-styled-components": "^5.0.1",
|
||||
"lint-staged": "^7.3.0",
|
||||
"mdx-deck-code-surfer": "^0.4.1",
|
||||
"prettier": "^1.14.3",
|
||||
"react-test-renderer": "^16.5.2"
|
||||
"prettier": "^1.15.2",
|
||||
"react-test-renderer": "^16.6.1"
|
||||
},
|
||||
"jest": {
|
||||
"roots": [
|
||||
|
||||
31
src/Root.js
31
src/Root.js
@ -1,19 +1,20 @@
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
width,
|
||||
height,
|
||||
color
|
||||
} from 'styled-system'
|
||||
import { width, height, color } from 'styled-system'
|
||||
|
||||
export const Root = styled.div([], {
|
||||
'@media print': {
|
||||
fontSize: '24px',
|
||||
height: 'auto'
|
||||
export const Root = styled.div(
|
||||
[],
|
||||
{
|
||||
'@media print': {
|
||||
fontSize: '24px',
|
||||
height: 'auto',
|
||||
},
|
||||
},
|
||||
},
|
||||
props => props.theme.font ? ({
|
||||
fontFamily: props.theme.font
|
||||
}) : null,
|
||||
props =>
|
||||
props.theme.font
|
||||
? {
|
||||
fontFamily: props.theme.font,
|
||||
}
|
||||
: null,
|
||||
props => props.theme.css,
|
||||
width,
|
||||
height,
|
||||
@ -23,12 +24,12 @@ export const Root = styled.div([], {
|
||||
Root.propTypes = {
|
||||
...width.propTypes,
|
||||
...height.propTypes,
|
||||
...color.propTypess
|
||||
...color.propTypes,
|
||||
}
|
||||
|
||||
Root.defaultProps = {
|
||||
color: 'text',
|
||||
bg: 'background'
|
||||
bg: 'background',
|
||||
}
|
||||
|
||||
export default Root
|
||||
|
||||
Loading…
Reference in New Issue
Block a user