Skip to content

Commit bf93a4e

Browse files
pomberpomber
committed
Mostly styles
1 parent 32ce7f9 commit bf93a4e

7 files changed

Lines changed: 168 additions & 32 deletions

File tree

‎playground/index.html‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,26 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
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}" /> -->
623
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite App</title>
24+
<title>Code Hike Playground</title>
825
</head>
926
<body>
1027
<div id="root"></div>

‎playground/src/app.jsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Editor from "@monaco-editor/react";
21
import { useState } from "react";
2+
import { Editor } from "./editor";
33
import { Preview } from "./preview";
44

55
const defaultCode = `
@@ -19,41 +19,41 @@ print "Hello, world!";
1919

2020
function App() {
2121
const [code, setCode] = useState(defaultCode);
22-
function handleEditorChange(value, event) {
23-
setCode(value);
24-
}
2522

2623
return (
2724
<div className="app">
2825
<header>
29-
<h1>Code Hike</h1> v0.5.1
26+
<a
27+
className="flex items-center gap-2 mr-auto 2cols:ml-6"
28+
href="https://codehike.org"
29+
>
30+
<CodeHikeLogo />
31+
<h1>
32+
Code Hike
33+
<span>v0.5.1</span>
34+
</h1>
35+
</a>
36+
<a>Docs</a>
3037
</header>
3138
<main>
32-
<Editor
33-
className="editor"
34-
onChange={handleEditorChange}
35-
defaultLanguage="markdown"
36-
theme="vs-dark"
37-
defaultValue={defaultCode}
38-
options={{
39-
// https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html
40-
minimap: {
41-
enabled: false,
42-
},
43-
lineNumbers: "off",
44-
scrollBeyondLastLine: false,
45-
hideCursorInOverviewRuler: true,
46-
matchBrackets: false,
47-
overviewRulerBorder: false,
48-
renderLineHighlight: "none",
49-
wordWrap: "on",
50-
tabSize: 2,
51-
}}
52-
/>
39+
<Editor setCode={setCode} defaultCode={defaultCode} />
5340
<Preview code={code} />
5441
</main>
5542
</div>
5643
);
5744
}
5845

46+
function CodeHikeLogo(props) {
47+
return (
48+
<svg viewBox="-100 -100 200 200" fill="currentColor" {...props}>
49+
<path d="M 70 60 L 42 -27 L 72 -27 L 100 60 Z" />
50+
<path d="M 20.419540229885058 40.05357142857142 L 42 -27 L 72 -27 L 50.41954022988506 40.05357142857142 Z" />
51+
<path d="M 20.419540229885058 40.05357142857142 L -15 -70 L 15 -70 L 50.41954022988506 40.05357142857142 Z" />
52+
<path d="M -50.41954022988506 40.05357142857142 L -15 -70 L 15 -70 L -20.419540229885058 40.05357142857142 Z" />
53+
<path d="M -50.41954022988506 40.05357142857142 L -72 -27 L -42 -27 L -20.419540229885058 40.05357142857142 Z" />
54+
<path d="M -100 60 L -72 -27 L -42 -27 L -70 60 Z" />
55+
</svg>
56+
);
57+
}
58+
5959
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.

‎playground/src/index.css‎

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,95 @@ body,
1919
width: 100%;
2020
height: 100%;
2121
}
22+
2223
header {
23-
background-color: cadetblue;
2424
display: flex;
25-
align-items: baseline;
25+
align-items: center;
2626
gap: 0.4rem;
27-
padding: 0 1rem;
27+
background-color: #111;
28+
color: #fafafa;
29+
height: 3.2rem;
30+
border-bottom: 1px solid #444;
2831
}
2932

3033
header h1 {
3134
margin: 0;
35+
font-size: 1.5rem;
36+
line-height: 2rem;
37+
font-weight: 700;
38+
}
39+
40+
header h1 span {
41+
font-weight: 400;
42+
font-size: 0.875rem;
43+
line-height: 1.25rem;
44+
padding-left: 0.5rem;
3245
}
3346

47+
header a {
48+
color: inherit;
49+
text-decoration: inherit;
50+
display: flex;
51+
margin-left: 1.5rem;
52+
gap: 0.5rem;
53+
}
54+
55+
header svg {
56+
width: 2rem;
57+
height: 2rem;
58+
display: block;
59+
color: rgb(96 165 250);
60+
}
3461
main {
3562
display: flex;
3663
flex: 1 1 auto;
3764
overflow: hidden;
3865
}
3966

40-
.editor {
67+
.editor-side {
4168
min-width: 400px;
69+
display: flex;
70+
flex-direction: column;
71+
flex: 1;
4272
/* background-color: #222;
4373
color: white; */
4474
}
4575

76+
.editor-side nav {
77+
background-color: #111;
78+
color: #fafafa;
79+
height: 2rem;
80+
border-bottom: 1px solid #444;
81+
display: flex;
82+
align-items: center;
83+
padding: 0 0.6rem 0 1.5rem;
84+
gap: 1rem;
85+
font-weight: 600;
86+
}
87+
88+
.editor-tab {
89+
cursor: pointer;
90+
height: 100%;
91+
z-index: 1;
92+
box-sizing: border-box;
93+
padding-top: 3px;
94+
padding-bottom: 3px;
95+
}
96+
97+
.editor-tab[data-active="true"] {
98+
color: rgb(96 165 250);
99+
border-bottom: 3px solid;
100+
padding-bottom: 0px;
101+
}
102+
103+
.editor-tab:hover {
104+
color: rgb(179, 209, 245);
105+
}
46106
.preview {
47107
min-width: 600px;
48108
border-left: 2px solid cadetblue;
49109
padding: 1em;
110+
flex: 1;
50111
}
51112

52113
.preview-error {

0 commit comments

Comments
 (0)