Refactor some more docs

Author: wooorm

docs/_asset/editor.jsx

@@ -495,23 +495,23 @@ function Playground() {
               <input
                 type="radio"
                 name="development"
-                checked={!development}
+                checked={development}
                 onChange={function () {
-                  setDevelopment(false)
+                  setDevelopment(true)
                 }}
               />{' '}
-              generate for production (<code>development: false</code>)
+              generate for development (<code>development: true</code>)
             </label>
             <label>
               <input
                 type="radio"
                 name="development"
-                checked={development}
+                checked={!development}
                 onChange={function () {
-                  setDevelopment(true)
+                  setDevelopment(false)
                 }}
               />{' '}
-              generate for development (<code>development: true</code>)
+              generate for production (<code>development: false</code>)
             </label>
           </fieldset>
 

docs/_asset/index.css

@@ -1169,6 +1169,11 @@ details[open] {
     margin-block: calc(1 / 5 * (1em + 1ex));
     padding-block: calc(2 * 1 / 5 * (1em + 1ex));
   }
+
+  .playground {
+    display: grid;
+    grid-template-columns: 49% 49%;
+  }
 }
 
 @media (min-width: 64em) {
@@ -1229,8 +1234,6 @@ details[open] {
 }
 
 .playground {
-  display: grid;
-  grid-template-columns: 49% 49%;
   min-height: 40rem;
   gap: calc(1em + 1ex);
 }

docs/_component/foot-site.jsx

@@ -11,7 +11,7 @@ export function FootSite() {
         >
           <div>
             <small>
-              MDX is made with ❤️ in Boise, Amsterdam, and around the 🌏
+              MDX is made with ❤️ in Amsterdam, Boise, and around the 🌏
             </small>
             <br />
             <small>This site does not track you.</small>

docs/_component/sort.js

@@ -56,13 +56,15 @@ export function sortItems(items, sortString = 'navSortSelf,meta.title') {
           ? collator(a, b)
           : typeof a === 'number' && typeof b === 'number'
           ? a - b
+          : (a === null || a === undefined) && (b === null || b === undefined)
+          ? 0
           : a === null || a === undefined
           ? 1
           : b === null || b === undefined
           ? -1
           : 0
-      const result = order === 'asc' ? score : -score
-      if (result) return result
+
+      if (score) return order === 'asc' ? score : -score
     }
 
     return 0

docs/docs/extending-mdx.mdx

@@ -69,9 +69,13 @@ You can use this template:
 See also the [list of remark plugins][remark-plugins] and
 [list of rehype plugins][rehype-plugins].
 
+* [`remcohaszing/recma-export-filepath`](https://github.com/remcohaszing/recma-export-filepath)
+  — export the filepath
 * [`domdomegg/recma-mdx-displayname`](https://github.com/domdomegg/recma-mdx-displayname)
   — add a `displayName` to `MDXContent` components, to enable switching
   on them in production
+* [`remcohaszing/recma-mdx-is-mdx-component`](https://github.com/remcohaszing/recma-mdx-is-mdx-component)
+  — add an `isMdxComponent` field on MDX components
 * [`remcohaszing/recma-nextjs-static-props`](https://github.com/remcohaszing/recma-nextjs-static-props)
   — generate [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)
   exposing top level identifiers in Next.js

docs/docs/getting-started.mdx

@@ -50,7 +50,7 @@ so they have to be `import`ed instead of `require`d.
 
 <Note type="info">
   **Note**: Using Rust instead of Node.js?
-  Use [`mdxjs-rs`][mdxjs-rs]!
+  Try [`mdxjs-rs`][mdxjs-rs]!
 </Note>
 
 ## Quick start

docs/guides/syntax-highlighting.mdx

@@ -149,92 +149,15 @@ But as the above example shows, it’s a useful place to put some extra fields.
 the format of that meta string is, so it defaults to how markdown handles it:
 `meta` is ignored.
 
-But what if you want to access `meta`?
-The short answer is: use [`remark-mdx-code-meta`][remark-mdx-code-meta].
+But what if you want to access `meta` at runtime?
+That’s exactly what the remark plugin
+[`remark-mdx-code-meta`][remark-mdx-code-meta] does.
 It lets you type JSX attributes in the `meta` part which you can access by
 with a component for `pre`.
 
-The long answer is: do it yourself, however you want, by writing a custom plugin
-to interpret the `meta` field.
-For example, it’s possible to pass that string as a prop with a rehype plugin:
-
-```tsx path="rehype-meta-as-attributes.js"
-import {visit} from 'unist-util-visit'
-
-function rehypeMetaAsAttributes() {
-  /**
-   * @param {import('hast').Root} tree
-   *   Tree.
-   */
-  return function (tree) {
-    visit(tree, 'element', function (node) {
-      if (node.tagName === 'code' && node.data && node.data.meta) {
-        node.properties.meta = node.data.meta
-      }
-    })
-  }
-}
-```
-
-This would yields the following JSX:
-
-```tsx path="output.jsx"
-<>
-  <pre>
-    <code className="language-js" meta='filename="index.js"'>
-      console.log(1)
-    </code>
-  </pre>
-</>
-```
-
-<Note type="important">
-  **Important**: the `meta` attribute is not valid on `code` elements in HTML.
-  Please make sure to handle it with a `code` component.
-</Note>
-
-The meta string in this example looks a lot like HTML attributes.
-What if we wanted to add each “attribute” as a prop?
-That can be achieved with the same rehype plugin as above with a different
-`onelement` handler:
-
-```tsx path="rehype-meta-as-attributes.js"
-// A regex that looks for a simplified attribute name, optionally followed
-// by a double, single, or unquoted attribute value
-const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g
-
-    // …
-    visit(tree, 'element', function (node) {
-      let match
-
-      if (node.tagName === 'code' && node.data && node.data.meta) {
-        re.lastIndex = 0 // Reset regex.
-
-        while ((match = re.exec(node.data.meta))) {
-          node.properties[match[1]] = match[2] || match[3] || match[4] || ''
-        }
-      }
-    })
-    // …
-```
-
-This would yields the following JSX:
-
-```tsx path="output.jsx"
-<>
-  <pre>
-    <code className="language-js" filename="index.js">
-      console.log(1)
-    </code>
-  </pre>
-</>
-```
-
-<Note type="important">
-  **Important**: these arbitrary attributes might not be valid on `code`
-  elements in HTML.
-  Please handle them with a `code` component.
-</Note>
+That plugin, like all remark plugins, can be passed as
+[`remarkPlugins` in `ProcessorOptions`][processor-options].
+More info on plugins is available in [§ Extending MDX][extend]
 
 [commonmark]: https://spec.commonmark.org/current/
 
@@ -245,3 +168,7 @@ This would yields the following JSX:
 [react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter
 
 [remark-mdx-code-meta]: https://github.com/remcohaszing/remark-mdx-code-meta
+
+[processor-options]: /packages/mdx/#processoroptions
+
+[extend]: /docs/extending-mdx/

docs/playground.mdx

@@ -3,7 +3,7 @@ export const info = {
     {github: 'johno', name: 'John Otander', twitter: '4lpine'},
     {github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
   ],
-  modified: new Date('2023-09-29'),
+  modified: new Date('2023-12-24'),
   published: new Date('2021-09-13')
 }
 export const navSortSelf = 5

packages/mdx/readme.md

@@ -342,7 +342,7 @@ import * as runtime from 'react/jsx-runtime'
 
 const code = '' // To do: get `code` from server somehow.
 
-const {default: Content} = await run(code, runtime)
+const {default: Content} = await run(code, {...runtime, baseUrl: import.meta.url})
 
 console.log(Content)
 ```
@@ -569,7 +569,7 @@ Configuration for `createProcessor` (TypeScript type).
 
   const path = 'example.mdx'
   const value = await fs.readFile(path)
-  const MDXContent = (await evaluate({path, value}, runtime)).default
+  const MDXContent = (await evaluate({path, value}, {...runtime, baseUrl: import.meta.url})).default
 
   console.log(MDXContent({}))
   ```
@@ -595,8 +595,8 @@ Configuration for `createProcessor` (TypeScript type).
 
   const path = 'example.mdx'
   const value = await fs.readFile(path)
-  -const MDXContent = (await evaluate({path, value}, runtime)).default
-  +const MDXContent = (await evaluate({path, value}, {development: true, ...runtime})).default
+  -const MDXContent = (await evaluate({path, value}, {...runtime, baseUrl: import.meta.url})).default
+  +const MDXContent = (await evaluate({path, value}, {development: true, ...runtime, baseUrl: import.meta.url})).default
 
   console.log(MDXContent({}))
   ```
@@ -1021,7 +1021,7 @@ matter).
 * `jsxs` ([`Jsx`][api-jsx], optional)
   — function to generate an element with dynamic children in production mode
 * `useMDXComponents` ([`UseMdxComponents`][api-use-mdx-components], optional)
-  — function to get components from context
+  — function to get components to use
 
 ###### Examples
 
@@ -1030,7 +1030,7 @@ A `/jsx-runtime` module will expose `Fragment`, `jsx`, and `jsxs`:
 ```tsx
 import * as runtime from 'react/jsx-runtime'
 
-const {default: Content} = await evaluate('# hi', {...runtime, ...otherOptions})
+const {default: Content} = await evaluate('# hi', {...runtime, baseUrl: import.meta.url, ...otherOptions})
 
 ```
 
@@ -1039,7 +1039,7 @@ A `/jsx-dev-runtime` module will expose `Fragment` and `jsxDEV`:
 ```tsx
 import * as runtime from 'react/jsx-dev-runtime'
 
-const {default: Content} = await evaluate('# hi', {development: true, ...runtime, ...otherOptions})
+const {default: Content} = await evaluate('# hi', {development: true, baseUrl: import.meta.url, ...runtime, ...otherOptions})
 ```
 
 Our providers will expose `useMDXComponents`:
@@ -1048,12 +1048,12 @@ Our providers will expose `useMDXComponents`:
 import * as provider from '@mdx-js/react'
 import * as runtime from 'react/jsx-runtime'
 
-const {default: Content} = await evaluate('# hi', {...provider, ...runtime, ...otherOptions})
+const {default: Content} = await evaluate('# hi', {...provider, ...runtime, baseUrl: import.meta.url, ...otherOptions})
 ```
 
 ### `UseMdxComponents`
 
-Get components from context (TypeScript type).
+Get components (TypeScript type).
 
 ###### Parameters
 

packages/rollup/test/index.js

@@ -59,7 +59,7 @@ test('@mdx-js/rollup', async function (t) {
     await fs.rm(jsUrl)
   })
 
-  await t.test('vite production', async () => {
+  await t.test('should infer production mode in vite', async () => {
     const result = /** @type {Array<RollupOutput>} */ (
       await build({
         build: {
@@ -80,7 +80,7 @@ test('@mdx-js/rollup', async function (t) {
     assert.doesNotMatch(code, /jsxDEV\(/)
   })
 
-  await t.test('vite development', async () => {
+  await t.test('should infer development mode in vite', async () => {
     const result = /** @type {Array<RollupOutput>} */ (
       await build({
         build: {