code-hike · pomber · May 21, 2022 · May 20, 2022 · May 20, 2022 · May 21, 2022
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
     "packages": [
       "packages/mdx",
       "examples/*",
+      "playground",
       "site"
     ]
   },

diff --git a/packages/mdx/src/remark/transform.preview.ts b/packages/mdx/src/remark/transform.preview.ts
@@ -1,4 +1,3 @@
-import fetch from "node-fetch"
 import { visitAsync, toJSX } from "./unist-utils"
 import { JsxNode, SuperNode } from "./nodes"
 
@@ -14,6 +13,7 @@ export async function getPresetConfig(
   const prefix = "https://codesandbox.io/s/"
   const csbid = url.slice(prefix.length)
   const configUrl = `https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack`
+  const { default: fetch } = await import("node-fetch")
   const res = await fetch(configUrl)
   return await res.json()
 }

diff --git a/playground/.gitignore b/playground/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+# Contentlayer
+.contentlayer
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <meta
+      property="description"
+      content="Try Code Hike directly in your browser"
+    />
+    <meta property="og:title" content="Code Hike Playground" />
+    <meta
+      property="og:description"
+      content="Try Code Hike directly in your browser"
+    />
+    <meta name="twitter:site" content="@codehike_" />
+    <!-- <meta name="twitter:card" content="summary_large_image" />
+    <meta name="image" content="{imageUrl}" />
+    <meta itemprop="image" content="{imageUrl}" />
+    <meta name="twitter:image" content="{imageUrl}" />
+    <meta property="og:image" content="{imageUrl}" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Hike Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@code-hike/mdx": "^0.5.1",
+    "@mdx-js/mdx": "^2.1.1",
+    "@monaco-editor/react": "^4.4.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^1.3.0",
+    "vite": "^2.9.9"
+  }
+}
diff --git a/playground/src/app.jsx b/playground/src/app.jsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Editor } from "./editor";
+import { Preview } from "./preview";
+
+const defaultCode = `
+# Hello
+
+Edit me.
+
+~~~python hello.py
+# mark[16:24]
+print("This is Code Hike")
+~~~
+
+`;
+
+function App() {
+  const [code, setCode] = useState(defaultCode);
+
+  return (
+    <div className="app">
+      <header>
+        <a className="code-hike" href="https://codehike.org">
+          <CodeHikeLogo />
+          <h1>
+            Code Hike
+            <span>v0.5.1</span>
+          </h1>
+        </a>
+      </header>
+      <main>
+        <Editor setCode={setCode} defaultCode={defaultCode} />
+        <Preview code={code} />
+      </main>
+    </div>
+  );
+}
+
+function CodeHikeLogo(props) {
+  return (
+    <svg viewBox="-100 -100 200 200" fill="currentColor" {...props}>
+      <path d="M 70 60 L 42 -27 L 72 -27 L 100 60 Z" />
+      <path d="M 20.419540229885058 40.05357142857142 L 42 -27 L 72 -27 L 50.41954022988506 40.05357142857142 Z" />
+      <path d="M 20.419540229885058 40.05357142857142 L -15 -70 L 15 -70 L 50.41954022988506 40.05357142857142 Z" />
+      <path d="M -50.41954022988506 40.05357142857142 L -15 -70 L 15 -70 L -20.419540229885058 40.05357142857142 Z" />
+      <path d="M -50.41954022988506 40.05357142857142 L -72 -27 L -42 -27 L -20.419540229885058 40.05357142857142 Z" />
+      <path d="M -100 60 L -72 -27 L -42 -27 L -70 60 Z" />
+    </svg>
+  );
+}
+
+export default App;
diff --git a/playground/src/editor.jsx b/playground/src/editor.jsx
@@ -0,0 +1,58 @@
+import MonacoEditor from "@monaco-editor/react";
+import { useState } from "react";
+
+export function Editor({ setCode, defaultCode }) {
+  function handleEditorChange(value, event) {
+    setCode(value);
+  }
+
+  const [tab, setTab] = useState("mdx");
+  return (
+    <div className="editor-side">
+      <nav>
+        <span
+          className="editor-tab"
+          data-active={tab === "mdx"}
+          onClick={() => setTab("mdx")}
+        >
+          MDX
+        </span>
+        <span
+          className="editor-tab"
+          data-active={tab === "css"}
+          onClick={() => setTab("css")}
+        >
+          CSS
+        </span>
+        <span
+          className="editor-tab"
+          data-active={tab === "config"}
+          onClick={() => setTab("config")}
+        >
+          Config
+        </span>
+      </nav>
+      <MonacoEditor
+        className="editor"
+        onChange={handleEditorChange}
+        defaultLanguage="markdown"
+        theme="vs-dark"
+        defaultValue={defaultCode}
+        options={{
+          // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html
+          minimap: {
+            enabled: false,
+          },
+          lineNumbers: "off",
+          scrollBeyondLastLine: false,
+          hideCursorInOverviewRuler: true,
+          matchBrackets: false,
+          overviewRulerBorder: false,
+          renderLineHighlight: "none",
+          wordWrap: "on",
+          tabSize: 2,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/playground/src/favicon-16x16.png b/playground/src/favicon-16x16.png
diff --git a/playground/src/favicon-32x32.png b/playground/src/favicon-32x32.png
diff --git a/playground/src/favicon.ico b/playground/src/favicon.ico
diff --git a/playground/src/favicon.svg b/playground/src/favicon.svg
diff --git a/playground/src/index.css b/playground/src/index.css
@@ -0,0 +1,119 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background-color: #111;
+  color: #fafafa;
+  height: 3.2rem;
+  min-height: 3.2rem;
+  border-bottom: 1px solid #444;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+
+header h1 span {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-left: 0.5rem;
+}
+
+header a.code-hike {
+  color: inherit;
+  text-decoration: inherit;
+  display: flex;
+  margin-left: 1.5rem;
+  gap: 0.5rem;
+}
+
+header svg {
+  width: 2rem;
+  height: 2rem;
+  display: block;
+  color: rgb(96 165 250);
+}
+main {
+  display: flex;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.editor-side {
+  min-width: 400px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  /* background-color: #222;
+  color: white; */
+}
+
+.editor-side nav {
+  background-color: #111;
+  color: #fafafa;
+  height: 2rem;
+  min-height: 2rem;
+  border-bottom: 1px solid #444;
+  display: flex;
+  align-items: center;
+  padding: 0 0.6rem 0 1.5rem;
+  gap: 1rem;
+  font-weight: 600;
+}
+
+.editor-tab {
+  cursor: pointer;
+  height: 100%;
+  z-index: 1;
+  box-sizing: border-box;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.editor-tab[data-active="true"] {
+  color: rgb(96 165 250);
+  border-bottom: 3px solid;
+  padding-bottom: 0px;
+}
+
+.editor-tab:hover {
+  color: rgb(179, 209, 245);
+}
+.preview {
+  min-width: 600px;
+  border-left: 2px solid cadetblue;
+  padding: 1em;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.preview-error {
+  border: 1px solid red;
+}
diff --git a/playground/src/main.jsx b/playground/src/main.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./app";
+import "./index.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);