diff --git a/.eslintignore b/.eslintignore
index 46678186a..ed7cf534a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,9 @@ dist
build
.next
artifacts
+.cache
+public
+
+# tmp
+examples/vue
+packages/vue
diff --git a/.eslintrc.yml b/.eslintrc.yml
index 79e23d139..a948bde01 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -36,6 +36,7 @@ rules:
react/prop-types: off
react/display-name: off
react/no-children-prop: off
+ react/react-in-jsx-scope: off
settings:
react:
diff --git a/contributing.md b/contributing.md
index d330c0369..a968b9e41 100644
--- a/contributing.md
+++ b/contributing.md
@@ -2,147 +2,7 @@
Hi! đź‘‹
We’re excited that you’re interested in contributing!
-Take a moment to read the following guidelines.
-And thanks for contributing to **MDX**! 👏👌✨
-If you’re raising an issue, please understand that people involved with this
-project often do so for fun, next to their day job; you are not entitled to
-free customer service.
+[Read the guidelines][contributing]
-## Table of Contents
-
-* [Questions](#questions)
-* [Contributions](#contributions)
- * [Financial support](#financial-support)
- * [Improve documentation](#improve-documentation)
- * [Improve issues](#improve-issues)
- * [Give feedback on issues and pull requests](#give-feedback-on-issues-and-pull-requests)
- * [Write code](#write-code)
-* [Running the tests](#running-the-tests)
-* [Submitting an issue](#submitting-an-issue)
-* [Submitting a pull request](#submitting-a-pull-request)
-* [Project structure](#project-structure)
-* [Releases](#releases)
-* [Troubleshooting](#troubleshooting)
-* [Resources](#resources)
-
-## Questions
-
-Please chat and ask questions on [spectrum][chat]!
-Jump in there and lurk, talk to us, and help others.
-
-## Contributions
-
-There’s several ways to contribute, not just by writing code.
-
-### Financial support
-
-It’s possible to support us financially by becoming a backer or sponsor of
-unified through [Open Collective][collective].
-With this support, we can pay for project leadership, finance non-coding work,
-or to do fun things for the community like getting stickers for contributors.
-You’ll be helping unified’s maintainers manage and improve existing projects,
-and additionally support our work to develop new and exciting projects, such
-as [micromark][].
-
-### Improve documentation
-
-As a user of this project you’re perfect for helping us improve our docs.
-Typo corrections, error fixes, better explanations, new examples, etcetera.
-Anything!
-
-### Improve issues
-
-Some issues lack information, aren’t reproducible, or are just incorrect.
-Help make them easier to resolve.
-
-### Give feedback on issues and pull requests
-
-We’re always looking for more opinions on discussions in the issue tracker.
-
-### Write code
-
-Code contributions are very welcome. It’s often good to first create an issue
-to report a bug or suggest a new feature before creating a pull request to
-prevent you from doing unnecessary work.
-
-## Running the tests
-
-1. `yarn`
-2. `yarn bootstrap`
-3. `yarn test`
-
-Tests for an individual package can be run as a yarn workspace:
-`yarn workspace remark-mdx test`. To see what packages ar available to test
-you can list out all workspaces with `yarn workspaces info`.
-
-## Submitting an issue
-
-* The issue tracker is for issues. Use chat for support
-* Search the issue tracker (including closed issues) before opening a new
- issue
-* Ensure you’re using the latest version of our packages
-* Use a clear and descriptive title
-* Include as much information as possible: steps to reproduce the issue,
- error message, version, operating system, etcetera
-* The more time you put into an issue, the better we will be able to help you
-* The best issue report is a [failing test][unit-test] proving it
-
-## Submitting a pull request
-
-* Non-trivial changes are often best discussed in an issue first, to prevent
- you from doing unnecessary work
-* For ambitious tasks, you should try to get your work in front of the
- community for feedback as soon as possible
-* New features should be accompanied with tests and documentation
-* Don’t include unrelated changes
-* Test before submitting code by running `yarn test`
-* Write a convincing description of why we should land your pull request:
- it’s your job to convince us
-
-## Project structure
-
-MDX is a monorepo that uses [lerna][].
-
-* All packages are found in `./packages`
-* All documentation is found in `./docs` and can be viewed with `yarn docs -- -o`
-* There’s an `./examples` directory where examples for different tools and
- frameworks
-
-## Releases
-
-In order to release a new version you can follow these steps:
-
-* Draft a release for the next version (vX.X.X)
-* Release a prerelease
- * `yarn lerna publish`
- * Select prepatch/preminor/premajor
- * Sanity check in a project or two with the prerelease
-* `yarn lerna publish`
-* Publish release on GitHub
-
-## Troubleshooting
-
-If you’re having issues installing locally you might need to run
-`yarn lerna exec yarn install` instead of `yarn bootstrap`
-([issue][lerna-install]).
-
-## Resources
-
-* [Good first issues in the MDX repository](https://github.com/mdx-js/mdx/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
-* [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
-* [Making your first contribution](https://medium.com/@vadimdemedes/making-your-first-contribution-de6576ddb190)
-* [Using Pull Requests](https://help.github.com/articles/about-pull-requests/)
-* [GitHub Help](https://help.github.com)
-
-[unit-test]: https://twitter.com/sindresorhus/status/579306280495357953
-
-[chat]: https://spectrum.chat/mdx
-
-[collective]: https://opencollective.com/unified
-
-[micromark]: https://github.com/micromark/micromark
-
-[lerna]: https://lernajs.io
-
-[lerna-install]: https://github.com/lerna/lerna/issues/1457
+[contributing]: https://mdxjs.com/contributing
diff --git a/docs/.eslintignore b/docs/.eslintignore
new file mode 100644
index 000000000..1785ca813
--- /dev/null
+++ b/docs/.eslintignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+public
+.cache
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 000000000..4849e0abe
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,2 @@
+.cache
+public
diff --git a/docs/_app.js b/docs/_app.js
deleted file mode 100644
index e4e3f01f4..000000000
--- a/docs/_app.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react'
-import RebassMDX from '@rebass/mdx'
-import createScope from '@rebass/markdown'
-import * as Rebass from 'rebass'
-import sortBy from 'lodash.sortby'
-import {SidebarLayout, ScopeProvider} from '@compositor/x0/components'
-import {LiveEditor, Logo} from './_ui'
-
-import pkg from '../packages/mdx/package.json'
-
-const scope = {
- ...createScope(),
- ...Rebass,
- code: LiveEditor,
- pre: ({children}) => children
-}
-
-/* eslint-disable prettier/prettier */
-const navOrder = [
- 'index',
- 'getting-started',
- 'next',
- 'gatsby',
- 'create-react-app',
- 'react-static',
- 'webpack',
- 'parcel',
- 'x0',
- 'guides',
- 'syntax-highlighting',
- 'live-code',
- 'table-of-contents',
- 'writing-a-plugin',
- 'custom-loader',
- 'wrapper-customization',
- 'advanced',
- 'api',
- 'runtime',
- 'ast',
- 'components',
- 'plugins',
- 'transform-content',
- 'typescript',
- 'contributing',
- 'projects',
- 'editors',
- 'blog',
- 'about'
-]
-/* eslint-enable prettier/prettier */
-
-const ignoredPaths = [
- '/advanced/contributing',
- '/advanced/custom-loader',
- '/advanced/retext-plugins',
- '/advanced/specification',
- '/advanced/sync-api',
- '/advanced/writing-a-plugin',
- '/getting-started/typescript',
- '/blog/custom-pragma',
- '/editor-plugins',
- '/plugins',
- '/syntax'
-]
-/* eslint-enable prettier/prettier */
-
-const pageNames = {
- index: 'Introduction',
- next: 'Next.js',
- api: 'API',
- ast: 'AST',
- projects: 'Projects using MDX',
- 'getting-started': 'Getting started',
- 'create-react-app': 'Create React App',
- 'live-code': 'Live code editor',
- 'writing-a-plugin': 'Writing a plugin'
-}
-
-const sortRoutes = routes =>
- [
- ...sortBy([...routes], a => {
- const i = navOrder.indexOf(a.name)
- return i < 0 ? Infinity : i
- })
- ].map(route => {
- if (!pageNames[route.name]) return route
- return {
- ...route,
- name: pageNames[route.name]
- }
- })
-
-export default class App extends React.Component {
- render() {
- const {routes} = this.props
- const nav = sortRoutes(routes).filter(
- route => !ignoredPaths.includes(route.path)
- )
-
- return (
-
-
- } routes={nav} />
-
-
- )
- }
-}
-
-App.defaultProps = {
- title: `MDX v${pkg.version}`
-}
diff --git a/docs/_ui.js b/docs/_ui.js
deleted file mode 100644
index e3e9fd78f..000000000
--- a/docs/_ui.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/* global window */
-import React, {Component} from 'react'
-import Highlight, {defaultProps} from 'prism-react-renderer'
-import {LiveEditor as Editor, LivePreview} from '@compositor/x0/components'
-
-const prismTheme = {
- plain: {
- color: '#282a2e',
- backgroundColor: '#fafafa'
- },
- styles: [
- {
- types: ['comment'],
- style: {
- color: 'rgb(197, 200, 198)'
- }
- },
- {
- types: ['string', 'number', 'builtin', 'variable'],
- style: {
- color: '#444'
- }
- },
- {
- types: ['class-name', 'function', 'tag', 'attr-name'],
- style: {
- color: 'rgb(40, 42, 46)'
- }
- }
- ]
-}
-
-const CodeBlock = ({children, language}) => (
-
- {({className, style, tokens, getLineProps, getTokenProps}) => (
-
+
+ )
+ }}
+ />
+ )
+ }}
+ />
+)
diff --git a/docs/src/components/redirect.js b/docs/src/components/redirect.js
new file mode 100644
index 000000000..209abd6e5
--- /dev/null
+++ b/docs/src/components/redirect.js
@@ -0,0 +1,4 @@
+import React from 'react'
+import {Redirect} from '@reach/router'
+
+export default props =>
diff --git a/docs/src/components/sidebar.mdx b/docs/src/components/sidebar.mdx
new file mode 100644
index 000000000..96b6cf186
--- /dev/null
+++ b/docs/src/components/sidebar.mdx
@@ -0,0 +1,29 @@
+- [Introduction](/)
+- [Getting Started](/getting-started)
+ - [Next.js](/getting-started/next)
+ - [Gatsby](/getting-started/gatsby)
+ - [Create React App](/getting-started/create-react-app)
+ - [React Static](/getting-started/react-static)
+ - [Webpack](/getting-started/webpack)
+ - [Parcel](/getting-started/parcel)
+- [Migrating from v0 to v1](/migrating/v1)
+- [Guides](/guides)
+ - [Syntax highlighting](/guides/syntax-highlighting)
+ - [Live code editor](/guides/live-code)
+ - [Table of contents](/guides/table-of-contents)
+ - [Writing a plugin](/guides/writing-a-plugin)
+ - [Custom loader](/guides/custom-loader)
+ - [Wrapper customization](/guides/wrapper-customization)
+- [Advanced](/advanced)
+ - [API](/advanced/api)
+ - [Runtime](/advanced/runtime)
+ - [AST](/advanced/ast)
+ - [Components](/advanced/components)
+ - [Plugins](/advanced/plugins)
+ - [Transform Content](/advanced/transform-content)
+ - [Typescript](/advanced/typescript)
+- [Contributing](/contributing)
+- [Projects](/projects)
+- [Editors](/editors)
+- [Blog](/blog)
+- [About](/about)
diff --git a/docs/src/components/theme.js b/docs/src/components/theme.js
new file mode 100644
index 000000000..166a855bd
--- /dev/null
+++ b/docs/src/components/theme.js
@@ -0,0 +1,103 @@
+const heading = {
+ a: {
+ color: 'inherit',
+ textDecoration: 'none'
+ }
+}
+
+export default {
+ colors: {
+ text: '#000',
+ background: '#fff',
+ primary: '#33e',
+ secondary: '#11a',
+ gray: '#ccc',
+ lightgray: '#f6f6f6',
+ yellow: '#ffc'
+ },
+ fonts: {
+ monospace: '"Roboto Mono", Menlo, monospace'
+ },
+ mediaQueries: {
+ big: '@media screen and (min-width: 40em)'
+ },
+ styles: {
+ h1: {
+ ...heading,
+ fontSize: [5, 6]
+ },
+ h2: {
+ ...heading,
+ fontSize: [4, 5]
+ },
+ h3: {
+ ...heading,
+ fontSize: [3, 4]
+ },
+ h4: {
+ ...heading,
+ fontSize: 3
+ },
+ h5: {
+ ...heading,
+ fontSize: 2
+ },
+ h6: {
+ ...heading,
+ fontSize: 1
+ },
+ a: {
+ color: 'primary',
+ '&:hover': {
+ color: 'secondary'
+ }
+ },
+ table: {
+ width: '100%',
+ my: 4,
+ borderCollapse: 'separate',
+ borderSpacing: 0
+ },
+ th: {
+ textAlign: 'left',
+ verticalAlign: 'bottom',
+ paddingTop: '4px',
+ paddingBottom: '4px',
+ paddingRight: '4px',
+ paddingLeft: 0,
+ borderColor: 'inherit',
+ borderBottomWidth: '2px',
+ borderBottomStyle: 'solid'
+ },
+ td: {
+ textAlign: 'left',
+ verticalAlign: 'top',
+ paddingTop: '4px',
+ paddingBottom: '4px',
+ paddingRight: '4px',
+ paddingLeft: 0,
+ borderColor: 'inherit',
+ borderBottomWidth: '1px',
+ borderBottomStyle: 'solid'
+ },
+ inlineCode: {
+ fontFamily: 'monospace',
+ fontSize: 'inherit',
+ bg: 'lightgray'
+ },
+ code: {
+ fontFamily: 'monospace',
+ fontSize: 1,
+ overflowX: 'auto'
+ },
+ hr: {
+ border: 0,
+ borderBottom: '1px solid',
+ my: 4,
+ color: 'lightgray'
+ },
+ ul: {
+ pl: 3
+ }
+ }
+}
diff --git a/docs/src/index.js b/docs/src/index.js
new file mode 100644
index 000000000..061d94373
--- /dev/null
+++ b/docs/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react'
+import Layout from './components/layout'
+
+export const wrapRootElement = ({element, props}) => (
+ {element}
+)
diff --git a/docs/src/pages/404.md b/docs/src/pages/404.md
new file mode 100644
index 000000000..031d896c7
--- /dev/null
+++ b/docs/src/pages/404.md
@@ -0,0 +1,3 @@
+# 404
+
+Page not found. [Return Home](/)
diff --git a/docs/about.md b/docs/src/pages/about.md
similarity index 98%
rename from docs/about.md
rename to docs/src/pages/about.md
index fc662d639..a7b500a73 100644
--- a/docs/about.md
+++ b/docs/src/pages/about.md
@@ -1,5 +1,3 @@
-import { Avatar } from 'rebass'
-
# About
MDX is based on the [original `.mdx` proposal][idea] by Guillermo Rauch
diff --git a/docs/advanced/api.md b/docs/src/pages/advanced/api.md
similarity index 98%
rename from docs/advanced/api.md
rename to docs/src/pages/advanced/api.md
index db08cbbc0..56678004c 100644
--- a/docs/advanced/api.md
+++ b/docs/src/pages/advanced/api.md
@@ -1,5 +1,3 @@
-import { Message } from 'rebass'
-
# API
MDX (the library), at its core, transforms MDX (the syntax) to JSX.
diff --git a/docs/advanced/ast.md b/docs/src/pages/advanced/ast.md
similarity index 94%
rename from docs/advanced/ast.md
rename to docs/src/pages/advanced/ast.md
index f6a439bdf..49133ebeb 100644
--- a/docs/advanced/ast.md
+++ b/docs/src/pages/advanced/ast.md
@@ -1,10 +1,10 @@
-import { Button } from 'rebass'
+import { Button } from '@rebass/emotion'
# AST
export const AST_EXPLORER_LINK = 'https://astexplorer.net/#/gist/2befce6edce1475eb4bbec001356b222/35997d3b44347daabad8dd1a107adc22dd873de2'
-
+
MDX, the library, uses not one but two syntax trees.
The first, [MDXAST][], represents markdown with embedded JSX, and is a superset of [mdast][].
diff --git a/docs/advanced/components.md b/docs/src/pages/advanced/components.md
similarity index 83%
rename from docs/advanced/components.md
rename to docs/src/pages/advanced/components.md
index bb528a8c0..b99901a65 100644
--- a/docs/advanced/components.md
+++ b/docs/src/pages/advanced/components.md
@@ -1,13 +1,12 @@
# Components
The MDX core library accepts a string and exports a JSX string.
+It uses a [custom pragma](/blog/custom-pragma) which customizes
+the rendering of elements in Markdown and JSX.
-## MDXTag
-
-MDXTag is an internal component that MDX uses to map components to an HTML
-element based on the Markdown syntax.
+## Tranpilation
Consider the following MDX:
@@ -28,30 +27,26 @@ app:
```jsx
import React from 'react'
-import { MDXTag } from '@mdx-js/tag'
import MyComponent from './my-component'
export const author = 'Fred Flintstone'
const layoutProps = { author }
-export default ({ components, ...props }) => (
-
-
- Title
-
+export default MDXContent({ components, ...props }) => (
+
+
Title
-
- Lorem ipsum dolor sit amet.
-
-
+
Lorem ipsum dolor sit amet.
+
)
+MDXContent.isMDXComponent = true
```
If the component mapping contains a `p` key, that will be used for
`Lorem ipsum dolor sit amet.`.
Otherwise a standard `p` tag is rendered (`
Lorem ipsum dolor sit amet.
`).
This is what allows you to pull in existing components to style your MDX
-documents.
+documents via the [MDXProvider](#mdxprovider)
### Layout props
@@ -96,7 +91,7 @@ If you need to change the mapping during runtime, declare it on the componentĘĽs
```js
import React from 'react'
-import { MDXProvider } from '@mdx-js/tag'
+import { MDXProvider } from '@mdx-js/react'
import { Heading, Text, Pre, Code, Table } from './components'
diff --git a/docs/src/pages/advanced/contributing.md b/docs/src/pages/advanced/contributing.md
new file mode 100644
index 000000000..1da8fb843
--- /dev/null
+++ b/docs/src/pages/advanced/contributing.md
@@ -0,0 +1,3 @@
+import Redirect from '../../components/redirect'
+
+
diff --git a/docs/src/pages/advanced/custom-loader.md b/docs/src/pages/advanced/custom-loader.md
new file mode 100644
index 000000000..43c519646
--- /dev/null
+++ b/docs/src/pages/advanced/custom-loader.md
@@ -0,0 +1,3 @@
+import Redirect from '../../components/redirect'
+
+
diff --git a/docs/advanced/index.md b/docs/src/pages/advanced/index.md
similarity index 100%
rename from docs/advanced/index.md
rename to docs/src/pages/advanced/index.md
diff --git a/docs/advanced/plugins.md b/docs/src/pages/advanced/plugins.md
similarity index 100%
rename from docs/advanced/plugins.md
rename to docs/src/pages/advanced/plugins.md
diff --git a/docs/advanced/retext-plugins.md b/docs/src/pages/advanced/retext-plugins.md
similarity index 56%
rename from docs/advanced/retext-plugins.md
rename to docs/src/pages/advanced/retext-plugins.md
index 305fc7712..3b940725b 100644
--- a/docs/advanced/retext-plugins.md
+++ b/docs/src/pages/advanced/retext-plugins.md
@@ -1,3 +1,3 @@
-import { Redirect } from '../_ui'
+import Redirect from '../../components/redirect'
diff --git a/docs/advanced/runtime.md b/docs/src/pages/advanced/runtime.md
similarity index 72%
rename from docs/advanced/runtime.md
rename to docs/src/pages/advanced/runtime.md
index 81c8a57f8..d9ab200b2 100644
--- a/docs/advanced/runtime.md
+++ b/docs/src/pages/advanced/runtime.md
@@ -1,4 +1,4 @@
-import Doc from '../../packages/runtime/readme.md'
+import Doc from '@mdx-js/runtime/readme.md'
+
+