mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-29 13:58:02 +03:00
Init
This commit is contained in:
Brent Jackson
commit
c9157a37d9
43
README.md
Normal file
43
README.md
Normal file
@ -0,0 +1,43 @@
|
||||
|
||||
# mdx-deck
|
||||
|
||||
Create presentation decks with [MDX][]
|
||||
|
||||
```sh
|
||||
npm i mdx-deck
|
||||
```
|
||||
|
||||
````md
|
||||
---
|
||||
imports:
|
||||
- import Demo from './components/Demo'
|
||||
---
|
||||
|
||||
# This is the title of my deck
|
||||
|
||||
---
|
||||
|
||||
# About Me
|
||||
|
||||
---
|
||||
|
||||
```jsx
|
||||
<CodeSnippet />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
<Demo />
|
||||
|
||||
---
|
||||
|
||||
# The end
|
||||
|
||||
````
|
||||
|
||||
```sh
|
||||
mdx-deck deck.mdx
|
||||
```
|
||||
|
||||
[MDX]: https://github.com/mdx-js/mdx
|
||||
17
cli.js
Executable file
17
cli.js
Executable file
@ -0,0 +1,17 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const open = require('react-dev-utils/openBrowser')
|
||||
const dev = require('./lib/dev')
|
||||
|
||||
const opts = {
|
||||
}
|
||||
|
||||
dev(opts)
|
||||
.then(res => {
|
||||
const url = 'http://localhost:' + res.port
|
||||
open(url)
|
||||
console.log(url)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
23
docs/index.mdx
Normal file
23
docs/index.mdx
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
imports:
|
||||
- import Box from 'superbox'
|
||||
---
|
||||
|
||||
# Hello
|
||||
|
||||
---
|
||||
|
||||
# This is a presentation deck!
|
||||
|
||||
---
|
||||
|
||||
# Built with [MDX][]
|
||||
|
||||
[MDX]: https://github.com/mdx-js/mdx
|
||||
|
||||
---
|
||||
|
||||
<Box p={3} bg='magenta'>
|
||||
And you can import React components!
|
||||
</Box>
|
||||
|
||||
140
lib/dev.js
Normal file
140
lib/dev.js
Normal file
@ -0,0 +1,140 @@
|
||||
const path = require('path')
|
||||
const webpack = require('webpack')
|
||||
const Koa = require('koa')
|
||||
const getPort = require('get-port')
|
||||
const koaWebpack = require('koa-webpack')
|
||||
const HTMLPlugin = require('mini-html-webpack-plugin')
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
|
||||
const chalk = require('chalk')
|
||||
|
||||
const devMiddleware = {
|
||||
publicPath: '/',
|
||||
clientLogLevel: 'error',
|
||||
stats: 'errors-only',
|
||||
logLevel: 'error',
|
||||
}
|
||||
|
||||
const babel = {
|
||||
presets: [
|
||||
'babel-preset-env',
|
||||
'babel-preset-stage-0',
|
||||
'babel-preset-react',
|
||||
].map(require.resolve)
|
||||
}
|
||||
|
||||
const rules = [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: babel
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: path.resolve(__dirname, '../node_modules'),
|
||||
include: [
|
||||
path.resolve(__dirname, '..'),
|
||||
],
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: babel
|
||||
},
|
||||
{
|
||||
test: /\.mdx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: babel
|
||||
},
|
||||
require.resolve('./loader.js'),
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const template = ({
|
||||
js,
|
||||
publicPath
|
||||
}) => `<!DOCTYPE html>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
<style>*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0}</style>
|
||||
<div id=root></div>
|
||||
${HTMLPlugin.generateJSReferences(js, publicPath)}
|
||||
`
|
||||
|
||||
const config = {
|
||||
stats: 'errors-only',
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules
|
||||
},
|
||||
resolve: {
|
||||
modules: [
|
||||
path.relative(process.cwd(), path.join(__dirname, '../node_modules')),
|
||||
'node_modules'
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new HTMLPlugin({
|
||||
template
|
||||
}),
|
||||
new ProgressBarPlugin({
|
||||
width: '24',
|
||||
complete: '█',
|
||||
incomplete: chalk.gray('░'),
|
||||
format: [
|
||||
chalk.magenta('[ok] :bar'),
|
||||
chalk.magenta(':percent'),
|
||||
chalk.gray(':elapseds :msg'),
|
||||
].join(' '),
|
||||
// summaryContent: chalk.magenta('[ok] done '),
|
||||
summary: false,
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
const start = async (opts = {}) => {
|
||||
const app = new Koa()
|
||||
// const dirname = path.dirname(opts.entry)
|
||||
const hotPort = await getPort()
|
||||
const hotClient = {
|
||||
port: hotPort,
|
||||
logLevel: 'error'
|
||||
}
|
||||
|
||||
// config.context = dirname
|
||||
|
||||
config.resolve.modules.push(
|
||||
// dirname,
|
||||
// path.join(dirname, 'node_modules')
|
||||
)
|
||||
|
||||
config.entry = [
|
||||
// path.join(__dirname, './overlay.js'),
|
||||
path.join(__dirname, './entry.js')
|
||||
]
|
||||
|
||||
config.plugins.push(
|
||||
new webpack.DefinePlugin({
|
||||
OPTIONS: JSON.stringify(opts),
|
||||
// APP_FILENAME: JSON.stringify(opts.entry),
|
||||
HOT_PORT: JSON.stringify(hotPort)
|
||||
})
|
||||
)
|
||||
|
||||
const middleware = await koaWebpack({
|
||||
config,
|
||||
devMiddleware,
|
||||
hotClient
|
||||
})
|
||||
const port = opts.port || await getPort()
|
||||
app.use(middleware)
|
||||
|
||||
const server = app.listen(port)
|
||||
return new Promise((resolve) => {
|
||||
middleware.devMiddleware.waitUntilValid(() => {
|
||||
resolve({ server, app, middleware, port })
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = start
|
||||
102
lib/entry.js
Normal file
102
lib/entry.js
Normal file
@ -0,0 +1,102 @@
|
||||
import React from 'react'
|
||||
import { render } from 'react-dom'
|
||||
import PropTypes from 'prop-types'
|
||||
import { MDXProvider } from '@mdx-js/tag'
|
||||
import styled from 'styled-components'
|
||||
import Box from 'superbox'
|
||||
import throttle from 'lodash.throttle'
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
// todo: dynamic import
|
||||
import slides from '../docs/index.mdx'
|
||||
|
||||
const Carousel = styled.div([], {
|
||||
display: 'flex',
|
||||
overflowX: 'auto',
|
||||
width: '100vw',
|
||||
})
|
||||
const Slide = styled.div([], {
|
||||
outline: '2px solid tomato',
|
||||
flex: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
width: '100vw',
|
||||
height: '90vh'
|
||||
})
|
||||
|
||||
const inc = state => ({ index: (state.index + 1) % state.length })
|
||||
const dec = state => state.index > 0
|
||||
? ({ index: (state.index - 1) % state.length })
|
||||
: null
|
||||
|
||||
class App extends React.Component {
|
||||
static propTypes = {
|
||||
slides: PropTypes.array.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
length: this.props.slides.length,
|
||||
index: 0
|
||||
}
|
||||
|
||||
root = React.createRef()
|
||||
|
||||
update = fn => this.setState(fn)
|
||||
|
||||
handleScroll = debounce(e => {
|
||||
if (this.isProgrammaticScroll) return
|
||||
const { scrollLeft } = e.target
|
||||
const rect = e.target.getBoundingClientRect()
|
||||
const n = Math.round(scrollLeft / rect.width)
|
||||
console.log('scroll', e, n)
|
||||
this.setState({ index: n })
|
||||
}, 1000)
|
||||
|
||||
componentDidMount () {
|
||||
this.root.current.addEventListener('scroll', this.handleScroll)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.root.current.removeEventListener('scroll', this.handleScroll)
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (!this.root.current) return
|
||||
const { index } = this.state
|
||||
const el = this.root.current.querySelector('#slide-' + index)
|
||||
if (!el) return
|
||||
this.isProgrammaticScroll = true
|
||||
el.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
setTimeout(() => {
|
||||
console.log(this.isProgrammaticScroll)
|
||||
this.isProgrammaticScroll = false
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { slides } = this.props
|
||||
return (
|
||||
<div>
|
||||
<Carousel innerRef={this.root}>
|
||||
{slides.map((Component, i) => (
|
||||
<Slide key={i} id={'slide-' + i}>
|
||||
<Component />
|
||||
</Slide>
|
||||
))}
|
||||
</Carousel>
|
||||
<samp>{this.state.index + 1}/{this.state.length}</samp>
|
||||
<button onClick={e => this.update(dec)}>previous</button>
|
||||
<button onClick={e => this.update(inc)}>next</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<App slides={slides} />, window.root)
|
||||
|
||||
if (module.hot) module.hot.accept()
|
||||
32
lib/loader.js
Normal file
32
lib/loader.js
Normal file
@ -0,0 +1,32 @@
|
||||
const mdx = require('@mdx-js/mdx')
|
||||
const matter = require('gray-matter')
|
||||
|
||||
const EXREG = /export\sdefault\s/g
|
||||
|
||||
module.exports = async function (src) {
|
||||
const callback = this.async()
|
||||
|
||||
const { data, content } = matter(src)
|
||||
|
||||
// todo: hoist imports
|
||||
const slides = content.split('---\n')
|
||||
.map(str => mdx.sync(str))
|
||||
.map(str => str.trim())
|
||||
.map(str => str.replace(EXREG, ''))
|
||||
|
||||
console.log(data)
|
||||
const {
|
||||
imports = []
|
||||
} = data
|
||||
|
||||
const code = `import React from 'react'
|
||||
import { MDXTag } from '@mdx-js/tag'
|
||||
${imports.join('\n')}
|
||||
|
||||
export default [
|
||||
${slides.join(',\n\n')}
|
||||
]`
|
||||
// console.log(code)
|
||||
|
||||
return callback(null, code)
|
||||
}
|
||||
29
package.json
Normal file
29
package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "mdx-deck",
|
||||
"version": "1.0.0-0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "./cli.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@mdx-js/tag": "^0.14.1",
|
||||
"chalk": "^2.4.1",
|
||||
"debounce": "^1.1.0",
|
||||
"get-port": "^4.0.0",
|
||||
"gray-matter": "^4.0.1",
|
||||
"koa": "^2.5.2",
|
||||
"koa-webpack": "^5.1.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"mini-html-webpack-plugin": "^0.2.3",
|
||||
"ok-cli": "^2.0.9",
|
||||
"progress-bar-webpack-plugin": "^1.11.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-dev-utils": "^5.0.1",
|
||||
"styled-components": "^3.3.3",
|
||||
"superbox": "^2.1.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user