Skip to content

Copy button component #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 5, 2022
Merged

Copy button component #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b0b62d6
Copy button component
pomber May 3, 2022
967d59b
Add button to south panel
pomber May 4, 2022
cab7a07
Add copy feedback
pomber May 4, 2022
ab8463e
Add themes test
pomber May 4, 2022
609f211
Fix button color
pomber May 4, 2022
78042f2
Add codeblock button
pomber May 4, 2022
0b106c2
Add copy button to config
pomber May 4, 2022
d21f95c
Add withClass annotation
pomber May 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/mdx/dev/content/comment-annotations.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,21 @@ function lorem(ipsum, dolor = 1) {
return $sit and consectetur(ipsum) or []
}
```

With class

```js
function lorem(ipsum, dolor = 1) {
// withClass[15:19] annotation-class
const sit = ipsum == null && 0
// withClass(1:2) annotation-class
dolor = sit - amet(dolor)
return sit ? consectetur(ipsum) : []
}

function adipiscing(...elit) {
console.log("hover me")
// withClass annotation-class
return elit.map(ipsum => ipsum.sit)
}
```
59 changes: 59 additions & 0 deletions packages/mdx/dev/content/copy-button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
one line:

```js
const x = 2
```

no editor:

```js
function foo() {
return 2
}
```

one file editor:

```js foo.js
function foo() {
return 2
}
```

two files:

<CH.Code>

```js foo.js
function foo() {
return 2
}
```

```js bar.js
function bar() {
return 2
}
```

</CH.Code>

two panels:

<CH.Code>

```js foo.js
function foo() {
return 2
}
```

---

```js bar.js
function bar() {
return 2
}
```

</CH.Code>
14 changes: 11 additions & 3 deletions packages/mdx/dev/files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import fs from "fs"
import { remarkCodeHike } from "../src/index"
import { compile } from "@mdx-js/mdx"
import theme from "shiki/themes/nord.json"
import theme from "shiki/themes/github-light.json"
import { withDebugger } from "mdx-debugger"

export async function getFiles() {
Expand All @@ -19,7 +19,7 @@ export async function getContent(filename: string) {
return file
}

export async function getCode(file: string) {
export async function getCode(file: string, config = {}) {
let debugLink = ""

const debugCompile = withDebugger(compile, {
Expand All @@ -32,7 +32,15 @@ export async function getCode(file: string) {
await debugCompile(file, {
outputFormat: "function-body",
remarkPlugins: [
[remarkCodeHike, { autoImport: false, theme }],
[
remarkCodeHike,
{
autoImport: false,
showCopyButton: true,
theme,
...config,
},
],
],
})
)
Expand Down
73 changes: 73 additions & 0 deletions packages/mdx/dev/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import Link from "next/link"
import Head from "next/head"

const extraItems = ["themes"]

export function Layout({
children,
current,
contentFileNames,
style = {},
}) {
return (
<div
style={{
display: "flex",
flexDirection: "row",
gap: 8,
margin: "8px",
}}
>
<Head>
<title>Code Hike Test - {current}</title>
</Head>
<Sidebar
contentFileNames={contentFileNames}
current={current}
/>

<div
style={{
maxWidth: 900,
minWidth: 600,
background: "#fafafa",
borderRadius: 4,
padding: 16,
position: "relative",
...style,
}}
>
{children}
</div>
</div>
)
}

function Sidebar({ contentFileNames, current }) {
const items = contentFileNames.concat(extraItems)
return (
<nav
style={{
background: "#fafafa",
borderRadius: 4,
padding: "16px 0",
minWidth: 180,
}}
>
<ul style={{ margin: 0, padding: 0 }}>
{items.map(item => (
<li
key={item}
style={{ listStyle: "none" }}
className="sidebar-link"
data-active={item === current}
>
<Link href={`/${encodeURIComponent(item)}`}>
<a>{item}</a>
</Link>
</li>
))}
</ul>
</nav>
)
}
1 change: 1 addition & 0 deletions packages/mdx/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"@types/node-fetch": "^2.6.1",
"@types/react": "^17.0.39",
"autoprefixer": "^9.8.2",
"click-to-react-component": "^1.0.8",
"cssnano": "^4.1.10",
"diff": "^4.0.2",
"esbuild": "^0.13.2",
Expand Down
64 changes: 4 additions & 60 deletions packages/mdx/pages/[name].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { runSync } from "@mdx-js/mdx"
import * as runtime from "react/jsx-runtime.js"
import { CH } from "../src/components"
import Link from "next/link"
import { getCode, getContent, getFiles } from "../dev/files"
import Head from "next/head"
import { ClickToComponent } from "click-to-react-component"
import { Layout } from "../dev/layout"

export async function getStaticPaths() {
const files = await getFiles()
Expand Down Expand Up @@ -37,63 +37,7 @@ export default function Page({
}) {
const { default: Content } = runSync(code, runtime)
return (
<div
style={{
display: "flex",
flexDirection: "row",
gap: 8,
margin: "8px",
}}
>
<Head>
<title>Code Hike Test - {current}</title>
</Head>
<Sidebar tests={tests} current={current} />
<Result Content={Content} debugLink={debugLink} />
</div>
)
}

function Sidebar({ tests, current }) {
return (
<nav
style={{
background: "#fafafa",
borderRadius: 4,
padding: "16px 0",
minWidth: 180,
}}
>
<ul style={{ margin: 0, padding: 0 }}>
{tests.map(test => (
<li
key={test}
style={{ listStyle: "none" }}
className="sidebar-link"
data-active={test === current}
>
<Link href={`/${encodeURIComponent(test)}`}>
<a>{test}</a>
</Link>
</li>
))}
</ul>
</nav>
)
}

function Result({ Content, debugLink }) {
return (
<div
style={{
maxWidth: 900,
minWidth: 600,
background: "#fafafa",
borderRadius: 4,
padding: 16,
position: "relative",
}}
>
<Layout current={current} contentFileNames={tests}>
<a
href={debugLink}
target="_blank"
Expand All @@ -107,6 +51,6 @@ function Result({ Content, debugLink }) {
Debug
</a>
<Content components={{ CH }} />
</div>
</Layout>
)
}
37 changes: 0 additions & 37 deletions packages/mdx/pages/compile.tsx
View file
Open in desktop

This file was deleted.

45 changes: 0 additions & 45 deletions packages/mdx/pages/evaluate.tsx
View file
Open in desktop

This file was deleted.

Loading