Skip to content

Commit 39b6a82

Browse files
pomberpomber
authored
Merge pull request #185 from code-hike/playground
Playground
2 parents b7d7da7 + 8939e5f commit 39b6a82

File tree

16 files changed

+757
-3
lines changed

16 files changed

+757
-3
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"packages": [
55
"packages/mdx",
66
"examples/*",
7+
"playground",
78
"site"
89
]
910
},

‎packages/mdx/src/remark/transform.preview.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import fetch from "node-fetch"
21
import { visitAsync, toJSX } from "./unist-utils"
32
import { JsxNode, SuperNode } from "./nodes"
43

@@ -14,6 +13,7 @@ export async function getPresetConfig(
1413
const prefix = "https://codesandbox.io/s/"
1514
const csbid = url.slice(prefix.length)
1615
const configUrl = `https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack`
16+
const { default: fetch } = await import("node-fetch")
1717
const res = await fetch(configUrl)
1818
return await res.json()
1919
}

‎playground/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
27+
# Contentlayer
28+
.contentlayer

‎playground/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
6+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
7+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
8+
<meta
9+
property="description"
10+
content="Try Code Hike directly in your browser"
11+
/>
12+
<meta property="og:title" content="Code Hike Playground" />
13+
<meta
14+
property="og:description"
15+
content="Try Code Hike directly in your browser"
16+
/>
17+
<meta name="twitter:site" content="@codehike_" />
18+
<!-- <meta name="twitter:card" content="summary_large_image" />
19+
<meta name="image" content="{imageUrl}" />
20+
<meta itemprop="image" content="{imageUrl}" />
21+
<meta name="twitter:image" content="{imageUrl}" />
22+
<meta property="og:image" content="{imageUrl}" /> -->
23+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
24+
<title>Code Hike Playground</title>
25+
</head>
26+
<body>
27+
<div id="root"></div>
28+
<script type="module" src="/src/main.jsx"></script>
29+
</body>
30+
</html>

‎playground/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "playground",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@code-hike/mdx": "^0.5.1",
12+
"@mdx-js/mdx": "^2.1.1",
13+
"@monaco-editor/react": "^4.4.5",
14+
"react": "^17.0.2",
15+
"react-dom": "^17.0.2",
16+
"react-error-boundary": "^3.1.4"
17+
},
18+
"devDependencies": {
19+
"@types/react": "^17.0.2",
20+
"@types/react-dom": "^17.0.2",
21+
"@vitejs/plugin-react": "^1.3.0",
22+
"vite": "^2.9.9"
23+
}
24+
}

‎playground/src/app.jsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useState } from "react";
2+
import { Editor } from "./editor";
3+
import { Preview } from "./preview";
4+
5+
const defaultCode = `
6+
# Hello
7+
8+
Edit me.
9+
10+
~~~python hello.py
11+
# mark[16:24]
12+
print("This is Code Hike")
13+
~~~
14+
15+
`;
16+
17+
function App() {
18+
const [code, setCode] = useState(defaultCode);
19+
20+
return (
21+
<div className="app">
22+
<header>
23+
<a className="code-hike" href="https://codehike.org">
24+
<CodeHikeLogo />
25+
<h1>
26+
Code Hike
27+
<span>v0.5.1</span>
28+
</h1>
29+
</a>
30+
</header>
31+
<main>
32+
<Editor setCode={setCode} defaultCode={defaultCode} />
33+
<Preview code={code} />
34+
</main>
35+
</div>
36+
);
37+
}
38+
39+
function CodeHikeLogo(props) {
40+
return (
41+
<svg viewBox="-100 -100 200 200" fill="currentColor" {...props}>
42+
<path d="M 70 60 L 42 -27 L 72 -27 L 100 60 Z" />
43+
<path d="M 20.419540229885058 40.05357142857142 L 42 -27 L 72 -27 L 50.41954022988506 40.05357142857142 Z" />
44+
<path d="M 20.419540229885058 40.05357142857142 L -15 -70 L 15 -70 L 50.41954022988506 40.05357142857142 Z" />
45+
<path d="M -50.41954022988506 40.05357142857142 L -15 -70 L 15 -70 L -20.419540229885058 40.05357142857142 Z" />
46+
<path d="M -50.41954022988506 40.05357142857142 L -72 -27 L -42 -27 L -20.419540229885058 40.05357142857142 Z" />
47+
<path d="M -100 60 L -72 -27 L -42 -27 L -70 60 Z" />
48+
</svg>
49+
);
50+
}
51+
52+
export default App;

‎playground/src/editor.jsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import MonacoEditor from "@monaco-editor/react";
2+
import { useState } from "react";
3+
4+
export function Editor({ setCode, defaultCode }) {
5+
function handleEditorChange(value, event) {
6+
setCode(value);
7+
}
8+
9+
const [tab, setTab] = useState("mdx");
10+
return (
11+
<div className="editor-side">
12+
<nav>
13+
<span
14+
className="editor-tab"
15+
data-active={tab === "mdx"}
16+
onClick={() => setTab("mdx")}
17+
>
18+
MDX
19+
</span>
20+
<span
21+
className="editor-tab"
22+
data-active={tab === "css"}
23+
onClick={() => setTab("css")}
24+
>
25+
CSS
26+
</span>
27+
<span
28+
className="editor-tab"
29+
data-active={tab === "config"}
30+
onClick={() => setTab("config")}
31+
>
32+
Config
33+
</span>
34+
</nav>
35+
<MonacoEditor
36+
className="editor"
37+
onChange={handleEditorChange}
38+
defaultLanguage="markdown"
39+
theme="vs-dark"
40+
defaultValue={defaultCode}
41+
options={{
42+
// https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html
43+
minimap: {
44+
enabled: false,
45+
},
46+
lineNumbers: "off",
47+
scrollBeyondLastLine: false,
48+
hideCursorInOverviewRuler: true,
49+
matchBrackets: false,
50+
overviewRulerBorder: false,
51+
renderLineHighlight: "none",
52+
wordWrap: "on",
53+
tabSize: 2,
54+
}}
55+
/>
56+
</div>
57+
);
58+
}

‎playground/src/favicon-16x16.png

602 Bytes
Loading

‎playground/src/favicon-32x32.png

1.25 KB
Loading

‎playground/src/favicon.ico

15 KB
Binary file not shown.

0 commit comments

Comments
 (0)