Improve docs w/ some missing ingo, add v2 og image (#1756)

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
 
 <details>
-  <summary>Expand example of types in JavaScript</summary>
+  <summary>Expand example of typed imports</summary>
+
+  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.
-  ```
-</details>
-
-<details>
-  <summary>Expand example of types in TypeScript</summary>
-
-  ```ts path="example.ts"
-  /// <reference types="react" />
-  /// <reference types="mdx" />
-
-  import Post from './example.mdx' // `Post` is now typed.
+  import Post from './post.mdx' // `Post` is now typed.
   ```
 </details>
 
 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/

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

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.

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: `<theme.Box>stuff</theme.Box>`
+*   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
+    <Content {...exported} />
+    ```
 
 We also fixed several cases where defined, imported, or passed components
 weren’t handled correctly or even crashed.

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)