Skip to content

Commit ca1fbff

Browse files
ZhincoreZhincore
committed
Editor with linter
1 parent b8fb28b commit ca1fbff

17 files changed

+427
-153
lines changed

‎web/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11+
<noscript>DebugGuide requires JavaScript enabled to work!</noscript>
1112
<script type="module" src="/src/index.tsx"></script>
1213
</body>
1314
</html>

‎web/package.json

+11-3
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,22 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"devalue": "^5.1.1",
13-
"solid-js": "^1.9.3",
12+
"@codemirror/commands": "^6.8.0",
13+
"@codemirror/lang-yaml": "^6.1.2",
14+
"@codemirror/language": "^6.10.8",
15+
"@codemirror/lint": "^6.8.4",
16+
"@codemirror/state": "^6.5.1",
17+
"@codemirror/theme-one-dark": "github:codemirror/theme-one-dark",
18+
"@codemirror/view": "^6.36.2",
19+
"codemirror": "^6.0.1",
20+
"solid-js": "^1.9.4",
1421
"solid-markdown": "2.0.1",
1522
"yaml": "^2.7.0"
1623
},
1724
"devDependencies": {
1825
"@types/node": "^22.10.5",
19-
"typescript": "~5.7.2",
26+
"devalue": "^5.1.1",
27+
"typescript": "^5.7.3",
2028
"vite": "^6.0.7",
2129
"vite-plugin-solid": "^2.11.0"
2230
}

‎web/src/App.tsx

+15-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { createSignal } from "solid-js";
2-
import { Guide } from "./Guide";
3-
import { doClickActionState } from "./lib/action";
4-
import { CONTENT } from "./lib/content";
1+
import { Guide } from "./modes/guide/Guide";
2+
import { CONTENT } from "$lib/content";
3+
import { lazy, Match, Suspense, Switch } from "solid-js";
54

6-
interface AppState {
7-
stepHistory: string[];
8-
}
5+
const Editor = lazy(() =>
6+
import("./modes/editor/Editor").then((m) => ({ default: m.Editor }))
7+
);
98

109
export function App() {
11-
const initialStep = window.location.hash.slice(1) || "start";
12-
13-
const [state, setState] = createSignal<AppState>({
14-
stepHistory: [initialStep],
15-
});
10+
const editorMode = window.location.search.slice(1) == "editor";
11+
const initialStep = window.location.hash.slice(1);
1612

1713
return (
18-
<Guide
19-
content={CONTENT}
20-
stepHistory={state().stepHistory}
21-
onAction={(step) => setState(doClickActionState(state(), { step }))}
22-
/>
14+
<Switch fallback={<Guide content={CONTENT} initialStep={initialStep} />}>
15+
<Match when={editorMode}>
16+
<Suspense fallback={<p>Loading...</p>}>
17+
<Editor />
18+
</Suspense>
19+
</Match>
20+
</Switch>
2321
);
2422
}

‎web/src/Guide.tsx

-34
This file was deleted.

‎web/src/Button.tsx renamed to ‎web/src/components/Button.tsx

File renamed without changes.

‎web/src/index.css

+67-62
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,81 @@
1-
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
1+
@layer base {
2+
:root {
3+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
4+
line-height: 1.5;
5+
font-weight: 400;
56

6-
color-scheme: only dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
7+
color-scheme: only dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
910

10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
}
1516

16-
#root {
17-
margin: 0 auto;
18-
padding: 2rem;
19-
text-align: center;
20-
}
17+
body {
18+
margin: 0;
19+
display: flex;
20+
width: 100%;
21+
min-height: 100vh;
22+
height: 100%;
23+
}
2124

22-
a {
23-
font-weight: 500;
24-
color: #646cff;
25-
text-decoration: inherit;
26-
}
27-
a:hover {
28-
color: #535bf2;
29-
}
25+
h1 {
26+
font-size: 1.5em;
27+
line-height: 1.1;
28+
}
3029

31-
body {
32-
margin: 0;
33-
display: flex;
34-
}
30+
a {
31+
font-weight: 500;
32+
color: #646cff;
33+
text-decoration: inherit;
34+
}
35+
a:hover {
36+
color: #535bf2;
37+
}
3538

36-
h1 {
37-
font-size: 1.5em;
38-
line-height: 1.1;
39-
}
39+
button {
40+
border-radius: 8px;
41+
border: 1px solid transparent;
42+
padding: 0.6em 1.2em;
43+
font-size: 1em;
44+
font-weight: 500;
45+
font-family: inherit;
46+
background-color: #1a1a1a;
47+
cursor: pointer;
48+
transition: border-color 0.25s, background 0.25s;
49+
}
50+
button:hover {
51+
border-color: #f3e600;
52+
}
53+
button:focus,
54+
button:focus-visible {
55+
outline: 4px auto -webkit-focus-ring-color;
56+
}
4057

41-
.container {
42-
max-width: 80ch;
58+
button:active {
59+
background-color: #000000;
60+
}
4361
}
4462

45-
/* Fix lists lmao */
46-
.step-description * * {
47-
text-align: left;
48-
}
63+
#root {
64+
display: flex;
65+
flex-direction: column;
66+
flex-grow: 1;
4967

50-
button {
51-
border-radius: 8px;
52-
border: 1px solid transparent;
53-
padding: 0.6em 1.2em;
54-
font-size: 1em;
55-
font-weight: 500;
56-
font-family: inherit;
57-
background-color: #1a1a1a;
58-
cursor: pointer;
59-
transition: border-color 0.25s, background 0.25s;
60-
}
61-
button:hover {
62-
border-color: #f3e600;
63-
}
64-
button:focus,
65-
button:focus-visible {
66-
outline: 4px auto -webkit-focus-ring-color;
68+
width: 100%;
69+
height: 100%;
6770
}
6871

69-
button:active {
70-
background-color: #000000;
71-
}
72+
@layer utils {
73+
.button-list {
74+
display: inline-grid;
75+
gap: 0.5rem;
76+
}
7277

73-
.button-list {
74-
display: inline-grid;
75-
gap: 0.5rem;
78+
.container {
79+
max-width: 80ch;
80+
}
7681
}

‎web/src/lib/action.ts

-31
This file was deleted.

‎web/src/modes/editor/CodeMirror.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { EditorView, basicSetup } from "codemirror";
2+
import { onCleanup } from "solid-js";
3+
import { yaml } from "@codemirror/lang-yaml";
4+
import { indentWithTab } from "@codemirror/commands";
5+
import { oneDark } from "@codemirror/theme-one-dark";
6+
import { keymap } from "@codemirror/view";
7+
import { customLinter } from "./linter";
8+
import { lintGutter } from "@codemirror/lint";
9+
10+
export interface CodeMirrorProps {
11+
content?: string;
12+
}
13+
14+
export function CodeMirror(props: CodeMirrorProps) {
15+
let view = new EditorView({
16+
doc: props.content,
17+
extensions: [
18+
basicSetup,
19+
oneDark,
20+
yaml(),
21+
customLinter,
22+
lintGutter(),
23+
keymap.of([indentWithTab]),
24+
],
25+
});
26+
27+
onCleanup(() => view.destroy());
28+
29+
return <>{view.dom}</>;
30+
}

‎web/src/modes/editor/Editor.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import contentRaw from "$content/guide.yaml?raw";
2+
import { CodeMirror } from "./CodeMirror";
3+
4+
import "./editor.css";
5+
6+
export function Editor() {
7+
return (
8+
<div id="editor">
9+
<CodeMirror content={contentRaw} />
10+
<div>E</div>
11+
</div>
12+
);
13+
}

‎web/src/modes/editor/editor.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body {
2+
overflow: hidden;
3+
}
4+
5+
#editor {
6+
flex-grow: 1;
7+
8+
width: 100vw;
9+
height: 100vh;
10+
11+
display: grid;
12+
grid-template-columns: repeat(2, 1fr);
13+
}
14+
15+
.cm-editor {
16+
max-width: 100%;
17+
max-height: 100%;
18+
overflow: auto;
19+
scrollbar: overlay;
20+
}

0 commit comments

Comments
 (0)