Skip to content

Commit

Permalink
Add use of tla in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
wooorm committed Jun 17, 2022
1 parent 366ddb4 commit 3579aa3
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 123 deletions.
26 changes: 5 additions & 21 deletions docs/docs/getting-started.server.mdx
Expand Up @@ -665,11 +665,7 @@ on how to use MDX with React Static.
```js path="example.js"
import {compile} from '@mdx-js/mdx'

main()

async function main() {
const js = String(await compile('# hi', {jsxImportSource: '@emotion/react', /* otherOptions… */}))
}
const js = String(await compile('# hi', {jsxImportSource: '@emotion/react', /* otherOptions… */}))
```
</details>

Expand Down Expand Up @@ -731,11 +727,7 @@ more info.
```js path="example.js"
import {compile} from '@mdx-js/mdx'

main()

async function main() {
const js = String(await compile('# hi', {jsxImportSource: 'preact', /* otherOptions… */}))
}
const js = String(await compile('# hi', {jsxImportSource: 'preact', /* otherOptions… */}))
```
</details>

Expand Down Expand Up @@ -811,11 +803,7 @@ info.
```js path="example.js"
import {compile} from '@mdx-js/mdx'

main()

async function main() {
const js = String(await compile('# hi', {jsxImportSource: 'svelte-jsx', /* otherOptions… */}))
}
const js = String(await compile('# hi', {jsxImportSource: 'svelte-jsx', /* otherOptions… */}))
```
</details>

Expand All @@ -835,12 +823,8 @@ which you might be using, for more info.
import {compile} from '@mdx-js/mdx'
import babel from '@babel/core'

main()

async function main() {
const jsx = String(await compile('# hi', {jsx: true, /* otherOptions… */}))
const js = (await babel.transformAsync(jsx, {plugins: ['@vue/babel-plugin-jsx']})).code
}
const jsx = String(await compile('# hi', {jsx: true, /* otherOptions… */}))
const js = (await babel.transformAsync(jsx, {plugins: ['@vue/babel-plugin-jsx']})).code
```
</details>

Expand Down
22 changes: 10 additions & 12 deletions docs/guides/embed.server.mdx
Expand Up @@ -4,7 +4,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-10-06'),
modified: new Date('2021-11-01')
modified: new Date('2022-06-17')
}

# Embed
Expand Down Expand Up @@ -35,21 +35,19 @@ import fauxOembedTransformer from '@remark-embedder/transformer-oembed'
const remarkEmbedder = fauxRemarkEmbedder.default
const oembedTransformer = fauxOembedTransformer.default

main(`
const code = `
Check out this video:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
`)

async function main(code) {
console.log(
String(
await compile(code, {
remarkPlugins: [[remarkEmbedder, {transformers: [oembedTransformer]}]]
})
)
`

console.log(
String(
await compile(code, {
remarkPlugins: [[remarkEmbedder, {transformers: [oembedTransformer]}]]
})
)
}
)
```

<details>
Expand Down
24 changes: 8 additions & 16 deletions docs/guides/frontmatter.server.mdx
Expand Up @@ -4,7 +4,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-10-06'),
modified: new Date('2021-11-01')
modified: new Date('2022-06-17')
}

# Frontmatter
Expand Down Expand Up @@ -50,12 +50,8 @@ Then without compiling or evaluating the metadata can be accessed like so:
import {promises as fs} from 'node:fs'
import yaml from 'js-yaml'

main()

async function main() {
console.log(yaml.loadAll(await fs.readFile('post.mdx'))[0])
// Prints `{title: 'Hi, World!'}`
}
console.log(yaml.loadAll(await fs.readFile('post.mdx'))[0])
// Prints `{title: 'Hi, World!'}`
```

Our compiler, `@mdx-js/mdx`, doesn’t understand YAML frontmatter by default but
Expand All @@ -67,15 +63,11 @@ import {promises as fs} from 'node:fs'
import remarkFrontmatter from 'remark-frontmatter'
import {compile} from '@mdx-js/mdx'

main()

async function main() {
console.log(
await compile(await fs.readFile('post.mdx'), {
remarkPlugins: [remarkFrontmatter]
})
)
}
console.log(
await compile(await fs.readFile('post.mdx'), {
remarkPlugins: [remarkFrontmatter]
})
)
```

Now it “works”.
Expand Down
14 changes: 5 additions & 9 deletions docs/guides/gfm.server.mdx
Expand Up @@ -4,7 +4,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-10-06'),
modified: new Date('2021-11-01')
modified: new Date('2022-06-17')
}

# GitHub flavored markdown (GFM)
Expand Down Expand Up @@ -55,15 +55,11 @@ import {promises as fs} from 'node:fs'
import {compile} from '@mdx-js/mdx'
import remarkGfm from 'remark-gfm'

main()

async function main() {
console.log(
String(
await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]})
)
console.log(
String(
await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]})
)
}
)
```

<details>
Expand Down
20 changes: 8 additions & 12 deletions docs/guides/math.server.mdx
Expand Up @@ -5,7 +5,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-10-06'),
modified: new Date('2022-02-01')
modified: new Date('2022-06-17')
}

# Math
Expand Down Expand Up @@ -36,18 +36,14 @@ import {compile} from '@mdx-js/mdx'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

main()

async function main() {
console.log(
String(
await compile(await fs.readFile('example.mdx'), {
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
})
)
console.log(
String(
await compile(await fs.readFile('example.mdx'), {
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
})
)
}
)
```

<details>
Expand Down
14 changes: 6 additions & 8 deletions docs/guides/syntax-highlighting.server.mdx
Expand Up @@ -5,7 +5,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-10-06'),
modified: new Date('2022-02-01')
modified: new Date('2022-06-17')
}

# Syntax highlighting
Expand Down Expand Up @@ -35,15 +35,13 @@ Use either [`rehype-highlight`][rehype-highlight]
import rehypeHighlight from 'rehype-highlight'
import {compile} from '@mdx-js/mdx'

main(`~~~js
const code = `~~~js
console.log(1)
~~~`)
~~~`

async function main(code) {
console.log(
String(await compile(code, {rehypePlugins: [rehypeHighlight]}))
)
}
console.log(
String(await compile(code, {rehypePlugins: [rehypeHighlight]}))
)
```

<details>
Expand Down
70 changes: 25 additions & 45 deletions packages/mdx/readme.md
Expand Up @@ -78,12 +78,9 @@ Add some code in `example.js` to compile `example.mdx` to JavaScript:
import {promises as fs} from 'node:fs'
import {compile} from '@mdx-js/mdx'

main()
const compiled = await compile(await fs.readFile('example.mdx'))

async function main() {
const compiled = await compile(await fs.readFile('example.mdx'))
console.log(String(compiled))
}
console.log(String(compiled))
```

Yields roughly:
Expand Down Expand Up @@ -285,12 +282,10 @@ A module `example.js`:
```js
import {compile} from '@mdx-js/mdx'

main('export const no = 3.14\n\n# hi {no}')
const code = 'export const no = 3.14\n\n# hi {no}'

async function main(code) {
console.log(String(await compile(code, {outputFormat: 'program'}))) // Default
console.log(String(await compile(code, {outputFormat: 'function-body'})))
}
console.log(String(await compile(code, {outputFormat: 'program'}))) // Default
console.log(String(await compile(code, {outputFormat: 'function-body'})))
```

…yields:
Expand Down Expand Up @@ -383,13 +378,10 @@ Say we have a module `example.js`:
```js
import {compile} from '@mdx-js/mdx'

main()
const code = 'export {number} from "./data.js"\n\n# hi'
const baseUrl = 'https://a.full/url' // Typically `import.meta.url`

async function main() {
const code = 'export {number} from "./data.js"\n\n# hi'
const baseUrl = 'https://a.full/url' // Typically `import.meta.url`
console.log(String(await compile(code, {baseUrl})))
}
console.log(String(await compile(code, {baseUrl})))
```

…now running `node example.js` yields:
Expand Down Expand Up @@ -428,14 +420,11 @@ import {promises as fs} from 'node:fs'
import * as runtime from 'react/jsx-runtime'
import {evaluate} from '@mdx-js/mdx'

main()
const path = 'example.mdx'
const value = await fs.readFile(path)
const MDXContent = (await evaluate({path, value}, runtime)).default

async function main() {
const path = 'example.mdx'
const value = await fs.readFile(path)
const MDXContent = (await evaluate({path, value}, runtime)).default
console.log(MDXContent())
}
console.log(MDXContent())
```

Running that would normally (production) yield:
Expand All @@ -451,14 +440,12 @@ Error: Expected component `NoteIcon` to be defined: you likely forgot to import,
But if we change add `development: true` to our example:

```diff
@@ -7,6 +7,6 @@ main()
async function main() {
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
console.log(MDXContent({}))
}
@@ -7,6 +7,6 @@
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
console.log(MDXContent({}))
```

And we’d run it again, we’d get:
Expand Down Expand Up @@ -491,16 +478,12 @@ import {promises as fs} from 'node:fs'
import {SourceMapGenerator} from 'source-map'
import {compile} from '@mdx-js/mdx'

main()

async function main() {
const file = await compile(
{path: 'example.mdx', value: await fs.readFile('example.mdx')},
{SourceMapGenerator}
)
const file = await compile(
{path: 'example.mdx', value: await fs.readFile('example.mdx')},
{SourceMapGenerator}
)

console.log(file.map)
}
console.log(file.map)
```

…yields:
Expand Down Expand Up @@ -724,12 +707,9 @@ import remarkPresetLintConsistent from 'remark-preset-lint-consistent' // Lint r
import {reporter} from 'vfile-reporter'
import {compile} from '@mdx-js/mdx'

main()
const file = await compile('*like this* or _like this_?', {remarkPlugins: [remarkPresetLintConsistent]})

async function main() {
const file = await compile('*like this* or _like this_?', {remarkPlugins: [remarkPresetLintConsistent]})
console.error(reporter(file))
}
console.error(reporter(file))
```

Yields:
Expand Down

1 comment on commit 3579aa3

@vercel
Copy link

@vercel vercel bot commented on 3579aa3 Jun 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

mdxjs.com
v2.mdxjs.com
mdx-git-main-mdx.vercel.app
mdx-mdx.vercel.app

Please sign in to comment.