Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 765310c

Browse files
wooormwooorm
committed
Refactor some more docs
1 parent bc1d9e5 commit 765310c

File tree

10 files changed

+43
-107
lines changed

10 files changed

+43
-107
lines changed

‎docs/_asset/editor.jsx‎

Lines 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

‎docs/_asset/index.css‎

Lines 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
}

‎docs/_component/foot-site.jsx‎

Lines 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>

‎docs/_component/sort.js‎

Lines 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

‎docs/docs/extending-mdx.mdx‎

Lines changed: 4 additions & 0 deletions
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

‎docs/docs/getting-started.mdx‎

Lines changed: 1 addition & 1 deletion
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

‎docs/guides/syntax-highlighting.mdx‎

Lines changed: 10 additions & 83 deletions
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/

‎docs/playground.mdx‎

Lines changed: 1 addition & 1 deletion
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

‎packages/mdx/readme.md‎

Lines changed: 9 additions & 9 deletions
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

‎packages/rollup/test/index.js‎

Lines 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)