mirror of
https://github.com/c8r/x0.git
synced 2024-08-16 17:00:24 +03:00
Adjust loader config and add fm loader
This commit is contained in:
Brent Jackson
parent
c0fb3bef70
commit
de4490bacd
58
docs/_app.js
58
docs/_app.js
@ -1,58 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Provider,
|
||||
Flex,
|
||||
Box,
|
||||
Container,
|
||||
Text,
|
||||
Caps,
|
||||
BlockLink,
|
||||
} from 'rebass'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Logo } from '@compositor/logo'
|
||||
import theme from './theme'
|
||||
|
||||
export default ({ render }) =>
|
||||
<Provider theme={theme}>
|
||||
<Flex alignItems='center'>
|
||||
<BlockLink
|
||||
href='https://compositor.io'>
|
||||
<Flex px={1} py={2} alignItems='center'>
|
||||
<Logo size={32} />
|
||||
<Caps fontWeight='bold'>
|
||||
Compositor
|
||||
</Caps>
|
||||
</Flex>
|
||||
</BlockLink>
|
||||
<Box mx='auto' />
|
||||
<BlockLink px={3} is={Link} to='/'>
|
||||
<Caps fontWeight='bold'>
|
||||
x0
|
||||
</Caps>
|
||||
</BlockLink>
|
||||
<BlockLink px={3} href='https://github.com/c8r/x0'>
|
||||
<Caps fontWeight='bold'>
|
||||
GitHub
|
||||
</Caps>
|
||||
</BlockLink>
|
||||
</Flex>
|
||||
{render()}
|
||||
<Container>
|
||||
<Flex py={4} mt={5} flexWrap='wrap'>
|
||||
<BlockLink my={2} mr={3} href='https://github.com/c8r/x0'>
|
||||
<Caps fontWeight='bold'>
|
||||
GitHub
|
||||
</Caps>
|
||||
</BlockLink>
|
||||
<BlockLink my={2} mr={3} href='https://compositor.io'>
|
||||
<Caps fontWeight='bold'>
|
||||
Compositor
|
||||
</Caps>
|
||||
</BlockLink>
|
||||
<Box mx='auto' />
|
||||
<Text my={2} fontSize={0}>
|
||||
© 2018 Compositor, Inc. All rights reserved
|
||||
</Text>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Provider>
|
||||
@ -1,70 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
Container,
|
||||
Box,
|
||||
Flex,
|
||||
Caps,
|
||||
Heading,
|
||||
Text,
|
||||
Button,
|
||||
Pre,
|
||||
} from 'rebass'
|
||||
import { Logo } from '@compositor/logo'
|
||||
|
||||
const Video = styled.video([], {
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
borderRadius: '16px',
|
||||
})
|
||||
|
||||
export default class extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Container py={5}>
|
||||
<Heading
|
||||
is='h1'
|
||||
mb={4}
|
||||
lineHeight={1.125}
|
||||
fontWeight='bold'
|
||||
fontSize={[ 4, 5, 6 ]}>
|
||||
x0: Zero-config React development environment & static site generator
|
||||
</Heading>
|
||||
<Box mb={4}>
|
||||
<Video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
poster='hello-x0.gif'
|
||||
src='hello-x0.mp4'
|
||||
/>
|
||||
</Box>
|
||||
<Pre>npm i -g @compositor/x0</Pre>
|
||||
<Flex py={4}>
|
||||
<Button
|
||||
is='a'
|
||||
px={4}
|
||||
py={3}
|
||||
bg='black'
|
||||
href='https://github.com/c8r/x0'>
|
||||
GitHub
|
||||
</Button>
|
||||
<Box mx={1} />
|
||||
<Button
|
||||
is={Link}
|
||||
px={4}
|
||||
py={3}
|
||||
bg='black'
|
||||
to='/docs'>
|
||||
Documentation
|
||||
</Button>
|
||||
</Flex>
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
// 'raw-loader'
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
'env',
|
||||
'stage-0',
|
||||
'react'
|
||||
]
|
||||
}
|
||||
},
|
||||
'@compositor/md-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,12 @@
|
||||
const path = require('path')
|
||||
|
||||
const remark = {
|
||||
images: require('remark-images'),
|
||||
emoji: require('remark-emoji'),
|
||||
slug: require('remark-slug'),
|
||||
autolinkHeadings: require('remark-autolink-headings'),
|
||||
}
|
||||
|
||||
const babel = {
|
||||
presets: [
|
||||
'babel-preset-env',
|
||||
@ -27,20 +34,24 @@ const rules = [
|
||||
options: babel
|
||||
},
|
||||
{
|
||||
test: /\.jsx$/,
|
||||
loader: require.resolve('@compositor/jsx-loader'),
|
||||
options: {}
|
||||
},
|
||||
{
|
||||
test: /\.mdx$/,
|
||||
test: /\.(md|mdx|jsx)$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: babel
|
||||
},
|
||||
{
|
||||
loader: require.resolve('@mdx-js/loader')
|
||||
}
|
||||
loader: require.resolve('@mdx-js/loader'),
|
||||
options: {
|
||||
mdPlugins: [
|
||||
remark.slug,
|
||||
remark.autolinkHeadings,
|
||||
remark.images,
|
||||
remark.emoji,
|
||||
]
|
||||
}
|
||||
},
|
||||
path.join(__dirname, './mdx-fm-loader'),
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
} from 'react-router-dom'
|
||||
|
||||
const IS_CLIENT = typeof document !== 'undefined'
|
||||
const req = require.context(DIRNAME, false, /\.(js|mdx|jsx)$/)
|
||||
const req = require.context(DIRNAME, false, /\.(js|md|mdx|jsx)$/)
|
||||
|
||||
const { filename, basename = '', disableScroll } = OPTIONS
|
||||
const index = filename ? path.basename(filename, path.extname(filename)) : 'index'
|
||||
|
||||
13
lib/mdx-fm-loader.js
Normal file
13
lib/mdx-fm-loader.js
Normal file
@ -0,0 +1,13 @@
|
||||
// front-matter loader for mdx
|
||||
const matter = require('gray-matter')
|
||||
const stringifyObject = require('stringify-object')
|
||||
|
||||
module.exports = async function (src) {
|
||||
const callback = this.async()
|
||||
const { content, data } = matter(src)
|
||||
|
||||
const code = `export const frontMatter = ${stringifyObject(data)}
|
||||
${content}
|
||||
`
|
||||
return callback(null, code)
|
||||
}
|
||||
35
package.json
35
package.json
@ -27,13 +27,12 @@
|
||||
"author": "Brent Jackson",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@compositor/jsx-loader": "^1.0.0-4",
|
||||
"@compositor/log": "^1.0.0-0",
|
||||
"@mdx-js/loader": "^0.9.0",
|
||||
"@mdx-js/mdx": "^0.9.0",
|
||||
"@mdx-js/loader": "^0.11.0",
|
||||
"@mdx-js/mdx": "^0.10.1",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-macros": "^2.2.1",
|
||||
"babel-plugin-macros": "^2.2.2",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
@ -42,8 +41,8 @@
|
||||
"chalk": "^2.4.1",
|
||||
"clipboardy": "^1.2.3",
|
||||
"connect-history-api-fallback": "^1.5.0",
|
||||
"emotion": "^9.1.3",
|
||||
"emotion-server": "^9.1.3",
|
||||
"emotion": "^9.2.3",
|
||||
"emotion-server": "^9.2.3",
|
||||
"find-up": "^2.1.0",
|
||||
"fs-extra": "^6.0.1",
|
||||
"glamor": "^2.20.40",
|
||||
@ -52,31 +51,35 @@
|
||||
"meow": "^5.0.0",
|
||||
"mini-html-webpack-plugin": "^0.2.3",
|
||||
"pkg-conf": "^2.1.0",
|
||||
"react": "^16.4.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dev-utils": "^5.0.1",
|
||||
"react-dom": "^16.4.0",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"read-pkg-up": "^3.0.0",
|
||||
"remark-autolink-headings": "^5.0.0",
|
||||
"remark-emoji": "^2.0.1",
|
||||
"remark-images": "^0.8.1",
|
||||
"remark-slug": "^5.0.0",
|
||||
"semver": "^5.5.0",
|
||||
"update-notifier": "^2.5.0",
|
||||
"webpack": "^4.10.2",
|
||||
"webpack-merge": "^4.1.2",
|
||||
"webpack-serve": "^1.0.2"
|
||||
"webpack-merge": "^4.1.3",
|
||||
"webpack-serve": "^1.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@compositor/logo": "^1.3.5",
|
||||
"@compositor/logo": "^1.4.0",
|
||||
"@compositor/md-loader": "^1.0.34",
|
||||
"ava": "^0.25.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"nano-style": "^1.0.0",
|
||||
"nyc": "^12.0.1",
|
||||
"raw-loader": "^0.5.1",
|
||||
"rebass": "^2.0.0-2",
|
||||
"rebass": "^2.0.0-7",
|
||||
"refunk": "^3.0.1",
|
||||
"rimraf": "^2.6.2",
|
||||
"styled-components": "^3.3.0",
|
||||
"styled-system": "^2.2.5"
|
||||
"styled-components": "^3.3.2",
|
||||
"styled-system": "^2.3.1"
|
||||
},
|
||||
"x0": {
|
||||
"title": "Compositor x0",
|
||||
|
||||
73
src/LiveEditor.js
Normal file
73
src/LiveEditor.js
Normal file
@ -0,0 +1,73 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
LiveProvider,
|
||||
LivePreview,
|
||||
LiveEditor,
|
||||
LiveError
|
||||
} from 'react-live'
|
||||
import { ScopeConsumer } from 'react-scope-provider'
|
||||
import { Box } from 'rebass'
|
||||
import { color, borderColor } from 'styled-system'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const transformCode = src => `<React.Fragment>${src}</React.Fragment>`
|
||||
|
||||
const Preview = styled(LivePreview)([], {
|
||||
padding: '16px',
|
||||
border: '1px solid',
|
||||
borderRadius: '2px 2px 0 0',
|
||||
}, borderColor)
|
||||
Preview.defaultProps = {
|
||||
borderColor: 'gray'
|
||||
}
|
||||
|
||||
const Editor = styled(LiveEditor)([], {
|
||||
fontFamily: 'Menlo, monospace',
|
||||
fontSize: '13px',
|
||||
margin: 0,
|
||||
padding: '16px',
|
||||
borderRadius: '0 0 2px 2px',
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
boxShadow: 'inset 0 0 0 1px #6cf',
|
||||
}
|
||||
}, color)
|
||||
Editor.defaultProps = {
|
||||
bg: 'gray'
|
||||
}
|
||||
|
||||
const Err = styled(LiveError)([], {
|
||||
fontFamily: 'Menlo, monospace',
|
||||
fontSize: '13px',
|
||||
padding: '8px',
|
||||
color: 'white',
|
||||
backgroundColor: 'red'
|
||||
})
|
||||
|
||||
export default ({
|
||||
code,
|
||||
scope,
|
||||
render
|
||||
}) => (
|
||||
<Box mb={4}>
|
||||
<ScopeConsumer defaultScope={scope}>
|
||||
{scope => (
|
||||
<LiveProvider
|
||||
code={code}
|
||||
scope={scope}
|
||||
mountStylesheet={false}
|
||||
transformCode={transformCode}>
|
||||
{typeof render === 'function' ? (
|
||||
render({ code, scope })
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Preview />
|
||||
<Editor />
|
||||
<Err />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</LiveProvider>
|
||||
)}
|
||||
</ScopeConsumer>
|
||||
</Box>
|
||||
)
|
||||
20
src/ScopeProvider.js
Normal file
20
src/ScopeProvider.js
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
import { MDXProvider } from '@mdx-js/tag'
|
||||
import { ScopeProvider } from 'react-scope-provider'
|
||||
import defaultScope from './scope'
|
||||
|
||||
export default props => {
|
||||
const scope = {
|
||||
...defaultScope,
|
||||
...props.scope
|
||||
}
|
||||
return (
|
||||
<ScopeProvider scope={scope}>
|
||||
<MDXProvider components={scope}>
|
||||
<React.Fragment>
|
||||
{props.children}
|
||||
</React.Fragment>
|
||||
</MDXProvider>
|
||||
</ScopeProvider>
|
||||
)
|
||||
}
|
||||
3
src/index.js
Normal file
3
src/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as ScopeProvider } from './ScopeProvider'
|
||||
export { default as LiveEditor } from './LiveEditor'
|
||||
export { default as scope } from './scope'
|
||||
80
src/scope.js
Normal file
80
src/scope.js
Normal file
@ -0,0 +1,80 @@
|
||||
import React from 'react'
|
||||
import { withRouter, Link } from 'react-router-dom'
|
||||
import rebassMarkdown from '@rebass/markdown'
|
||||
import { Pre } from 'rebass'
|
||||
|
||||
import LiveEditor from './LiveEditor'
|
||||
import LivePreview from './LivePreview'
|
||||
|
||||
const cleanHREF = href => href
|
||||
.replace(/\.mdx?$/, '')
|
||||
.replace(/\.jsx?$/, '')
|
||||
|
||||
export const link = withRouter(({
|
||||
href,
|
||||
match,
|
||||
location,
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
if (/^https?:\/\//.test(href) || /^#/.test(href)) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className={className}
|
||||
children={children}
|
||||
/>
|
||||
)
|
||||
}
|
||||
const to = cleanHREF(href, location.pathname)
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className={className}
|
||||
children={children}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
export const code = ({
|
||||
children,
|
||||
className,
|
||||
scope,
|
||||
...props
|
||||
}) => {
|
||||
const lang = className.replace(/^language\-/, '')
|
||||
const type = lang.charAt(0)
|
||||
const code = React.Children.toArray(children).join('\n')
|
||||
|
||||
switch (type) {
|
||||
case '.':
|
||||
return <LiveEditor code={code} scope={scope} />
|
||||
case '!':
|
||||
return <LivePreview code={code} scope={scope} />
|
||||
default:
|
||||
return (
|
||||
<Pre
|
||||
p={3}
|
||||
bg='gray'
|
||||
children={children}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const pre = props => props.children
|
||||
|
||||
const scope = rebassMarkdown({
|
||||
a: {
|
||||
is: link
|
||||
},
|
||||
code: {
|
||||
is: code
|
||||
},
|
||||
pre: {
|
||||
is: pre,
|
||||
}
|
||||
})
|
||||
|
||||
export default scope
|
||||
Loading…
Reference in New Issue
Block a user