Skip to content

Commit 4baae11

Browse files
pomberpomber
authored
Merge pull request #172 from code-hike/copy-button
Copy button component
2 parents 2d20cfd + d21f95c commit 4baae11

20 files changed

Lines changed: 515 additions & 261 deletions

‎packages/mdx/dev/content/comment-annotations.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,3 +93,21 @@ function lorem(ipsum, dolor = 1) {
9393
return $sit and consectetur(ipsum) or []
9494
}
9595
```
96+
97+
With class
98+
99+
```js
100+
function lorem(ipsum, dolor = 1) {
101+
// withClass[15:19] annotation-class
102+
const sit = ipsum == null && 0
103+
// withClass(1:2) annotation-class
104+
dolor = sit - amet(dolor)
105+
return sit ? consectetur(ipsum) : []
106+
}
107+
108+
function adipiscing(...elit) {
109+
console.log("hover me")
110+
// withClass annotation-class
111+
return elit.map(ipsum => ipsum.sit)
112+
}
113+
```

‎packages/mdx/dev/content/copy-button.mdx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
one line:
2+
3+
```js
4+
const x = 2
5+
```
6+
7+
no editor:
8+
9+
```js
10+
function foo() {
11+
return 2
12+
}
13+
```
14+
15+
one file editor:
16+
17+
```js foo.js
18+
function foo() {
19+
return 2
20+
}
21+
```
22+
23+
two files:
24+
25+
<CH.Code>
26+
27+
```js foo.js
28+
function foo() {
29+
return 2
30+
}
31+
```
32+
33+
```js bar.js
34+
function bar() {
35+
return 2
36+
}
37+
```
38+
39+
</CH.Code>
40+
41+
two panels:
42+
43+
<CH.Code>
44+
45+
```js foo.js
46+
function foo() {
47+
return 2
48+
}
49+
```
50+
51+
---
52+
53+
```js bar.js
54+
function bar() {
55+
return 2
56+
}
57+
```
58+
59+
</CH.Code>

‎packages/mdx/dev/files.ts‎

Lines changed: 11 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/nord.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,15 @@ 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+
{
38+
autoImport: false,
39+
showCopyButton: true,
40+
theme,
41+
...config,
42+
},
43+
],
3644
],
3745
})
3846
)

‎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.

0 commit comments

Comments
 (0)