Skip to content

Commit 120d082

Browse files
pomberpomber
committed
Update mdx-bundler
1 parent a8e7e46 commit 120d082

7 files changed

Lines changed: 255 additions & 46 deletions

File tree

‎examples/mdx-bundler/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"dependencies": {
1111
"@code-hike/mdx": "^0.7.4",
1212
"esbuild": "^0.14.23",
13-
"mdx-bundler": "^9.0.1",
14-
"next": "^13.0.7",
13+
"mdx-bundler": "^9.2.1",
14+
"next": "13.1.2",
1515
"react": "^18.1.0",
1616
"react-dom": "^18.1.0"
1717
}

‎examples/mdx-bundler/pages/index.js‎

Lines changed: 13 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,21 @@
1-
import { remarkCodeHike } from "@code-hike/mdx"
2-
import theme from "shiki/themes/solarized-dark.json"
3-
import fs from "fs"
4-
import path from "path"
5-
import { bundleMDX } from "mdx-bundler"
6-
import { getMDXComponent } from "mdx-bundler/client"
1+
import { getPostNames } from "../src/posts"
72

83
export async function getStaticProps() {
9-
// can be from a local file, database, anywhere
10-
const source = fs.readFileSync("posts/lorem.mdx", "utf-8")
11-
12-
// https://github.com/kentcdodds/mdx-bundler#nextjs-esbuild-enoent
13-
if (process.platform === "win32") {
14-
process.env.ESBUILD_BINARY_PATH = path.join(
15-
process.cwd(),
16-
"node_modules",
17-
"esbuild",
18-
"esbuild.exe"
19-
)
20-
} else {
21-
process.env.ESBUILD_BINARY_PATH = path.join(
22-
process.cwd(),
23-
"node_modules",
24-
"esbuild",
25-
"bin",
26-
"esbuild"
27-
)
28-
}
29-
30-
const { code } = await bundleMDX({
31-
source,
32-
files: {},
33-
mdxOptions(options) {
34-
options.remarkPlugins = [
35-
...(options.remarkPlugins ?? []),
36-
[remarkCodeHike, { theme }],
37-
]
38-
return options
39-
},
40-
})
41-
42-
return { props: { source: code } }
4+
const postNames = getPostNames()
5+
return { props: { postNames } }
436
}
447

45-
export default function Page({ source }) {
46-
const Content = getMDXComponent(source)
8+
export default function Page({ postNames }) {
479
return (
48-
<div style={{ width: 800, margin: "0 auto" }}>
49-
<Content />
10+
<div style={{ width: 800, margin: "0 auto", fontFamily: "sans-serif" }}>
11+
<h1>Blog</h1>
12+
<ul>
13+
{postNames.map((postName) => (
14+
<li key={postName}>
15+
<a href={`/posts/${postName}`}>{postName}</a>
16+
</li>
17+
))}
18+
</ul>
5019
</div>
5120
)
5221
}

‎examples/mdx-bundler/pages/posts/[postName].js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { getMDXComponent } from "mdx-bundler/client"
2+
import { getPostNames, getPostSource } from "../../src/posts"
3+
4+
export function getStaticPaths() {
5+
const paths = getPostNames().map((postName) => ({ params: { postName } }))
6+
return {
7+
paths,
8+
fallback: false,
9+
}
10+
}
11+
12+
export async function getStaticProps({ params }) {
13+
return { props: { source: await getPostSource(params.postName) } }
14+
}
15+
16+
export default function Page({ source }) {
17+
const Content = getMDXComponent(source)
18+
return (
19+
<div style={{ width: 800, margin: "0 auto", fontFamily: "sans-serif" }}>
20+
<Content />
21+
</div>
22+
)
23+
}

examples/mdx-bundler/posts/lorem.mdx renamed to examples/mdx-bundler/posts/basic.mdx

File renamed without changes.

‎examples/mdx-bundler/posts/scrollycoding.mdx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
# Scrollycoding
2+
3+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
4+
5+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
6+
7+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
8+
9+
<CH.Scrollycoding>
10+
11+
## Step 1
12+
13+
Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
14+
15+
> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
16+
> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
17+
> eripuit, qua fistula haec partus; serpens, negat.
18+
19+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
20+
21+
```js app.js focus=3:10
22+
const { lorem, ipsum } = dolor({
23+
sit: {
24+
amet: 1,
25+
consectetur: 2,
26+
adipiscing: (elit) => ({
27+
sed: elit,
28+
}),
29+
eiusmod: (tempor) => ({
30+
incididunt: tempor,
31+
}),
32+
ut: (labore) => ({
33+
et: labore,
34+
dolore: labore + 1,
35+
}),
36+
magna: (aliqua) => ({
37+
ut: aliqua,
38+
}),
39+
nostrud: (elit) => ({
40+
exercitation: elit,
41+
ullamco: elit,
42+
}),
43+
laboris: (elit) => ({
44+
nisi: elit,
45+
}),
46+
},
47+
})
48+
```
49+
50+
---
51+
52+
## Step 2
53+
54+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
55+
56+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
57+
58+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
59+
60+
Morbi quis commodo.
61+
62+
```js app.js focus=11:17
63+
64+
```
65+
66+
---
67+
68+
## Step 3
69+
70+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
71+
72+
- Nisi lacus sed viverra tellus in
73+
- Nibh cras pulvinar mattis nunc sed
74+
- Luctus accumsan tortor posuere ac
75+
76+
Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
77+
78+
```js app.js focus=11:14
79+
const { lorem, ipsum } = dolor({
80+
sit: {
81+
amet: 1,
82+
consectetur: 2,
83+
adipiscing: (elit) => ({
84+
sed: elit,
85+
}),
86+
eiusmod: (tempor) => ({
87+
incididunt: tempor,
88+
}),
89+
ut: (labore) => ({
90+
et: lorem(labore * ipsum),
91+
dolore: lorem(labore + 1),
92+
}),
93+
nostrud: (elit) => ({
94+
exercitation: elit,
95+
ullamco: elit,
96+
}),
97+
laboris: (elit) => ({
98+
nisi: elit,
99+
}),
100+
},
101+
})
102+
```
103+
104+
---
105+
106+
## Step 4
107+
108+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
109+
110+
Sed blandit libero volutpat sed cras.
111+
112+
- Nisi lacus sed viverra tellus in
113+
- Nibh cras pulvinar mattis nunc sed
114+
115+
Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
116+
117+
```js app.js focus=15:21
118+
119+
```
120+
121+
---
122+
123+
## Step 5
124+
125+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
126+
127+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
128+
129+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
130+
131+
Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
132+
133+
- Fringilla ut morbi tincidunt augue interdum velit euismod.
134+
- Luctus accumsan tortor posuere ac ut consequat semper viverra.
135+
136+
Morbi quis commodo.
137+
138+
```js app.js
139+
140+
```
141+
142+
</CH.Scrollycoding>
143+
144+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
145+
146+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
147+
148+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

‎examples/mdx-bundler/src/posts.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import fs from "fs"
2+
import path from "path"
3+
import { remarkCodeHike } from "@code-hike/mdx"
4+
import theme from "shiki/themes/material-palenight.json"
5+
import { bundleMDX } from "mdx-bundler"
6+
7+
const POSTS_PATH = path.join(process.cwd(), "posts")
8+
9+
export function getPostNames() {
10+
return fs
11+
.readdirSync(POSTS_PATH)
12+
.filter((path) => /\.mdx?$/.test(path))
13+
.map((fileName) => {
14+
const postName = fileName.replace(/\.mdx?$/, "")
15+
return postName
16+
})
17+
}
18+
19+
export async function getPostSource(postName) {
20+
// can be from a local file, database, anywhere
21+
const source = fs.readFileSync(`posts/${postName}.mdx`, "utf-8")
22+
23+
// https://github.com/kentcdodds/mdx-bundler#nextjs-esbuild-enoent
24+
if (process.platform === "win32") {
25+
process.env.ESBUILD_BINARY_PATH = path.join(
26+
process.cwd(),
27+
"node_modules",
28+
"esbuild",
29+
"esbuild.exe"
30+
)
31+
} else {
32+
process.env.ESBUILD_BINARY_PATH = path.join(
33+
process.cwd(),
34+
"node_modules",
35+
"esbuild",
36+
"bin",
37+
"esbuild"
38+
)
39+
}
40+
41+
const { code } = await bundleMDX({
42+
source,
43+
files: {},
44+
mdxOptions(options) {
45+
options.remarkPlugins = [
46+
...(options.remarkPlugins ?? []),
47+
[remarkCodeHike, { theme }],
48+
]
49+
return options
50+
},
51+
})
52+
53+
return code
54+
}

‎yarn.lock‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15964,6 +15964,21 @@ mdx-bundler@^9.0.1:
1596415964
remark-mdx-frontmatter "^1.1.1"
1596515965
uuid "^8.3.2"
1596615966

15967+
mdx-bundler@^9.2.1:
15968+
version "9.2.1"
15969+
resolved "https://registry.yarnpkg.com/mdx-bundler/-/mdx-bundler-9.2.1.tgz#917dbd986ac3e7f7f14ac635c2dfc224eafdd42d"
15970+
integrity sha512-hWEEip1KU9MCNqeH2rqwzAZ1pdqPPbfkx9OTJjADqGPQz4t9BO85fhI7AP9gVYrpmfArf9/xJZUN0yBErg/G/Q==
15971+
dependencies:
15972+
"@babel/runtime" "^7.16.3"
15973+
"@esbuild-plugins/node-resolve" "^0.1.4"
15974+
"@fal-works/esbuild-plugin-global-externals" "^2.1.2"
15975+
"@mdx-js/esbuild" "^2.0.0"
15976+
gray-matter "^4.0.3"
15977+
remark-frontmatter "^4.0.1"
15978+
remark-mdx-frontmatter "^1.1.1"
15979+
uuid "^8.3.2"
15980+
vfile "^5.3.2"
15981+
1596715982
mdx-debugger@^0.2.0:
1596815983
version "0.2.0"
1596915984
resolved "https://registry.yarnpkg.com/mdx-debugger/-/mdx-debugger-0.2.0.tgz#c441bdc9790731774d837374d3acda01cc6f5e86"

0 commit comments

Comments
 (0)