Skip to content

Commit 2466598

Browse files
JulianFun123JulianFun123
committed
Improved UX
1 parent d953f54 commit 2466598

File tree

5 files changed

+135
-102
lines changed

5 files changed

+135
-102
lines changed

‎build.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
// @ts-ignore
22
import fs from 'fs'
3+
import { compile } from 'sass'
34

45
// @ts-ignore
56
const result = await Bun.build({
67
entrypoints: ["./src/main.ts"],
78
outdir: "./dist",
89
});
910

11+
// @ts-ignore
12+
Bun.write('dist/index.css', compile('src/assets/main.scss').css)
13+
1014
fs.cpSync('./public', './dist', {recursive: true});
1115

1216
if (!result.success) {

‎public/index.css‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎src/assets/main.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import url("/dmmono/font.css");
2+
@import url("/plusjakartasans/font.css");
3+
@import url("/test.css");
4+
@import url("/petrel/dark.css");
5+
@import url("/petrel/highlight.css");
6+
@import url("https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css");
7+
8+
* {
9+
font-family: "DM Mono", sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
html, body {
16+
height: 100%;
17+
18+
background: #212531;
19+
color: #FFF;
20+
}
21+
22+
app-root {
23+
height: 100%;
24+
}
25+
26+
.icon-button {
27+
font-size: 16px;
28+
border-radius: 20px;
29+
padding: 2px;
30+
cursor: pointer;
31+
32+
&:hover {
33+
background: #ffffff55;
34+
}
35+
}
36+
37+
.btn {
38+
padding: 7px 14px;
39+
background: #FFFFFF22;
40+
color: #FFF;
41+
border: none;
42+
border-radius: 8px;
43+
margin-left: 6px;
44+
cursor: pointer;
45+
font-size: 13px;
46+
47+
&.primary {
48+
background: #3469ff;
49+
}
50+
}
51+
52+
.top-bar {
53+
display: grid;
54+
grid-template-columns: 300px auto 300px;
55+
align-content: center;
56+
align-items: center;
57+
padding: 0 10px;
58+
height: 44px;
59+
60+
.top-bar-buttons {
61+
justify-self: right;
62+
display: grid;
63+
grid-auto-flow: column;
64+
align-items: center;
65+
}
66+
}

‎src/views/HomeView.ts‎

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -102,43 +102,48 @@ export default class HomeView extends JDOMComponent.unshadowed {
102102
styles(): string {
103103
// language=SCSS
104104
return scss`
105-
.home-page {
106-
padding: 7px 10px;
107-
h2 {
108-
margin-bottom: 10px;
109-
margin-top: 30px;
105+
.home-page {
106+
padding: 7px 10px;
107+
108+
h2 {
109+
margin-bottom: 10px;
110+
margin-top: 30px;
111+
}
112+
113+
.projects {
114+
.project {
115+
border: 2px solid #FFFFFF33;
116+
border-radius: 8px;
117+
display: inline-block;
118+
text-align: center;
119+
padding: 14px;
120+
cursor: pointer;
121+
width: 200px;
122+
123+
margin-right: 10px;
124+
margin-bottom: 10px;
125+
126+
i {
127+
font-size: 44px;
128+
display: block;
110129
}
111-
.projects {
112-
.project {
113-
border: 2px solid #FFFFFF33;
114-
border-radius: 8px;
115-
display: inline-block;
116-
text-align: center;
117-
padding: 14px;
118-
cursor: pointer;
119-
width: 200px;
120-
121-
margin-right: 10px;
122-
margin-bottom: 10px;
123-
124-
i {
125-
font-size: 44px;
126-
display: block;
127-
}
128-
129-
span {
130-
display: block;
131-
margin-top: 10px;
132-
font-size: 18px;
133-
font-family: "Plus Jakarta Sans";
134-
}
135-
136-
&:hover {
137-
background: #FFFFFF11;
138-
}
139-
}
130+
131+
span {
132+
font-family: "Plus Jakarta Sans";
133+
display: block;
134+
margin-top: 10px;
135+
font-size: 18px;
136+
white-space: pre;
137+
text-overflow: ellipsis;
138+
overflow: hidden;
139+
}
140+
141+
&:hover {
142+
background: #FFFFFF11;
140143
}
144+
}
141145
}
146+
}
142147
`;
143148
}
144149
}

‎src/views/editor/EditorView.ts‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export default class EditorView extends JDOMComponent.unshadowed {
2929
fullscreen = state(false)
3030
loading = state(false)
3131
previewLoading = state(false)
32+
terminalLoading = state(false)
33+
containerError = state(false)
3234
savedIndicator = state(false)
3335

3436
terminal: Terminal = new Terminal({
@@ -138,12 +140,14 @@ export default class EditorView extends JDOMComponent.unshadowed {
138140
}
139141

140142
async initWebContainer() {
143+
this.terminalLoading.value = true
141144
this.webContainer?.teardown()
142145

143146
console.log('STARTING WEBCONTAINER')
144147
this.webContainer = await WebContainer.boot();
148+
this.containerError.value = false
145149
this.webContainer.on('error', e => {
146-
alert('Web-Containers do not work here. See a tutorial on how to enable them them https://webcontainers.io/guides/browser-config')
150+
this.containerError.value = true
147151
})
148152

149153
for (const {name, contents} of this.files.value) {
@@ -180,6 +184,7 @@ export default class EditorView extends JDOMComponent.unshadowed {
180184
configs[config.type]?.initContainer(config, this.files.value, sh, this.webContainer, input)
181185
}
182186
})().then(r => null);
187+
this.terminalLoading.value = false
183188
}
184189

185190
selectFile(index: number) {
@@ -216,6 +221,14 @@ export default class EditorView extends JDOMComponent.unshadowed {
216221
window.history.pushState('/new', '/new', '/new')
217222
}
218223

224+
keyDownSaveEvent(e: KeyboardEvent) {
225+
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
226+
this.savePaste()
227+
e.stopPropagation()
228+
e.preventDefault()
229+
}
230+
}
231+
219232
render() {
220233
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#1c202a')
221234
this.frame = document.createElement('iframe')
@@ -238,8 +251,13 @@ export default class EditorView extends JDOMComponent.unshadowed {
238251
<${Logo} />
239252
240253
<div>
241-
<input type="text" :bind=${this.pasteNameEdit}>
254+
<input
255+
type="text"
256+
:bind=${this.pasteNameEdit}
257+
@keydown=${e => this.keyDownSaveEvent(e)}
258+
>
242259
</div>
260+
243261
<div class="top-bar-buttons">
244262
<button class="btn" @click=${() => this.fork()}>Fork</button>
245263
<!-- <button @click=${() => open(`https://pastefy.app/${this.paste.value.id}`)}>Open in Pastefy</button>-->
@@ -309,6 +327,7 @@ export default class EditorView extends JDOMComponent.unshadowed {
309327
<input
310328
value=${name}
311329
@click=${e => e.target.focus()}
330+
@keydown=${e => this.keyDownSaveEvent(e)}
312331
@change=${e => {
313332
this.webContainer?.fs?.rm(name)
314333
this.files.value[index].name = e.target.value
@@ -361,6 +380,10 @@ export default class EditorView extends JDOMComponent.unshadowed {
361380
</div>
362381
</div>
363382
<div class="editor-terminal-area">
383+
<${LoadingIndicator} name="Container" :if=${this.terminalLoading} />
384+
<div :if=${this.containerError}>
385+
Web-Containers do not work here. See a tutorial on how to enable them <a href="https://webcontainers.io/guides/browser-config">https://webcontainers.io/guides/browser-config</a>
386+
</div>
364387
${termDiv}
365388
</div>
366389
</div>
@@ -394,6 +417,7 @@ export default class EditorView extends JDOMComponent.unshadowed {
394417
padding: 10px;
395418
width: 100%;
396419
overflow: hidden;
420+
position: relative;
397421
398422
.terminal {
399423
border-radius: 10px;

0 commit comments

Comments
 (0)