diff --git a/docs/_static/og-v2.png b/docs/_static/og-v2.png
new file mode 100644
index 00000000..0ab83181
Binary files /dev/null and b/docs/_static/og-v2.png differ
diff --git a/docs/docs/getting-started.server.mdx b/docs/docs/getting-started.server.mdx
index 26570752..1efedbf1 100644
--- a/docs/docs/getting-started.server.mdx
+++ b/docs/docs/getting-started.server.mdx
@@ -41,6 +41,7 @@ See [§ Using MDX][use] when you’re all set up and ready to use MDX.
* [Site generators](#site-generators)
* [JSX runtimes](#jsx-runtimes)
* [JavaScript engines](#javascript-engines)
+* [Further reading](#further-reading)
## Prerequisites
@@ -164,35 +165,31 @@ adding support for MDX in your editor:
### Types
- Expand example of types in JavaScript
+ Expand example of typed imports
+
+ First install the package:
+
+ ```sh
+ npm install @types/mdx
+ ```
+
+ …TypeScript should automatically pick it up:
```js path="example.js"
- /**
- * @typedef {import('react')}
- * @typedef {import('mdx')}
- */
-
- import Post from './example.mdx' // `Post` is now typed.
- ```
-
-
-
- Expand example of types in TypeScript
-
- ```ts path="example.ts"
- ///
- ///
-
- import Post from './example.mdx' // `Post` is now typed.
+ import Post from './post.mdx' // `Post` is now typed.
```
All our APIs are fully typed with
[TypeScript](https://www.typescriptlang.org).
-To enable types for imported `.mdx`, `.md`, etcetera files, first make sure
-the TypeScript `JSX` namespace is typed (such as by importing the `react`
-types if you’re using that) and then install and use
-[`@types/mdx`](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/mdx).
+
+To enable types for imported `.mdx`, `.md`, etcetera files, you should make sure
+the TypeScript `JSX` namespace is typed.
+This is done by installing and using the types of your framework, such as
+[`@types/react`](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react).
+Then you can install and use
+[`@types/mdx`](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/mdx),
+which adds types to import statements of supported files.
### Security
@@ -777,12 +774,20 @@ alternatively they can be `require`d with the legacy package
[`@mdx-js/register`][mdx-register].
See their readmes on how to configure them.
+## Further reading
+
+* If you want to use MDX content in your project, see [§ Using MDX][use]
+* If you’re getting errors integrating MDX, see
+ [§ Troubleshooting MDX][trouble] or [§ Support][support]
+
[jsx]: #jsx
[what]: /docs/what-is-mdx/
[use]: /docs/using-mdx/
+[trouble]: /docs/troubleshooting-mdx/
+
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
[mdx-esbuild]: /packages/esbuild/
diff --git a/docs/docs/what-is-mdx.server.mdx b/docs/docs/what-is-mdx.server.mdx
index 51c49203..3fe051b3 100644
--- a/docs/docs/what-is-mdx.server.mdx
+++ b/docs/docs/what-is-mdx.server.mdx
@@ -36,6 +36,7 @@ project.
* [Expressions](#expressions)
* [ESM](#esm)
* [Interleaving](#interleaving)
+* [Further reading](#further-reading)
## Prerequisites
@@ -339,6 +340,12 @@ So in this case two paragraphs and a heading.
Leaving an opening `a` tag in the first paragraph and a stray closing `a` tag in
the heading.
+## Further reading
+
+* If you want to use MDX in your project, see [§ Getting started][start]
+* If you’re getting errors when working with the format, see
+ [§ Troubleshooting MDX][trouble]
+
[commonmark]: https://commonmark.org
[commonmark-help]: https://commonmark.org/help/
@@ -351,6 +358,8 @@ the heading.
[start]: /docs/getting-started/
+[trouble]: /docs/troubleshooting-mdx/
+
[use]: /docs/using-mdx/
[using-plugins]: /docs/extending-mdx/#using-plugins
diff --git a/docs/index.server.mdx b/docs/index.server.mdx
index 01bd128d..89e1d050 100644
--- a/docs/index.server.mdx
+++ b/docs/index.server.mdx
@@ -50,7 +50,7 @@ Markdown for the\
MDX allows you to use JSX in your markdown content.
You can import components, such as interactive charts or alerts, and embed them
within your content.
-This makes writing long-form content with components a blast.
+This makes writing long-form content with components a blast. {/* more */}
🚀
[Continue reading »][what]
@@ -123,9 +123,9 @@ This makes writing long-form content with components a blast.
We made an interactive playground where you can try MDX out and see what it
turns into.
-[To the playground »][playground]
+[Play »][playground]
-## Install
+## Get started
There are integrations for most bundlers, frameworks, and editors.
Whether you build with Next.js, Docusaurus, or Gatsby.
diff --git a/docs/migrating/v2.server.mdx b/docs/migrating/v2.server.mdx
index d553e8e2..38374038 100644
--- a/docs/migrating/v2.server.mdx
+++ b/docs/migrating/v2.server.mdx
@@ -635,6 +635,13 @@ The interface of the generated JavaScript from MDX changed:
* You can now pass and use objects of components: if you pass
`components={{theme}}`, where `theme` is an object with a `Box` component,
it can be used with: `stuff`
+* the values exports from an MDX file are no longer passed to layouts, you
+ can achieve the same with:
+ ```js
+ import * as everything from './example.mdx'
+ const {default: Content, ...exported} = everything
+
+ ```
We also fixed several cases where defined, imported, or passed components
weren’t handled correctly or even crashed.
diff --git a/website/prerender.js b/website/prerender.js
index db58f919..36bc9c8f 100644
--- a/website/prerender.js
+++ b/website/prerender.js
@@ -142,9 +142,12 @@ async function main() {
height: 1490
}
: {
- url: new URL('./index.png', canonical),
- width: 2048,
- height: 1170
+ url:
+ name === '/blog/v2/' || name === '/migrating/v2/'
+ ? new URL('og-v2.png', config.site)
+ : new URL('./index.png', canonical),
+ width: 2400,
+ height: 1256
}
})
.use(rehypePresetMinify)