V1

.eslintrc.yml

@@ -50,8 +50,12 @@ overrides:
     extends:
       - plugin:mdx/recommended
       - plugin:mdx/overrides
+    globals:
+      Speaker: false
+      SpeakerList: false
     rules:
       import/no-extraneous-dependencies: 0
+      no-warning-comments: 0
 
   - files:
       - '**/test/**/*.js'

.gitignore

@@ -13,3 +13,5 @@ artifacts
 .*cache
 public
 .npmrc
+.nyc_output
+coverage

.remarkrc.js

@@ -4,6 +4,7 @@ const wooorm = require('retext-preset-wooorm')
 
 module.exports = {
   plugins: [
+    'remark-frontmatter',
     './packages/remark-mdx',
     'preset-wooorm',
     'preset-prettier',

docs/about.mdx

@@ -13,10 +13,10 @@ also available on [GitHub][design].
 
 ### Authors
 
-- [John Otander][john] ([@4lpine][4lpine]) – [Compositor][] + [Clearbit][]
+- [John Otander][john] ([@4lpine][4lpine]) – [Components AI](https://components.ai)
 - [Tim Neutkens][tim] ([@timneutkens][timneutkens]) – [Vercel][]
 - [Guillermo Rauch][guillermo] ([@rauchg][rauchg]) – [Vercel][]
-- [Brent Jackson][brent] ([@jxnblk][jxnblk]) – [Compositor][]
+- [Brent Jackson][brent] ([@jxnblk][jxnblk]) – [Gatsby](https://gatsbyjs.com)
 
 ## Related
 
@@ -70,6 +70,4 @@ These projects define the syntax which MDX blends together (MD and JSX).
 [timneutkens]: https://twitter.com/timneutkens
 [jxnblk]: https://twitter.com/jxnblk
 [evil rabbit]: https://twitter.com/evilrabbit_
-[compositor]: https://compositor.io
 [vercel]: https://vercel.com
-[clearbit]: https://clearbit.com

docs/advanced/components.mdx

@@ -68,9 +68,9 @@ stubbed `Button`:
 const makeShortcode = name =>
   function MDXDefaultShortcode(props) {
     console.warn(
-      'Component ' +
+      "Component '" +
         name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
+        "' was not imported, exported, or provided by MDXProvider as global scope"
     )
     return <div {...props} />
   }

docs/advanced/plugins.mdx

@@ -151,10 +151,10 @@ mdx.sync(mdxText, {
 [rehype]: https://github.com/rehypejs/rehype
 [remark-capitalize]: https://github.com/zeit/remark-capitalize
 [remark-toc]: https://github.com/remarkjs/remark-toc
-[remark-plugins]: https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins
-[rehype-plugins]: https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins
+[remark-plugins]: https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
+[rehype-plugins]: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
 [retext]: https://github.com/retextjs/retext
 [remarkjs/remark#224]: https://github.com/remarkjs/remark/issues/224
 [visit]: https://github.com/syntax-tree/unist-util-visit
 [retext-smartypants]: https://github.com/retextjs/retext-smartypants
-[create-plugin]: https://unifiedjs.com/create-a-plugin.html
+[create-plugin]: https://unifiedjs.com/learn/guide/create-a-plugin

docs/advanced/typescript.mdx

@@ -15,7 +15,7 @@ declare module '@mdx-js/react' {
     | 'a'
     | 'blockquote'
     | 'code'
-    | 'delete'
+    | 'del'
     | 'em'
     | 'h1'
     | 'h2'
@@ -39,7 +39,7 @@ declare module '@mdx-js/react' {
     | 'ul'
 
   export type Components = {
-    [key in ComponentType]?: React.ComponentType<{children: React.ReactNode}>
+    [key in ComponentType]?: React.ComponentType<any>
   }
 
   export interface MDXProviderProps {

docs/blog/shortcodes.mdx

@@ -38,7 +38,7 @@ MDX document with JSX.
 
 Here’s a YouTube shortcode:
 
-<YouTube tweetId="1234" />
+<YouTube videoId="1234" />
 
 Here’s a YouTube shortcode wrapped in TomatoBox:
 

docs/contributing.mdx

@@ -76,17 +76,16 @@ prevent you from doing unnecessary work.
 ## Running the tests
 
 1.  `yarn`
-2.  `yarn bootstrap`
-3.  `yarn test`
+2.  `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
+`yarn workspace remark-mdx test`. To see what packages are available to test
 you can list out all workspaces with `yarn workspaces info`.
 
 ## Running the docs site
 
 1.  `yarn`
-2.  `yarn bootstrap`
+2.  `yarn build`
 3.  `yarn docs`
 
 ## Submitting an issue
@@ -127,11 +126,7 @@ MDX is a monorepo that uses [lerna][].
 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`
+- `yarn && yarn test && yarn run publish`
 - Publish release on GitHub
 
 ## Troubleshooting
@@ -155,5 +150,5 @@ If you’re having issues installing locally you might need to run
 [unit-test]: https://twitter.com/sindresorhus/status/579306280495357953
 [collective]: https://opencollective.com/unified
 [micromark]: https://github.com/micromark/micromark
-[lerna]: https://lernajs.io
+[lerna]: https://lerna.js.org
 [lerna-install]: https://github.com/lerna/lerna/issues/1457

docs/editors.mdx

@@ -6,12 +6,12 @@ The community has begun adding MDX syntax highlighting support for some editors!
 - [vscode-mdx-preview][]: MDX Preview for VS Code
 - [vim][]: Vim
 - [sublime][]: Sublime
+- [JetBrains IntelliJ/WebStorm][jetbrains]
 
 ### Editors needing support
 
 - Atom
 - Emacs
-- [JetBrains IntelliJ/WebStorm][jetbrains]
 
 ---
 
@@ -21,4 +21,4 @@ Original GitHub issue: [#119](https://github.com/mdx-js/mdx/issues/119)
 [vscode-mdx-preview]: https://github.com/xyc/vscode-mdx-preview
 [vim]: https://github.com/jxnblk/vim-mdx-js
 [sublime]: https://github.com/jonsuh/mdx-sublime
-[jetbrains]: https://youtrack.jetbrains.com/issue/WEB-32599
+[jetbrains]: https://plugins.jetbrains.com/plugin/14944-mdx

docs/getting-started/-table-of-components.mdx

@@ -0,0 +1,27 @@
+| Tag          | Name                                                                 | Syntax                                              |
+| ------------ | -------------------------------------------------------------------- | --------------------------------------------------- |
+| `p`          | [Paragraph](https://github.com/syntax-tree/mdast#paragraph)          |                                                     |
+| `h1`         | [Heading 1](https://github.com/syntax-tree/mdast#heading)            | `#`                                                 |
+| `h2`         | [Heading 2](https://github.com/syntax-tree/mdast#heading)            | `##`                                                |
+| `h3`         | [Heading 3](https://github.com/syntax-tree/mdast#heading)            | `###`                                               |
+| `h4`         | [Heading 4](https://github.com/syntax-tree/mdast#heading)            | `####`                                              |
+| `h5`         | [Heading 5](https://github.com/syntax-tree/mdast#heading)            | `#####`                                             |
+| `h6`         | [Heading 6](https://github.com/syntax-tree/mdast#heading)            | `######`                                            |
+| `blockquote` | [Blockquote](https://github.com/syntax-tree/mdast#blockquote)        | `>`                                                 |
+| `ul`         | [List](https://github.com/syntax-tree/mdast#list)                    | `-`                                                 |
+| `ol`         | [Ordered list](https://github.com/syntax-tree/mdast#list)            | `1.`                                                |
+| `li`         | [List item](https://github.com/syntax-tree/mdast#listitem)           |                                                     |
+| `table`      | [Table](https://github.com/syntax-tree/mdast#table)                  |                                                     |
+| `thead`      | [Table head](https://github.com/syntax-tree/mdast#table)             |                                                     |
+| `tbody`      | [Table body](https://github.com/syntax-tree/mdast#table)             |                                                     |
+| `tr`         | [Table row](https://github.com/syntax-tree/mdast#tablerow)           |                                                     |
+| `td`/`th`    | [Table cell](https://github.com/syntax-tree/mdast#tablecell)         |                                                     |
+| `code`       | [Code](https://github.com/syntax-tree/mdast#code)                    | ` ```code``` `                                      |
+| `inlineCode` | [InlineCode](https://github.com/syntax-tree/mdast#inlinecode)        | `` `inlineCode` ``                                  |
+| `pre`        | [Code](https://github.com/syntax-tree/mdast#code)                    | ` ```code``` `                                      |
+| `em`         | [Emphasis](https://github.com/syntax-tree/mdast#emphasis)            | `_emphasis_`                                        |
+| `strong`     | [Strong](https://github.com/syntax-tree/mdast#strong)                | `**strong**`                                        |
+| `del`        | [Delete](https://github.com/syntax-tree/mdast#delete)                | `~~strikethrough~~`                                 |
+| `hr`         | [Thematic break](https://github.com/syntax-tree/mdast#thematicbreak) | `---` or `***`                                      |
+| `a`          | [Link](https://github.com/syntax-tree/mdast#link)                    | `<https://mdxjs.com>` or `[MDX](https://mdxjs.com)` |
+| `img`        | [Image](https://github.com/syntax-tree/mdast#image)                  | `![alt](https://mdx-logo.now.sh)`                   |

docs/getting-started/gatsby.mdx

@@ -34,6 +34,6 @@ some awesome content
 For more documentation on programmatically creating pages with Gatsby, see
 the [Gatsby MDX docs][gatsby-mdx-docs].
 
-[gatsby]: https://gatsbyjs.org
-[gatsby-mdx-docs]: https://gatsbyjs.org/docs/mdx/
-[gatsby-plugin-mdx]: https://gatsbyjs.org/packages/gatsby-plugin-mdx/
+[gatsby]: https://gatsbyjs.com
+[gatsby-mdx-docs]: https://gatsbyjs.com/docs/mdx/
+[gatsby-plugin-mdx]: https://gatsbyjs.com/packages/gatsby-plugin-mdx/

docs/getting-started/index.mdx

@@ -1,6 +1,6 @@
 import {Box} from '@rebass/emotion'
 
-import TableOfComponents from './_table-of-components.mdx'
+import TableOfComponents from './-table-of-components.mdx'
 
 # Getting Started
 
@@ -109,7 +109,7 @@ things like the following markup:
 JSX is good for **components**.
 It makes repeating things more clear and allows for separation of concerns.
 MDX fully supports [JSX syntax][jsx].
-Any line that start with the `<` characters starts a JSX block.
+Any line that start with the `<` character starts a JSX block.
 
 ### MDX
 

docs/getting-started/next.mdx

@@ -15,6 +15,20 @@ const withMDX = require('@next/mdx')()
 module.exports = withMDX()
 ```
 
+### Treat `.mdx` files as pages
+
+To have Next.js treat `.mdx` files in the pages directory as pages use the `pageExtensions` property:
+
+```js
+// next.config.js
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/
+})
+module.exports = withMDX({
+  pageExtensions: ['js', 'jsx', 'mdx']
+})
+```
+
 ### Use MDX for `.md` files
 
 The Next.js MDX plugin allows for you to also use MDX parsing for `.md` files:
@@ -29,4 +43,30 @@ module.exports = withMDX({
 })
 ```
 
-[next-plugin]: https://github.com/zeit/next.js/tree/master/packages/next-mdx
+### Providing MDX Plugins
+
+In `next.config.js` you can also provide MDX plugins from remark and rehype
+
+```js
+const withMDX = require('@next/mdx')({
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: []
+  }
+})
+module.exports = withMDX()
+```
+
+### Typescript support
+
+```js
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/
+})
+
+module.exports = withMDX({
+  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
+})
+```
+
+[next-plugin]: https://github.com/vercel/next.js/tree/canary/packages/next-mdx

docs/guides/live-code.mdx

@@ -15,6 +15,7 @@ be automatically passed as props to your code block.
 
 ````md
 ```js live=true
+
 ```
 ````
 
@@ -70,7 +71,7 @@ MDXProvider in the components object so that it is rendered.
 ```js
 // src/App.js
 import React from 'react'
-import {MDXProvider} from '@mdx-js/tag'
+import {MDXProvider} from '@mdx-js/react'
 
 import CodeBlock from './components/CodeBlock'
 

docs/guides/math-blocks.mdx

@@ -1,6 +1,6 @@
 # Math blocks
 
-You can render math blocks via [remark-math](https://github.com/remarkjs/remark-math/blob/master/packages/remark-math) and [rehype-katex](https://github.com/remarkjs/remark-math/blob/master/packages/rehype-katex). remark-math parses math blocks and rehype-katex transforms the blocks into html elements with classes for styling.Also, you need to apply css style of KaTeX by yourself to render them properly.
+You can render math blocks via [remark-math](https://github.com/remarkjs/remark-math/tree/main/packages/remark-math) and [rehype-katex](https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex). remark-math parses math blocks and rehype-katex transforms the blocks into html elements with classes for styling. Also, you need to apply css style of [KaTeX](https://katex.org/) by yourself to render them properly.
 
 First, link a stylesheet and use the `$` syntax:
 
@@ -42,8 +42,22 @@ module.exports = {
           {
             resolve: '@mdx-js/loader',
             options: {
-              remarkPlugins: [remarkMath],
-              rehypePlugins: [rehypeKatex]
+              remarkPlugins: [
+                [
+                  remarkMath,
+                  {
+                    /* options */
+                  }
+                ]
+              ],
+              rehypePlugins: [
+                [
+                  rehypeKatex,
+                  {
+                    /* options */
+                  }
+                ]
+              ]
             }
           }
         ]
@@ -72,3 +86,22 @@ module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'md', 'mdx']
 })
 ```
+
+If you’re using MDX with Gatsby.js, you can use `gatsby-plugin-mdx` with the following configuration:
+
+```js
+// gatsby-config.js
+const plugins = [
+  {
+    resolve: 'gatsby-plugin-mdx',
+    options: {
+      gatsbyRemarkPlugins: [
+        {
+          resolve: 'gatsby-remark-katex'
+        }
+      ],
+      extensions: ['.mdx', '.md']
+    }
+  }
+]
+```

docs/guides/terminal.mdx

@@ -116,7 +116,7 @@ render(
 
 <Tweet tweetId="1141781114786160641" />
 
-[See the full example](https://github.com/mdx-js/mdx/tree/master/examples/cli)
+[See the full example](https://github.com/mdx-js/mdx/tree/master/examples/terminal)
 
 [ink]: https://github.com/vadimdemedes/ink
 [runtime]: https://mdxjs.com/advanced/runtime

docs/guides/vue.mdx

@@ -18,7 +18,7 @@ yarn add @mdx-js/vue-loader
 
 ## Configuring webpack
 
-In a [Vue CLI](https://cli.vuejs.org/) you need to add a `webpack.config.js` that
+In a [Vue CLI](https://cli.vuejs.org/) you need to add a `vue.config.js` that
 uses the MDX loader for vue:
 
 ```js
@@ -27,7 +27,7 @@ module.exports = {
     module: {
       rules: [
         {
-          test: /.mdx?$/,
+          test: /\.mdx$/,
           use: ['babel-loader', '@mdx-js/vue-loader']
         }
       ]