diff --git a/docs/_app.js b/docs/_app.js deleted file mode 100644 index e6aca89..0000000 --- a/docs/_app.js +++ /dev/null @@ -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 }) => - - - - - - - Compositor - - - - - - - x0 - - - - - GitHub - - - - {render()} - - - - - GitHub - - - - - Compositor - - - - - © 2018 Compositor, Inc. All rights reserved - - - - diff --git a/docs/index.js b/docs/index.js deleted file mode 100644 index 52d8dc5..0000000 --- a/docs/index.js +++ /dev/null @@ -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 ( - - - - x0: Zero-config React development environment & static site generator - - - - 
npm i -g @compositor/x0
- - - - - - - - ) - } -} diff --git a/docs/webpack.config.js b/docs/webpack.config.js deleted file mode 100644 index 9718488..0000000 --- a/docs/webpack.config.js +++ /dev/null @@ -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' - ] - } - ] - } -} diff --git a/lib/config.js b/lib/config.js index 04dafb0..f642bd3 100644 --- a/lib/config.js +++ b/lib/config.js @@ -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'), ] } ] diff --git a/lib/entry.js b/lib/entry.js index 41eb723..8ab4f23 100644 --- a/lib/entry.js +++ b/lib/entry.js @@ -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' diff --git a/lib/mdx-fm-loader.js b/lib/mdx-fm-loader.js new file mode 100644 index 0000000..28a04c6 --- /dev/null +++ b/lib/mdx-fm-loader.js @@ -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) +} diff --git a/package.json b/package.json index e37f89e..d215d6c 100644 --- a/package.json +++ b/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", diff --git a/src/LiveEditor.js b/src/LiveEditor.js new file mode 100644 index 0000000..6ac3ac6 --- /dev/null +++ b/src/LiveEditor.js @@ -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 => `${src}` + +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 +}) => ( + + + {scope => ( + + {typeof render === 'function' ? ( + render({ code, scope }) + ) : ( + + + + + + )} + + )} + + +) diff --git a/src/ScopeProvider.js b/src/ScopeProvider.js new file mode 100644 index 0000000..d302900 --- /dev/null +++ b/src/ScopeProvider.js @@ -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 ( + + + + {props.children} + + + + ) +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..d59e3fc --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +export { default as ScopeProvider } from './ScopeProvider' +export { default as LiveEditor } from './LiveEditor' +export { default as scope } from './scope' diff --git a/src/scope.js b/src/scope.js new file mode 100644 index 0000000..2257fb2 --- /dev/null +++ b/src/scope.js @@ -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 ( + + ) + } + const to = cleanHREF(href, location.pathname) + return ( + + ) +}) + +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 + case '!': + return + default: + return ( + 
+      )
+  }
+}
+
+const pre = props => props.children
+
+const scope = rebassMarkdown({
+  a: {
+    is: link
+  },
+  code: {
+    is: code
+  },
+  pre: {
+    is: pre,
+  }
+})
+
+export default scope