Skip to content

Commit ab8463e

Browse files
pomberpomber
committed
Add themes test
1 parent cab7a07 commit ab8463e

File tree

8 files changed

+235
-146
lines changed

8 files changed

+235
-146
lines changed

‎packages/mdx/dev/files.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import fs from "fs"
22
import { remarkCodeHike } from "../src/index"
33
import { compile } from "@mdx-js/mdx"
4-
import theme from "shiki/themes/slack-ochin.json"
4+
import theme from "shiki/themes/github-light.json"
55
import { withDebugger } from "mdx-debugger"
66

77
export async function getFiles() {
@@ -19,7 +19,7 @@ export async function getContent(filename: string) {
1919
return file
2020
}
2121

22-
export async function getCode(file: string) {
22+
export async function getCode(file: string, config = {}) {
2323
let debugLink = ""
2424

2525
const debugCompile = withDebugger(compile, {
@@ -32,7 +32,10 @@ export async function getCode(file: string) {
3232
await debugCompile(file, {
3333
outputFormat: "function-body",
3434
remarkPlugins: [
35-
[remarkCodeHike, { autoImport: false, theme }],
35+
[
36+
remarkCodeHike,
37+
{ autoImport: false, theme, ...config },
38+
],
3639
],
3740
})
3841
)

‎packages/mdx/dev/layout.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import Link from "next/link"
2+
import Head from "next/head"
3+
4+
const extraItems = ["themes"]
5+
6+
export function Layout({
7+
children,
8+
current,
9+
contentFileNames,
10+
style = {},
11+
}) {
12+
return (
13+
<div
14+
style={{
15+
display: "flex",
16+
flexDirection: "row",
17+
gap: 8,
18+
margin: "8px",
19+
}}
20+
>
21+
<Head>
22+
<title>Code Hike Test - {current}</title>
23+
</Head>
24+
<Sidebar
25+
contentFileNames={contentFileNames}
26+
current={current}
27+
/>
28+
29+
<div
30+
style={{
31+
maxWidth: 900,
32+
minWidth: 600,
33+
background: "#fafafa",
34+
borderRadius: 4,
35+
padding: 16,
36+
position: "relative",
37+
...style,
38+
}}
39+
>
40+
{children}
41+
</div>
42+
</div>
43+
)
44+
}
45+
46+
function Sidebar({ contentFileNames, current }) {
47+
const items = contentFileNames.concat(extraItems)
48+
return (
49+
<nav
50+
style={{
51+
background: "#fafafa",
52+
borderRadius: 4,
53+
padding: "16px 0",
54+
minWidth: 180,
55+
}}
56+
>
57+
<ul style={{ margin: 0, padding: 0 }}>
58+
{items.map(item => (
59+
<li
60+
key={item}
61+
style={{ listStyle: "none" }}
62+
className="sidebar-link"
63+
data-active={item === current}
64+
>
65+
<Link href={`/${encodeURIComponent(item)}`}>
66+
<a>{item}</a>
67+
</Link>
68+
</li>
69+
))}
70+
</ul>
71+
</nav>
72+
)
73+
}

‎packages/mdx/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"@types/node-fetch": "^2.6.1",
6060
"@types/react": "^17.0.39",
6161
"autoprefixer": "^9.8.2",
62+
"click-to-react-component": "^1.0.8",
6263
"cssnano": "^4.1.10",
6364
"diff": "^4.0.2",
6465
"esbuild": "^0.13.2",

‎packages/mdx/pages/[name].tsx‎

Lines changed: 4 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { runSync } from "@mdx-js/mdx"
22
import * as runtime from "react/jsx-runtime.js"
33
import { CH } from "../src/components"
4-
import Link from "next/link"
54
import { getCode, getContent, getFiles } from "../dev/files"
6-
import Head from "next/head"
5+
import { ClickToComponent } from "click-to-react-component"
6+
import { Layout } from "../dev/layout"
77

88
export async function getStaticPaths() {
99
const files = await getFiles()
@@ -37,63 +37,7 @@ export default function Page({
3737
}) {
3838
const { default: Content } = runSync(code, runtime)
3939
return (
40-
<div
41-
style={{
42-
display: "flex",
43-
flexDirection: "row",
44-
gap: 8,
45-
margin: "8px",
46-
}}
47-
>
48-
<Head>
49-
<title>Code Hike Test - {current}</title>
50-
</Head>
51-
<Sidebar tests={tests} current={current} />
52-
<Result Content={Content} debugLink={debugLink} />
53-
</div>
54-
)
55-
}
56-
57-
function Sidebar({ tests, current }) {
58-
return (
59-
<nav
60-
style={{
61-
background: "#fafafa",
62-
borderRadius: 4,
63-
padding: "16px 0",
64-
minWidth: 180,
65-
}}
66-
>
67-
<ul style={{ margin: 0, padding: 0 }}>
68-
{tests.map(test => (
69-
<li
70-
key={test}
71-
style={{ listStyle: "none" }}
72-
className="sidebar-link"
73-
data-active={test === current}
74-
>
75-
<Link href={`/${encodeURIComponent(test)}`}>
76-
<a>{test}</a>
77-
</Link>
78-
</li>
79-
))}
80-
</ul>
81-
</nav>
82-
)
83-
}
84-
85-
function Result({ Content, debugLink }) {
86-
return (
87-
<div
88-
style={{
89-
maxWidth: 900,
90-
minWidth: 600,
91-
background: "#fafafa",
92-
borderRadius: 4,
93-
padding: 16,
94-
position: "relative",
95-
}}
96-
>
40+
<Layout current={current} contentFileNames={tests}>
9741
<a
9842
href={debugLink}
9943
target="_blank"
@@ -107,6 +51,6 @@ function Result({ Content, debugLink }) {
10751
Debug
10852
</a>
10953
<Content components={{ CH }} />
110-
</div>
54+
</Layout>
11155
)
11256
}

‎packages/mdx/pages/compile.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎packages/mdx/pages/evaluate.tsx‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎packages/mdx/pages/themes.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { BUNDLED_THEMES } from "shiki"
2+
import { getCode, getFiles } from "../dev/files"
3+
import * as runtime from "react/jsx-runtime.js"
4+
import { runSync } from "@mdx-js/mdx"
5+
import { CH } from "../src/components"
6+
import { Layout } from "../dev/layout"
7+
8+
const mdx = `
9+
10+
<CH.Code>
11+
~~~js foo.js
12+
function foo(x = 1) {
13+
return "bar"
14+
}
15+
~~~
16+
---
17+
~~~css foo.css
18+
body {
19+
height: 32px;
20+
}
21+
~~~
22+
</CH.Code>
23+
24+
~~~py
25+
def foo(x = 1):
26+
return "bar"
27+
~~~
28+
`
29+
30+
export async function getStaticProps() {
31+
const files = await getFiles()
32+
const promises = BUNDLED_THEMES.filter(
33+
x => x !== "css-variables"
34+
).map(async themeName => {
35+
const theme = (
36+
await import(`shiki/themes/${themeName}.json`)
37+
).default
38+
const { code } = await getCode(mdx, {
39+
theme,
40+
lineNumbers: true,
41+
})
42+
return { themeName, code }
43+
})
44+
45+
const codes = await Promise.all(promises)
46+
47+
return {
48+
props: {
49+
tests: files,
50+
codes,
51+
},
52+
}
53+
}
54+
55+
export default function Page({ codes, tests }) {
56+
const components = codes.map(({ code }) => {
57+
return runSync(code, runtime).default
58+
})
59+
return (
60+
<Layout
61+
current={"test"}
62+
contentFileNames={tests}
63+
style={{ width: "100%", maxWidth: undefined }}
64+
>
65+
<div
66+
style={{
67+
background: "white",
68+
margin: 8,
69+
display: "grid",
70+
columnGap: 8,
71+
gridTemplateColumns:
72+
"repeat(auto-fit, minmax(300px, 1fr))",
73+
}}
74+
>
75+
{components.map((Content, i) => (
76+
<div key={i}>
77+
<h3>{codes[i].themeName}</h3>
78+
<Content components={{ CH }} />
79+
</div>
80+
))}
81+
</div>
82+
</Layout>
83+
)
84+
}

0 commit comments

Comments
 (0)