Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 765310c

Browse filesBrowse files
wooormwooorm
committed
Refactor some more docs
1 parent bc1d9e5 commit 765310c
Copy full SHA for 765310c

10 files changed

+43-107Lines changed: 43 additions & 107 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎docs/_asset/editor.jsx‎

Copy file name to clipboardExpand all lines: docs/_asset/editor.jsx
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -495,23 +495,23 @@ function Playground() {
495495
<input
496496
type="radio"
497497
name="development"
498-
checked={!development}
498+
checked={development}
499499
onChange={function () {
500-
setDevelopment(false)
500+
setDevelopment(true)
501501
}}
502502
/>{' '}
503-
generate for production (<code>development: false</code>)
503+
generate for development (<code>development: true</code>)
504504
</label>
505505
<label>
506506
<input
507507
type="radio"
508508
name="development"
509-
checked={development}
509+
checked={!development}
510510
onChange={function () {
511-
setDevelopment(true)
511+
setDevelopment(false)
512512
}}
513513
/>{' '}
514-
generate for development (<code>development: true</code>)
514+
generate for production (<code>development: false</code>)
515515
</label>
516516
</fieldset>
517517

Collapse file

‎docs/_asset/index.css‎

Copy file name to clipboardExpand all lines: docs/_asset/index.css
+5-2Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1169,6 +1169,11 @@ details[open] {
11691169
margin-block: calc(1 / 5 * (1em + 1ex));
11701170
padding-block: calc(2 * 1 / 5 * (1em + 1ex));
11711171
}
1172+
1173+
.playground {
1174+
display: grid;
1175+
grid-template-columns: 49% 49%;
1176+
}
11721177
}
11731178

11741179
@media (min-width: 64em) {
@@ -1229,8 +1234,6 @@ details[open] {
12291234
}
12301235

12311236
.playground {
1232-
display: grid;
1233-
grid-template-columns: 49% 49%;
12341237
min-height: 40rem;
12351238
gap: calc(1em + 1ex);
12361239
}
Collapse file

‎docs/_component/foot-site.jsx‎

Copy file name to clipboardExpand all lines: docs/_component/foot-site.jsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function FootSite() {
1111
>
1212
<div>
1313
<small>
14-
MDX is made with ❤️ in Boise, Amsterdam, and around the 🌏
14+
MDX is made with ❤️ in Amsterdam, Boise, and around the 🌏
1515
</small>
1616
<br />
1717
<small>This site does not track you.</small>
Collapse file

‎docs/_component/sort.js‎

Copy file name to clipboardExpand all lines: docs/_component/sort.js
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,15 @@ export function sortItems(items, sortString = 'navSortSelf,meta.title') {
5656
? collator(a, b)
5757
: typeof a === 'number' && typeof b === 'number'
5858
? a - b
59+
: (a === null || a === undefined) && (b === null || b === undefined)
60+
? 0
5961
: a === null || a === undefined
6062
? 1
6163
: b === null || b === undefined
6264
? -1
6365
: 0
64-
const result = order === 'asc' ? score : -score
65-
if (result) return result
66+
67+
if (score) return order === 'asc' ? score : -score
6668
}
6769

6870
return 0
Collapse file

‎docs/docs/extending-mdx.mdx‎

Copy file name to clipboardExpand all lines: docs/docs/extending-mdx.mdx
+4Lines changed: 4 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,13 @@ You can use this template:
6969
See also the [list of remark plugins][remark-plugins] and
7070
[list of rehype plugins][rehype-plugins].
7171

72+
* [`remcohaszing/recma-export-filepath`](https://github.com/remcohaszing/recma-export-filepath)
73+
— export the filepath
7274
* [`domdomegg/recma-mdx-displayname`](https://github.com/domdomegg/recma-mdx-displayname)
7375
— add a `displayName` to `MDXContent` components, to enable switching
7476
on them in production
77+
* [`remcohaszing/recma-mdx-is-mdx-component`](https://github.com/remcohaszing/recma-mdx-is-mdx-component)
78+
— add an `isMdxComponent` field on MDX components
7579
* [`remcohaszing/recma-nextjs-static-props`](https://github.com/remcohaszing/recma-nextjs-static-props)
7680
— generate [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)
7781
exposing top level identifiers in Next.js
Collapse file

‎docs/docs/getting-started.mdx‎

Copy file name to clipboardExpand all lines: docs/docs/getting-started.mdx
+1-1Lines changed: 1 addition & 1 deletion
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ so they have to be `import`ed instead of `require`d.
5050

5151
<Note type="info">
5252
**Note**: Using Rust instead of Node.js?
53-
Use [`mdxjs-rs`][mdxjs-rs]!
53+
Try [`mdxjs-rs`][mdxjs-rs]!
5454
</Note>
5555

5656
## Quick start
Collapse file

‎docs/guides/syntax-highlighting.mdx‎

Copy file name to clipboardExpand all lines: docs/guides/syntax-highlighting.mdx
+10-83Lines changed: 10 additions & 83 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -149,92 +149,15 @@ But as the above example shows, it’s a useful place to put some extra fields.
149149
the format of that meta string is, so it defaults to how markdown handles it:
150150
`meta` is ignored.
151151

152-
But what if you want to access `meta`?
153-
The short answer is: use [`remark-mdx-code-meta`][remark-mdx-code-meta].
152+
But what if you want to access `meta` at runtime?
153+
That’s exactly what the remark plugin
154+
[`remark-mdx-code-meta`][remark-mdx-code-meta] does.
154155
It lets you type JSX attributes in the `meta` part which you can access by
155156
with a component for `pre`.
156157

157-
The long answer is: do it yourself, however you want, by writing a custom plugin
158-
to interpret the `meta` field.
159-
For example, it’s possible to pass that string as a prop with a rehype plugin:
160-
161-
```tsx path="rehype-meta-as-attributes.js"
162-
import {visit} from 'unist-util-visit'
163-
164-
function rehypeMetaAsAttributes() {
165-
/**
166-
* @param {import('hast').Root} tree
167-
* Tree.
168-
*/
169-
return function (tree) {
170-
visit(tree, 'element', function (node) {
171-
if (node.tagName === 'code' && node.data && node.data.meta) {
172-
node.properties.meta = node.data.meta
173-
}
174-
})
175-
}
176-
}
177-
```
178-
179-
This would yields the following JSX:
180-
181-
```tsx path="output.jsx"
182-
<>
183-
<pre>
184-
<code className="language-js" meta='filename="index.js"'>
185-
console.log(1)
186-
</code>
187-
</pre>
188-
</>
189-
```
190-
191-
<Note type="important">
192-
**Important**: the `meta` attribute is not valid on `code` elements in HTML.
193-
Please make sure to handle it with a `code` component.
194-
</Note>
195-
196-
The meta string in this example looks a lot like HTML attributes.
197-
What if we wanted to add each “attribute” as a prop?
198-
That can be achieved with the same rehype plugin as above with a different
199-
`onelement` handler:
200-
201-
```tsx path="rehype-meta-as-attributes.js"
202-
// A regex that looks for a simplified attribute name, optionally followed
203-
// by a double, single, or unquoted attribute value
204-
const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g
205-
206-
// …
207-
visit(tree, 'element', function (node) {
208-
let match
209-
210-
if (node.tagName === 'code' && node.data && node.data.meta) {
211-
re.lastIndex = 0 // Reset regex.
212-
213-
while ((match = re.exec(node.data.meta))) {
214-
node.properties[match[1]] = match[2] || match[3] || match[4] || ''
215-
}
216-
}
217-
})
218-
// …
219-
```
220-
221-
This would yields the following JSX:
222-
223-
```tsx path="output.jsx"
224-
<>
225-
<pre>
226-
<code className="language-js" filename="index.js">
227-
console.log(1)
228-
</code>
229-
</pre>
230-
</>
231-
```
232-
233-
<Note type="important">
234-
**Important**: these arbitrary attributes might not be valid on `code`
235-
elements in HTML.
236-
Please handle them with a `code` component.
237-
</Note>
158+
That plugin, like all remark plugins, can be passed as
159+
[`remarkPlugins` in `ProcessorOptions`][processor-options].
160+
More info on plugins is available in [§ Extending MDX][extend]
238161

239162
[commonmark]: https://spec.commonmark.org/current/
240163

@@ -245,3 +168,7 @@ This would yields the following JSX:
245168
[react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter
246169

247170
[remark-mdx-code-meta]: https://github.com/remcohaszing/remark-mdx-code-meta
171+
172+
[processor-options]: /packages/mdx/#processoroptions
173+
174+
[extend]: /docs/extending-mdx/
Collapse file

‎docs/playground.mdx‎

Copy file name to clipboardExpand all lines: docs/playground.mdx
+1-1Lines changed: 1 addition & 1 deletion
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const info = {
33
{github: 'johno', name: 'John Otander', twitter: '4lpine'},
44
{github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
55
],
6-
modified: new Date('2023-09-29'),
6+
modified: new Date('2023-12-24'),
77
published: new Date('2021-09-13')
88
}
99
export const navSortSelf = 5
Collapse file

‎packages/mdx/readme.md‎

Copy file name to clipboardExpand all lines: packages/mdx/readme.md
+9-9Lines changed: 9 additions & 9 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,7 @@ import * as runtime from 'react/jsx-runtime'
342342

343343
const code = '' // To do: get `code` from server somehow.
344344

345-
const {default: Content} = await run(code, runtime)
345+
const {default: Content} = await run(code, {...runtime, baseUrl: import.meta.url})
346346

347347
console.log(Content)
348348
```
@@ -569,7 +569,7 @@ Configuration for `createProcessor` (TypeScript type).
569569

570570
const path = 'example.mdx'
571571
const value = await fs.readFile(path)
572-
const MDXContent = (await evaluate({path, value}, runtime)).default
572+
const MDXContent = (await evaluate({path, value}, {...runtime, baseUrl: import.meta.url})).default
573573

574574
console.log(MDXContent({}))
575575
```
@@ -595,8 +595,8 @@ Configuration for `createProcessor` (TypeScript type).
595595

596596
const path = 'example.mdx'
597597
const value = await fs.readFile(path)
598-
-const MDXContent = (await evaluate({path, value}, runtime)).default
599-
+const MDXContent = (await evaluate({path, value}, {development: true, ...runtime})).default
598+
-const MDXContent = (await evaluate({path, value}, {...runtime, baseUrl: import.meta.url})).default
599+
+const MDXContent = (await evaluate({path, value}, {development: true, ...runtime, baseUrl: import.meta.url})).default
600600

601601
console.log(MDXContent({}))
602602
```
@@ -1021,7 +1021,7 @@ matter).
10211021
* `jsxs` ([`Jsx`][api-jsx], optional)
10221022
— function to generate an element with dynamic children in production mode
10231023
* `useMDXComponents` ([`UseMdxComponents`][api-use-mdx-components], optional)
1024-
— function to get components from context
1024+
— function to get components to use
10251025

10261026
###### Examples
10271027

@@ -1030,7 +1030,7 @@ A `/jsx-runtime` module will expose `Fragment`, `jsx`, and `jsxs`:
10301030
```tsx
10311031
import * as runtime from 'react/jsx-runtime'
10321032

1033-
const {default: Content} = await evaluate('# hi', {...runtime, ...otherOptions})
1033+
const {default: Content} = await evaluate('# hi', {...runtime, baseUrl: import.meta.url, ...otherOptions})
10341034

10351035
```
10361036

@@ -1039,7 +1039,7 @@ A `/jsx-dev-runtime` module will expose `Fragment` and `jsxDEV`:
10391039
```tsx
10401040
import * as runtime from 'react/jsx-dev-runtime'
10411041

1042-
const {default: Content} = await evaluate('# hi', {development: true, ...runtime, ...otherOptions})
1042+
const {default: Content} = await evaluate('# hi', {development: true, baseUrl: import.meta.url, ...runtime, ...otherOptions})
10431043
```
10441044

10451045
Our providers will expose `useMDXComponents`:
@@ -1048,12 +1048,12 @@ Our providers will expose `useMDXComponents`:
10481048
import * as provider from '@mdx-js/react'
10491049
import * as runtime from 'react/jsx-runtime'
10501050

1051-
const {default: Content} = await evaluate('# hi', {...provider, ...runtime, ...otherOptions})
1051+
const {default: Content} = await evaluate('# hi', {...provider, ...runtime, baseUrl: import.meta.url, ...otherOptions})
10521052
```
10531053

10541054
### `UseMdxComponents`
10551055

1056-
Get components from context (TypeScript type).
1056+
Get components (TypeScript type).
10571057

10581058
###### Parameters
10591059

Collapse file

‎packages/rollup/test/index.js‎

Copy file name to clipboardExpand all lines: packages/rollup/test/index.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ test('@mdx-js/rollup', async function (t) {
5959
await fs.rm(jsUrl)
6060
})
6161

62-
await t.test('vite production', async () => {
62+
await t.test('should infer production mode in vite', async () => {
6363
const result = /** @type {Array<RollupOutput>} */ (
6464
await build({
6565
build: {
@@ -80,7 +80,7 @@ test('@mdx-js/rollup', async function (t) {
8080
assert.doesNotMatch(code, /jsxDEV\(/)
8181
})
8282

83-
await t.test('vite development', async () => {
83+
await t.test('should infer development mode in vite', async () => {
8484
const result = /** @type {Array<RollupOutput>} */ (
8585
await build({
8686
build: {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.