Merge pull request #172 from code-hike/copy-button

Copy button component
code-hike · May 5, 2022 · 4baae11 · 4baae11
2 parents 2d20cfd + d21f95c
commit 4baae11
Show file tree

Hide file tree

Showing 20 changed files with 515 additions and 261 deletions.
diff --git a/packages/mdx/dev/content/comment-annotations.mdx b/packages/mdx/dev/content/comment-annotations.mdx
@@ -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)
+}
+```
diff --git a/packages/mdx/dev/content/copy-button.mdx b/packages/mdx/dev/content/copy-button.mdx
@@ -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>
diff --git a/packages/mdx/dev/files.ts b/packages/mdx/dev/files.ts
@@ -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() {
@@ -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, {
@@ -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,
+          },
+        ],
       ],
     })
   )

diff --git a/packages/mdx/dev/layout.tsx b/packages/mdx/dev/layout.tsx
@@ -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>
+  )
+}
diff --git a/packages/mdx/package.json b/packages/mdx/package.json
@@ -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",

diff --git a/packages/mdx/pages/[name].tsx b/packages/mdx/pages/[name].tsx
@@ -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()
@@ -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"
@@ -107,6 +51,6 @@ function Result({ Content, debugLink }) {
         Debug
       </a>
       <Content components={{ CH }} />
-    </div>
+    </Layout>
   )
 }
diff --git a/packages/mdx/pages/compile.tsx b/packages/mdx/pages/compile.tsx
diff --git a/packages/mdx/pages/evaluate.tsx b/packages/mdx/pages/evaluate.tsx