mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-29 05:46:00 +03:00
Basic monorepo setup
This commit is contained in:
Brent Jackson
parent
1df015397e
commit
e97e7a1df7
2
.gitignore
vendored
2
.gitignore
vendored
@ -2,4 +2,4 @@ dist
|
||||
site
|
||||
coverage
|
||||
node_modules
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
|
||||
11
.npmignore
11
.npmignore
@ -1,11 +0,0 @@
|
||||
src
|
||||
site
|
||||
docs
|
||||
coverage
|
||||
test
|
||||
.babelrc
|
||||
.travis.yml
|
||||
CHANGELOG.md
|
||||
CONTRIBUTING.md
|
||||
templates
|
||||
create-deck
|
||||
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
# Contributing
|
||||
|
||||
Thanks for contributing!
|
||||
@ -27,7 +26,6 @@ Run `npm test`
|
||||
- Watch Mode: `npm test -- --watch`
|
||||
- Coverage: `npm test -- --coverage`
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Contributor Covenant Code of Conduct
|
||||
@ -87,7 +85,7 @@ further defined and clarified by project maintainers.
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
|
||||
reported by contacting the project team at jxnblk@gmail.com. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
@ -103,5 +101,3 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
|
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/layouts')
|
||||
11166
package-lock.json
generated
11166
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
101
package.json
101
package.json
@ -1,91 +1,9 @@
|
||||
{
|
||||
"name": "mdx-deck",
|
||||
"version": "1.10.0",
|
||||
"description": "MDX-based presentation decks",
|
||||
"main": "src/index.js",
|
||||
"bin": {
|
||||
"mdx-deck": "./cli.js"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "./cli.js docs/index.mdx -p 8080",
|
||||
"build": "./cli.js build docs/index.mdx -d site",
|
||||
"help": "./cli.js",
|
||||
"test": "jest"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
"license": "MIT",
|
||||
"repository": "github:jxnblk/mdx-deck",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.3.4",
|
||||
"@babel/plugin-proposal-class-properties": "^7.3.4",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.0.0",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.2.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||
"@babel/preset-env": "^7.3.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@mdx-js/mdx": "^0.20.0",
|
||||
"@mdx-js/tag": "^0.18.0",
|
||||
"@reach/router": "^1.2.1",
|
||||
"babel-loader": "^8.0.5",
|
||||
"babel-plugin-styled-components": "^1.10.0",
|
||||
"chalk": "^2.4.2",
|
||||
"connect": "^3.6.6",
|
||||
"connect-history-api-fallback": "^1.6.0",
|
||||
"find-up": "^3.0.0",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"hhmmss": "^1.0.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.get": "^4.4.2",
|
||||
"mdx-plugin-split": "0.0.2",
|
||||
"meow": "^5.0.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"normalize-newline": "^3.0.0",
|
||||
"pkg-conf": "^2.1.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"querystring": "^0.2.0",
|
||||
"react": "^16.8.3",
|
||||
"react-dev-utils": "^7.0.3",
|
||||
"react-dom": "^16.8.3",
|
||||
"react-swipeable": "^5.0.1",
|
||||
"remark-emoji": "^2.0.2",
|
||||
"remark-unwrap-images": "^0.1.0",
|
||||
"rimraf": "^2.6.3",
|
||||
"serve-static": "^1.13.2",
|
||||
"styled-components": "^4.1.3",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-dev-middleware": "^3.6.0",
|
||||
"webpack-hot-client": "^4.1.1",
|
||||
"webpack-hot-middleware": "^2.24.3",
|
||||
"webpack-merge": "^4.2.1",
|
||||
"webpack-node-externals": "^1.7.2",
|
||||
"webpack-sources": "^1.3.0",
|
||||
"webpackbar": "^3.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rebass/grid": "^6.0.0-7",
|
||||
"babel-jest": "^24.1.0",
|
||||
"husky": "^1.3.1",
|
||||
"jest": "^24.1.0",
|
||||
"jest-styled-components": "^6.3.1",
|
||||
"lint-staged": "^8.1.5",
|
||||
"mdx-deck-code-surfer": "^0.5.5",
|
||||
"prettier": "^1.16.4",
|
||||
"react-test-renderer": "^16.8.3"
|
||||
},
|
||||
"jest": {
|
||||
"roots": [
|
||||
"<rootDir>/test/"
|
||||
],
|
||||
"testMatch": [
|
||||
"**/test/**/*.js"
|
||||
],
|
||||
"testURL": "http://localhost/",
|
||||
"coverageReporters": [
|
||||
"html"
|
||||
]
|
||||
},
|
||||
"private": true,
|
||||
"version": "2.0.0-0",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
@ -97,10 +15,9 @@
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"jsxBracketSameLine": true
|
||||
"devDependencies": {
|
||||
"husky": "^1.3.1",
|
||||
"lint-staged": "^8.1.5",
|
||||
"prettier": "^1.16.4"
|
||||
}
|
||||
}
|
||||
|
||||
7
packages/components/package.json
Normal file
7
packages/components/package.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "@mdx-deck/components",
|
||||
"version": "2.0.0-0",
|
||||
"main": "index.js",
|
||||
"author": "Brent Jackson <jxnblk@gmail.com>",
|
||||
"license": "MIT"
|
||||
}
|
||||
@ -22,36 +22,39 @@ export const Overview = ({
|
||||
|
||||
return (
|
||||
<Flex
|
||||
color='white'
|
||||
bg='black'
|
||||
color="white"
|
||||
bg="black"
|
||||
css={{
|
||||
alignItems: 'flex-start',
|
||||
height: '100vh'
|
||||
}}>
|
||||
height: '100vh',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mr='auto'
|
||||
mr="auto"
|
||||
px={2}
|
||||
py={3}
|
||||
css={{
|
||||
flex: 'none',
|
||||
height: '100vh',
|
||||
overflowY: 'auto'
|
||||
}}>
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
{slides.map((Component, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
role='link'
|
||||
role="link"
|
||||
p={1}
|
||||
style={{
|
||||
outline: i === index ? '1px solid #07c' : null
|
||||
outline: i === index ? '1px solid #07c' : null,
|
||||
}}
|
||||
css={{
|
||||
cursor: 'pointer'
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={e => {
|
||||
update({ index: i })
|
||||
}}>
|
||||
<Zoom zoom={1/6}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={1 / 6}>
|
||||
<Root {...props}>
|
||||
<Slide>
|
||||
<Component />
|
||||
@ -61,20 +64,16 @@ export const Overview = ({
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Box mx='auto' py={4} width={2/3}>
|
||||
<Zoom zoom={2/3}>
|
||||
<Root {...props}>
|
||||
{props.children}
|
||||
</Root>
|
||||
<Box mx="auto" py={4} width={2 / 3}>
|
||||
<Zoom zoom={2 / 3}>
|
||||
<Root {...props}>{props.children}</Root>
|
||||
</Zoom>
|
||||
<Flex>
|
||||
<Box ml='auto' py={2}>
|
||||
<Box ml="auto" py={2}>
|
||||
{index + 1}/{length}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box mt={3}>
|
||||
{notes}
|
||||
</Box>
|
||||
<Box mt={3}>{notes}</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
@ -87,7 +86,7 @@ Overview.propTypes = {
|
||||
step: PropTypes.number.isRequired,
|
||||
slides: PropTypes.array,
|
||||
mode: PropTypes.string,
|
||||
notes: PropTypes.object
|
||||
notes: PropTypes.object,
|
||||
}
|
||||
|
||||
export default Overview
|
||||
@ -32,14 +32,16 @@ export const Presenter = ({
|
||||
css={{
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Flex my="auto">
|
||||
<Box
|
||||
mx="auto"
|
||||
width={5 / 8}
|
||||
css={{
|
||||
border: '1px solid rgba(128, 128, 128, 0.25)',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={5 / 8}>
|
||||
<Root {...props}>{props.children}</Root>
|
||||
</Zoom>
|
||||
@ -50,12 +52,14 @@ export const Presenter = ({
|
||||
css={{
|
||||
flex: 'none',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mx="auto"
|
||||
css={{
|
||||
border: '1px solid rgba(128, 128, 128, 0.25)',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={1 / 4}>
|
||||
<Root {...props}>
|
||||
{Next && (
|
||||
@ -70,7 +74,8 @@ export const Presenter = ({
|
||||
py={3}
|
||||
css={{
|
||||
flex: 'auto',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{notes}
|
||||
</Box>
|
||||
</Flex>
|
||||
@ -83,7 +88,8 @@ export const Presenter = ({
|
||||
<Anchor
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={`${window.location.origin}/${window.location.hash}`}>
|
||||
href={`${window.location.origin}/${window.location.hash}`}
|
||||
>
|
||||
Open in Normal mode
|
||||
</Anchor>
|
||||
<Box mx="auto" />
|
||||
@ -233,20 +233,23 @@ export class SlideDeck extends React.Component {
|
||||
components={{
|
||||
...defaultComponents,
|
||||
...components,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Provider {...this.state} update={this.update}>
|
||||
{mode === modes.grid ? (
|
||||
<Grid {...context} slides={slides} update={this.update} />
|
||||
) : (
|
||||
<Swipeable
|
||||
onSwipedLeft={() => this.update(next)}
|
||||
onSwipedRight={() => this.update(previous)}>
|
||||
onSwipedRight={() => this.update(previous)}
|
||||
>
|
||||
<Wrapper
|
||||
{...this.state}
|
||||
slides={slides}
|
||||
width={width}
|
||||
height={height}
|
||||
update={this.update}>
|
||||
update={this.update}
|
||||
>
|
||||
<GoogleFonts />
|
||||
<Carousel index={index}>
|
||||
{slides.map((Component, i) => (
|
||||
@ -257,7 +260,8 @@ export class SlideDeck extends React.Component {
|
||||
index={i}
|
||||
className="Slide"
|
||||
active={i === index}
|
||||
metadata={metadata[i]}>
|
||||
metadata={metadata[i]}
|
||||
>
|
||||
<Component />
|
||||
</Slide>
|
||||
))}
|
||||
43
packages/components/src/Zoom.js
Normal file
43
packages/components/src/Zoom.js
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const ZoomRoot = styled.div(
|
||||
[],
|
||||
{
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
props => ({
|
||||
width: 100 * props.zoom + 'vw',
|
||||
height: 100 * props.zoom + 'vh',
|
||||
})
|
||||
)
|
||||
|
||||
ZoomRoot.propTypes = {
|
||||
zoom: PropTypes.number.isRequired,
|
||||
}
|
||||
|
||||
const ZoomInner = styled.div([], props => ({
|
||||
transformOrigin: '0 0',
|
||||
transform: `scale(${props.zoom})`,
|
||||
}))
|
||||
|
||||
ZoomInner.propTypes = {
|
||||
zoom: PropTypes.number.isRequired,
|
||||
}
|
||||
|
||||
const Zoom = ({ zoom, ...props }) => (
|
||||
<ZoomRoot zoom={zoom}>
|
||||
<ZoomInner zoom={zoom} {...props} />
|
||||
</ZoomRoot>
|
||||
)
|
||||
|
||||
Zoom.propTypes = {
|
||||
zoom: PropTypes.number,
|
||||
}
|
||||
|
||||
Zoom.defaultProps = {
|
||||
zoom: 1,
|
||||
}
|
||||
|
||||
export default Zoom
|
||||
@ -8,14 +8,14 @@ export const MDX_SLIDE_INDEX = 'mdx-slide-index'
|
||||
export const MDX_SLIDE_STEP = 'mdx-slide-step'
|
||||
|
||||
export const keys = {
|
||||
'right': 39,
|
||||
'pageDown': 34,
|
||||
'left': 37,
|
||||
'pageUp': 33,
|
||||
'space': 32,
|
||||
'p': 80,
|
||||
'o': 79,
|
||||
'g': 71,
|
||||
'up': 38,
|
||||
'down': 40,
|
||||
right: 39,
|
||||
pageDown: 34,
|
||||
left: 37,
|
||||
pageUp: 33,
|
||||
space: 32,
|
||||
p: 80,
|
||||
o: 79,
|
||||
g: 71,
|
||||
up: 38,
|
||||
down: 40,
|
||||
}
|
||||
@ -172,19 +172,22 @@ const Presenter = props => {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
display: 'flex',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 500 / 8 + '%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={5 / 8}>{props.children}</Zoom>
|
||||
</div>
|
||||
<div
|
||||
@ -192,7 +195,8 @@ const Presenter = props => {
|
||||
width: 100 / 4 + '%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={1 / 4}>
|
||||
{Next && (
|
||||
<Slide register={noop}>
|
||||
@ -208,7 +212,8 @@ const Presenter = props => {
|
||||
color: 'white',
|
||||
padding: 16,
|
||||
fontSize: 20,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<pre style={{ fontFamily: 'Menlo, monospace' }}>
|
||||
{index + 1} of {slides.length}
|
||||
</pre>
|
||||
@ -227,7 +232,8 @@ const Overview = props => {
|
||||
alignItems: 'flex-start',
|
||||
height: '100vh',
|
||||
backgroundColor: 'black',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
flex: 'none',
|
||||
@ -236,7 +242,8 @@ const Overview = props => {
|
||||
paddingRight: 4,
|
||||
overflowY: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{slides.map((Component, i) => (
|
||||
<Link
|
||||
key={i}
|
||||
@ -250,7 +257,8 @@ const Overview = props => {
|
||||
marginBottom: 4,
|
||||
cursor: 'pointer',
|
||||
outline: i === index ? '4px solid #0cf' : null,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={1 / 6}>
|
||||
<Slide register={noop}>
|
||||
<Component />
|
||||
@ -263,7 +271,8 @@ const Overview = props => {
|
||||
style={{
|
||||
width: 200 / 3 + '%',
|
||||
margin: 'auto',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Zoom zoom={2 / 3}>{props.children}</Zoom>
|
||||
</div>
|
||||
</div>
|
||||
@ -456,7 +465,8 @@ export class MDXDeck extends React.Component {
|
||||
<Wrapper {...this.state} index={index}>
|
||||
<Swipeable
|
||||
onSwipedRight={this.previous}
|
||||
onSwipedLeft={this.next}>
|
||||
onSwipedLeft={this.next}
|
||||
>
|
||||
<RootStyles>
|
||||
<GoogleFonts />
|
||||
<Router>
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
# npm init deck
|
||||
|
||||
Create mdx-deck presentations
|
||||
@ -15,28 +15,31 @@ log.error = (...args) => {
|
||||
|
||||
const template = 'jxnblk/mdx-deck/templates/basic'
|
||||
|
||||
const cli = meow(`
|
||||
const cli = meow(
|
||||
`
|
||||
Usage
|
||||
|
||||
$ npm init deck my-presentation
|
||||
|
||||
$ npx create-deck my-presentation
|
||||
|
||||
`, {
|
||||
booleanDefault: undefined,
|
||||
flags: {
|
||||
help: {
|
||||
type: 'boolean',
|
||||
alias: 'h'
|
||||
`,
|
||||
{
|
||||
booleanDefault: undefined,
|
||||
flags: {
|
||||
help: {
|
||||
type: 'boolean',
|
||||
alias: 'h',
|
||||
},
|
||||
version: {
|
||||
type: 'boolean',
|
||||
alias: 'v',
|
||||
},
|
||||
},
|
||||
version: {
|
||||
type: 'boolean',
|
||||
alias: 'v'
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
const [ name ] = cli.input
|
||||
const [name] = cli.input
|
||||
|
||||
if (!name) {
|
||||
cli.showHelp(0)
|
||||
7
packages/html-plugin/package.json
Normal file
7
packages/html-plugin/package.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "@mdx-deck/webpack-html-plugin",
|
||||
"version": "2.0.0-0",
|
||||
"author": "Brent Jackson <jxnblk@gmail.com>",
|
||||
"license": "MIT",
|
||||
"repository": "github:jxnblk/mdx-deck"
|
||||
}
|
||||
@ -5,7 +5,7 @@ import Box from '../Box'
|
||||
|
||||
const Root = styled.div([], {
|
||||
width: '100vw',
|
||||
height: '100vh'
|
||||
height: '100vh',
|
||||
})
|
||||
|
||||
const Horizontal = ({ children }) => {
|
||||
@ -17,8 +17,9 @@ const Horizontal = ({ children }) => {
|
||||
<Flex
|
||||
css={{
|
||||
alignItems: 'center',
|
||||
height: '100%'
|
||||
}}>
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{kids.map(k => (
|
||||
<Box key={k.key} width={1 / numberOfChildren}>
|
||||
{k}
|
||||
@ -16,14 +16,11 @@ const Split = ({ children }) => {
|
||||
<Flex
|
||||
css={{
|
||||
alignItems: 'center',
|
||||
height: '100%'
|
||||
}}>
|
||||
<Box width={1 / 2}>
|
||||
{a}
|
||||
</Box>
|
||||
<Box width={1 / 2}>
|
||||
{rest}
|
||||
</Box>
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Box width={1 / 2}>{a}</Box>
|
||||
<Box width={1 / 2}>{rest}</Box>
|
||||
</Flex>
|
||||
</Root>
|
||||
)
|
||||
@ -5,7 +5,7 @@ import Box from '../Box'
|
||||
|
||||
const Root = styled.div([], {
|
||||
width: '100vw',
|
||||
height: '100vh'
|
||||
height: '100vh',
|
||||
})
|
||||
|
||||
const SplitRight = ({ children }) => {
|
||||
@ -16,8 +16,9 @@ const SplitRight = ({ children }) => {
|
||||
<Flex
|
||||
css={{
|
||||
alignItems: 'center',
|
||||
height: '100%'
|
||||
}}>
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Box width={1 / 2}>{rest}</Box>
|
||||
<Box width={1 / 2}>{a}</Box>
|
||||
</Flex>
|
||||
106
packages/mdx-deck/package.json
Normal file
106
packages/mdx-deck/package.json
Normal file
@ -0,0 +1,106 @@
|
||||
{
|
||||
"name": "mdx-deck",
|
||||
"version": "1.10.0",
|
||||
"description": "MDX-based presentation decks",
|
||||
"main": "src/index.js",
|
||||
"bin": {
|
||||
"mdx-deck": "./cli.js"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "./cli.js docs/index.mdx -p 8080",
|
||||
"build": "./cli.js build docs/index.mdx -d site",
|
||||
"help": "./cli.js",
|
||||
"test": "jest"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
"license": "MIT",
|
||||
"repository": "github:jxnblk/mdx-deck",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.3.4",
|
||||
"@babel/plugin-proposal-class-properties": "^7.3.4",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.0.0",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.2.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||
"@babel/preset-env": "^7.3.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@mdx-js/mdx": "^0.20.0",
|
||||
"@mdx-js/tag": "^0.18.0",
|
||||
"@reach/router": "^1.2.1",
|
||||
"babel-loader": "^8.0.5",
|
||||
"babel-plugin-styled-components": "^1.10.0",
|
||||
"chalk": "^2.4.2",
|
||||
"connect": "^3.6.6",
|
||||
"connect-history-api-fallback": "^1.6.0",
|
||||
"find-up": "^3.0.0",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"hhmmss": "^1.0.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.get": "^4.4.2",
|
||||
"mdx-plugin-split": "0.0.2",
|
||||
"meow": "^5.0.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"normalize-newline": "^3.0.0",
|
||||
"pkg-conf": "^2.1.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"querystring": "^0.2.0",
|
||||
"react": "^16.8.3",
|
||||
"react-dev-utils": "^7.0.3",
|
||||
"react-dom": "^16.8.3",
|
||||
"react-swipeable": "^5.0.1",
|
||||
"remark-emoji": "^2.0.2",
|
||||
"remark-unwrap-images": "^0.1.0",
|
||||
"rimraf": "^2.6.3",
|
||||
"serve-static": "^1.13.2",
|
||||
"styled-components": "^4.1.3",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-dev-middleware": "^3.6.0",
|
||||
"webpack-hot-client": "^4.1.1",
|
||||
"webpack-hot-middleware": "^2.24.3",
|
||||
"webpack-merge": "^4.2.1",
|
||||
"webpack-node-externals": "^1.7.2",
|
||||
"webpack-sources": "^1.3.0",
|
||||
"webpackbar": "^3.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rebass/grid": "^6.0.0-7",
|
||||
"babel-jest": "^24.1.0",
|
||||
"husky": "^1.3.1",
|
||||
"jest": "^24.1.0",
|
||||
"jest-styled-components": "^6.3.1",
|
||||
"lint-staged": "^8.1.5",
|
||||
"mdx-deck-code-surfer": "^0.5.5",
|
||||
"prettier": "^1.16.4",
|
||||
"react-test-renderer": "^16.8.3"
|
||||
},
|
||||
"jest": {
|
||||
"roots": [
|
||||
"<rootDir>/test/"
|
||||
],
|
||||
"testMatch": [
|
||||
"**/test/**/*.js"
|
||||
],
|
||||
"testURL": "http://localhost/",
|
||||
"coverageReporters": [
|
||||
"html"
|
||||
]
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{md,js,json}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"jsxBracketSameLine": true
|
||||
}
|
||||
}
|
||||
3
packages/mdx-plugin/README.md
Normal file
3
packages/mdx-plugin/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# mdx-plugin-split
|
||||
|
||||
Splits MDX files into an array of components for use in projects like MDX Deck.
|
||||
130
packages/mdx-plugin/index.js
Normal file
130
packages/mdx-plugin/index.js
Normal file
@ -0,0 +1,130 @@
|
||||
const visit = require('unist-util-visit')
|
||||
const is = require('unist-util-is')
|
||||
|
||||
// do i need this?
|
||||
const mdxAstToMdxHast = require('@mdx-js/mdx/mdx-ast-to-mdx-hast')
|
||||
// const mdx = require('@mdx-js/mdx')
|
||||
// removes html comments
|
||||
// const toMDXAST = require('@mdx-js/mdx/md-ast-to-mdx-ast')
|
||||
// const mdxHastToJsx = require('@mdx-js/mdx/mdx-hast-to-jsx')
|
||||
// const { toJSX } = require('@mdx-js/mdx/mdx-hast-to-jsx')
|
||||
|
||||
// custom implementation
|
||||
const toJSX = (node, parent) => {
|
||||
let children = ''
|
||||
if (node.type === 'root') {
|
||||
const jsxNodes = []
|
||||
let layout = ''
|
||||
|
||||
for (const child of node.children) {
|
||||
if (child.type === 'import') continue
|
||||
if (child.type === 'export') {
|
||||
if (!child.default) continue
|
||||
layout = child.value
|
||||
.replace(/^export\s+default\s+/, '')
|
||||
.replace(/;\s*$/, '')
|
||||
continue
|
||||
}
|
||||
jsxNodes.push(child)
|
||||
}
|
||||
|
||||
return [
|
||||
'(props => (',
|
||||
' <MDXTag',
|
||||
' name="wrapper"',
|
||||
layout && ` Layout={${layout}}`,
|
||||
' components={props.components}>',
|
||||
' ' + jsxNodes.map(child => toJSX(child, node)).join('\n '),
|
||||
' </MDXTag>',
|
||||
'))',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n')
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
children = node.children
|
||||
.map(child => {
|
||||
return toJSX(child, node)
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
|
||||
if (node.type === 'element') {
|
||||
let props = ''
|
||||
if (Object.keys(node.properties).length > 0) {
|
||||
props = JSON.stringify(node.properties)
|
||||
}
|
||||
return [
|
||||
'<MDXTag',
|
||||
` name="${node.tagName}"`,
|
||||
' components={props.components}',
|
||||
parent.tagName && ` parentName="${parent.tagName}"`,
|
||||
props && ` props={${props}}`,
|
||||
'>',
|
||||
children,
|
||||
'</MDXTag>',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('')
|
||||
}
|
||||
|
||||
if (node.type === 'comment') {
|
||||
return `{/*${node.value}*/}`
|
||||
}
|
||||
|
||||
return node.value
|
||||
}
|
||||
|
||||
const delimiter = 'thematicBreak'
|
||||
|
||||
module.exports = (opts = {}) => {
|
||||
return (tree, file) => {
|
||||
const { children } = tree
|
||||
const splits = []
|
||||
const slides = []
|
||||
|
||||
visit(tree, node => {
|
||||
if (is(delimiter, node)) {
|
||||
const i = children.indexOf(node)
|
||||
splits.push(i)
|
||||
}
|
||||
})
|
||||
|
||||
let previousSplit = 0
|
||||
|
||||
for (let i = 0; i < splits.length; i++) {
|
||||
const split = splits[i]
|
||||
slides.push(children.slice(previousSplit, split))
|
||||
previousSplit = split + 1
|
||||
}
|
||||
|
||||
slides.push(children.slice(previousSplit))
|
||||
|
||||
const jsx = slides.map(slide => {
|
||||
// no idea what I'm doing
|
||||
// not sure how to convert ast to jsx here...
|
||||
const hast = mdxAstToMdxHast()({
|
||||
type: 'root',
|
||||
children: slide,
|
||||
})
|
||||
const code = toJSX(
|
||||
hast,
|
||||
{},
|
||||
{
|
||||
skipExport: true,
|
||||
}
|
||||
)
|
||||
return code
|
||||
// const wrapped = `(() => ${code})()`
|
||||
// return wrapped
|
||||
})
|
||||
|
||||
tree.children.push({
|
||||
type: 'export',
|
||||
default: false,
|
||||
value: `export const slides = [${jsx.join(',\n')}]`,
|
||||
})
|
||||
// console.log(tree)
|
||||
}
|
||||
}
|
||||
21
packages/mdx-plugin/package.json
Normal file
21
packages/mdx-plugin/package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "mdx-plugin-split",
|
||||
"version": "0.0.2",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "nyc ava"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson <jxnblk@gmail.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@mdx-js/mdx": "^0.20.0",
|
||||
"ava": "^1.2.1",
|
||||
"nyc": "^13.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"unist-util-is": "^2.1.2",
|
||||
"unist-util-visit": "^1.4.0"
|
||||
}
|
||||
}
|
||||
24
packages/mdx-plugin/test.js
Normal file
24
packages/mdx-plugin/test.js
Normal file
@ -0,0 +1,24 @@
|
||||
import test from 'ava'
|
||||
import mdx from '@mdx-js/mdx'
|
||||
import plugin from '.'
|
||||
|
||||
const src = `
|
||||
export default props =>
|
||||
<section>
|
||||
{props.children}
|
||||
</section>
|
||||
|
||||
# Hello
|
||||
---
|
||||
## Two
|
||||
---
|
||||
## Three
|
||||
`
|
||||
|
||||
test('adds an export', t => {
|
||||
const code = mdx.sync(src, {
|
||||
mdPlugins: [plugin],
|
||||
})
|
||||
t.is(typeof code, 'string')
|
||||
t.snapshot(code)
|
||||
})
|
||||
66
packages/mdx-plugin/test.js.md
Normal file
66
packages/mdx-plugin/test.js.md
Normal file
@ -0,0 +1,66 @@
|
||||
# Snapshot report for `test.js`
|
||||
|
||||
The actual snapshot is saved in `test.js.snap`.
|
||||
|
||||
Generated by [AVA](https://ava.li).
|
||||
|
||||
## adds an export
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
`␊
|
||||
export const slides = [(props => (␊
|
||||
<MDXTag␊
|
||||
name="wrapper"␊
|
||||
Layout={props =>␊
|
||||
<section>␊
|
||||
{props.children}␊
|
||||
</section>}␊
|
||||
components={props.components}>␊
|
||||
␊
|
||||
␊
|
||||
<MDXTag name="h1" components={props.components}>Hello</MDXTag>␊
|
||||
</MDXTag>␊
|
||||
)),␊
|
||||
(props => (␊
|
||||
<MDXTag␊
|
||||
name="wrapper"␊
|
||||
components={props.components}>␊
|
||||
<MDXTag name="h2" components={props.components}>Two</MDXTag>␊
|
||||
</MDXTag>␊
|
||||
)),␊
|
||||
(props => (␊
|
||||
<MDXTag␊
|
||||
name="wrapper"␊
|
||||
components={props.components}>␊
|
||||
<MDXTag name="h2" components={props.components}>Three</MDXTag>␊
|
||||
</MDXTag>␊
|
||||
))]␊
|
||||
const layoutProps = {␊
|
||||
slides␊
|
||||
};␊
|
||||
export default class MDXContent extends React.Component {␊
|
||||
constructor(props) {␊
|
||||
super(props)␊
|
||||
this.layout = props =>␊
|
||||
<section>␊
|
||||
{props.children}␊
|
||||
</section>␊
|
||||
}␊
|
||||
render() {␊
|
||||
const { components, ...props } = this.props␊
|
||||
␊
|
||||
return <MDXTag␊
|
||||
name="wrapper"␊
|
||||
Layout={this.layout} layoutProps={Object.assign({}, layoutProps, props)}␊
|
||||
components={components}>␊
|
||||
<MDXTag name="h1" components={components}>{`Hello`}</MDXTag>␊
|
||||
<MDXTag name="hr" components={components}></MDXTag>␊
|
||||
<MDXTag name="h2" components={components}>{`Two`}</MDXTag>␊
|
||||
<MDXTag name="hr" components={components}></MDXTag>␊
|
||||
<MDXTag name="h2" components={components}>{`Three`}</MDXTag>␊
|
||||
␊
|
||||
</MDXTag>␊
|
||||
}␊
|
||||
}␊
|
||||
MDXContent.isMDXComponent = true`
|
||||
BIN
packages/mdx-plugin/test.js.snap
Normal file
BIN
packages/mdx-plugin/test.js.snap
Normal file
Binary file not shown.
@ -17,9 +17,9 @@ export default {
|
||||
heading: {
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em',
|
||||
fontWeight: 600
|
||||
fontWeight: 600,
|
||||
},
|
||||
quote: {
|
||||
fontWeight: 600
|
||||
}
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
42
src/Zoom.js
42
src/Zoom.js
@ -1,42 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const ZoomRoot = styled.div([], {
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
props => ({
|
||||
width: (100 * props.zoom) + 'vw',
|
||||
height: (100 * props.zoom) + 'vh',
|
||||
})
|
||||
)
|
||||
|
||||
ZoomRoot.propTypes = {
|
||||
zoom: PropTypes.number.isRequired
|
||||
}
|
||||
|
||||
const ZoomInner = styled.div([],
|
||||
props => ({
|
||||
transformOrigin: '0 0',
|
||||
transform: `scale(${props.zoom})`
|
||||
})
|
||||
)
|
||||
|
||||
ZoomInner.propTypes = {
|
||||
zoom: PropTypes.number.isRequired
|
||||
}
|
||||
|
||||
const Zoom = ({ zoom, ...props }) =>
|
||||
<ZoomRoot zoom={zoom}>
|
||||
<ZoomInner zoom={zoom} {...props} />
|
||||
</ZoomRoot>
|
||||
|
||||
Zoom.propTypes = {
|
||||
zoom: PropTypes.number
|
||||
}
|
||||
|
||||
Zoom.defaultProps = {
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
export default Zoom
|
||||
@ -1,91 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MDXDeck renders 1`] = `
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
font-family: system-ui,sans-serif;
|
||||
color: #000;
|
||||
background-color: white;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.c0 li > ul,
|
||||
.c0 li > ol {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.c0 li > p {
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c0 ol {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (min-width:64em) {
|
||||
.c0 {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
role="group"
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
role="group"
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<h1>
|
||||
hi
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,15 +0,0 @@
|
||||
import 'jest-styled-components'
|
||||
import React from 'react'
|
||||
import { create as render } from 'react-test-renderer'
|
||||
import { MDXDeck } from '../src'
|
||||
|
||||
const renderJSON = el => render(el).toJSON()
|
||||
|
||||
describe('MDXDeck', () => {
|
||||
test('renders', () => {
|
||||
const json = renderJSON(<MDXDeck slides={[() => <h1>hi</h1>]} />)
|
||||
expect(json).toMatchSnapshot(``)
|
||||
})
|
||||
|
||||
test.todo('handles keydown events')
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user