Skip to content

Commit b5f1e96

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 19c0239 commit b5f1e96

File tree

1 file changed

+286
-0
lines changed

1 file changed

+286
-0
lines changed

‎utils/misc/terminal/terminal.html‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
2+
3+
4+
<!-- headers
5+
cross-origin-isolate
6+
-->
7+
8+
9+
<!DOCTYPE html>
10+
11+
12+
<html>
13+
14+
<head>
15+
<meta charset=utf-8>
16+
17+
<title>
18+
Node.js Terminal
19+
</title>
20+
21+
<meta name=description content=''>
22+
23+
<base href='https://ext-code.com/utils/misc/terminal/'>
24+
<link rel=canonical href='https://ext-code.com/utils/misc/terminal/terminal.html'>
25+
26+
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAMAAABBJv+bAAAAQlBMVEVHcEwyODg0ODkzNzgxNzc0ODk0ODkzODgzODgzNzgyNzgzODg0ODkzODgyNzgzODgzODgzODk0ODk0ODkyNzg0ODmObyvDAAAAFXRSTlMABvaSDbPHe15GL5u9hRxvO6rn2VJXM6DpAAAAxElEQVQoz71TyRbDIAh0Ie6J2fz/Xy3Y2pDktZ5aTiODCAMK0QxAPoFsgNk0JrMEQmEwyU5ndt4K2khQEzLhdNeQTznCWREegNEOOe18fRO8i6ooz+gRw1k9gMkyo/E9zY5yKMX+ihbLq8mjFB5N4UepYLGRmdM7OnLlpYtJXWQQkFCIpHcpfBVpCxeRV/KuodHzmfaNxuTmlpxmoEzc5bs0rnGdQQZeybWxRX6Vxf5rJJ116CxTZxX5Isf7Ive+wadP9AAuFg97y3bd7gAAAABJRU5ErkJggg=='>
27+
<meta name=viewport content='width=device-width, initial-scale=1'>
28+
29+
<script type='application/ld+json'>
30+
{
31+
"@context" : "https://schema.org",
32+
"@type" : "SoftwareApplication",
33+
"name" : "Node.js Terminal",
34+
"url" : "https://ext-code.com/utils/misc/terminal/terminal.html",
35+
"author" : {"@type":"Person","name":"Matthew Richards"},
36+
"description" : "Use this tool to quickly setup a terminal with a nodejs / npm environments and experiment without touching the local disk.",
37+
"applicationCategory" : "DeveloperApplication",
38+
"operatingSystem" : "All",
39+
"browserRequirements" : "Requires JavaScript-enabled browser",
40+
"softwareVersion" : "1.0.0",
41+
"offers" : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
42+
}
43+
</script>
44+
45+
46+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
47+
48+
<script init>
49+
console.clear();
50+
console.log('terminal-v2.0.html');
51+
console.log();
52+
console.json=v=>console.log(JSON.stringify(v,null,4));
53+
var df=true,version='v2.0'
54+
;
55+
56+
var ext;
57+
var $;
58+
var datatype;
59+
var menumod;
60+
var keydown;
61+
var debug;
62+
63+
var menu;
64+
65+
var hdr;
66+
67+
68+
async function init(){
69+
70+
71+
menu = menumod();
72+
73+
74+
hdr = mod['misc-hdr'];
75+
76+
hdr.initmod({ext,$});
77+
78+
79+
await Promise.all([
80+
hdr.init(),
81+
]);
82+
83+
84+
initdom();
85+
86+
87+
}//init
88+
89+
90+
(async()=>{
91+
92+
mod.stack.add;
93+
94+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
95+
96+
var promise = ext.load.libs(
97+
'js/dom/$.js',
98+
'js/core/datatype.js',
99+
'js/dom/menumod/menumod.js',
100+
'js/dom/keydown/keydown.js',
101+
'js/debug/debug.js',
102+
);
103+
[$,datatype,menumod,keydown,debug] = await promise;
104+
105+
mod.stack.complete;
106+
107+
})();
108+
109+
110+
</script>
111+
112+
113+
114+
115+
<link rel=stylesheet href='https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css'>
116+
117+
<style>
118+
119+
html
120+
{height:100%;font-family:arial}
121+
body
122+
{margin:20px;height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px}
123+
124+
#terminal
125+
{flex:1}
126+
.terminal
127+
{padding:10px;border:2px solid lightgray;box-sizing:border-box}
128+
129+
</style>
130+
131+
</head>
132+
133+
134+
<body>
135+
136+
137+
<misc-hdr component=grp>
138+
<img class=title src='images/terminal.png' style='top:-15px;height:50px' alt='Node.js Terminal'>
139+
<time slot=date datetime=2025-10-31>31 Oct 2025</time>
140+
</misc-hdr>
141+
142+
143+
<div id=terminal></div>
144+
145+
146+
</body>
147+
148+
149+
<script>
150+
151+
152+
function initdom(){
153+
154+
}//initdom
155+
156+
157+
158+
159+
var theme = {};
160+
161+
theme.light = {
162+
foreground : 'black',//'#53676d',
163+
background : 'hsl(45,86%,98%)',//'#fbf3db',
164+
cursor : '#3a4d53',
165+
selectionBackground : '#cfcebe',
166+
black : '#e9e4d0',
167+
red : '#d2212d',
168+
green : '#489100',
169+
yellow : '#ad8900',
170+
blue : '#0072d4',
171+
magenta : '#8f0075',
172+
cyan : '#00938d',
173+
white : '#ffffff',
174+
brightBlack : '#7d7a68',
175+
brightRed : '#d2212d',
176+
brightGreen : '#489100',
177+
brightYellow : '#ad8900',
178+
brightBlue : '#0072d4',
179+
brightMagenta : '#8f0075',
180+
brightCyan : '#00938d',
181+
brightWhite : '#ffffff'
182+
};
183+
184+
185+
var x = {
186+
187+
reset : '\x1b[0m',
188+
189+
black : '\x1b[30m',
190+
red : '\x1b[31m',
191+
green : '\x1b[32m',
192+
yellow : '\x1b[33m',
193+
blue : '\x1b[34m',
194+
magenta : '\x1b[35m',
195+
cyan : '\x1b[36m',
196+
white : '\x1b[37m',
197+
198+
brightBlack : '\x1b[90m',
199+
brightRed: '\x1b[91m',
200+
brightGreen: '\x1b[92m',
201+
brightYellow: '\x1b[93m',
202+
brightBlue: '\x1b[94m',
203+
brightMagenta: '\x1b[95m',
204+
brightCyan: '\x1b[96m',
205+
brightWhite: '\x1b[97m',
206+
207+
bgRed: '\x1b[41m',
208+
bgGreen: '\x1b[42m',
209+
bgYellow: '\x1b[43m',
210+
bgBlue: '\x1b[44m',
211+
bgMagenta: '\x1b[45m',
212+
bgCyan: '\x1b[46m',
213+
bgWhite: '\x1b[47m',
214+
215+
bgBrightRed : '\x1b[101m',
216+
bgBrightGreen : '\x1b[102m',
217+
bgBrightYellow : '\x1b[103m',
218+
bgBrightBlue : '\x1b[104m',
219+
bgBrightMagenta : '\x1b[105m',
220+
bgBrightCyan : '\x1b[106m',
221+
bgBrightWhite : '\x1b[107m',
222+
223+
bold : '\x1b[1m',
224+
dim : '\x1b[2m',
225+
italic : '\x1b[3m',
226+
underline : '\x1b[4m',
227+
inverse : '\x1b[7m',
228+
hidden : '\x1b[8m',
229+
strikethrough : '\x1b[9m',
230+
231+
gray : '\x1b[38;5;245m',
232+
233+
};
234+
235+
var chr = {
236+
warn : '\u26A0',
237+
cross : '\u274C',
238+
stop : '\u1F6D1',
239+
prohibited : '\u1F6AB',
240+
check : '\u2705',
241+
go : '\u1F7E2',
242+
thumb : '\u1F44D',
243+
ok : '\u1F197',
244+
};
245+
246+
247+
</script>
248+
249+
250+
<script type=module>
251+
console.clear();
252+
import {Terminal} from 'https://cdn.jsdelivr.net/npm/@xterm/xterm/+esm';
253+
import {FitAddon} from 'https://cdn.jsdelivr.net/npm/@xterm/addon-fit/+esm'
254+
import {WebContainer} from 'https://cdn.jsdelivr.net/npm/@webcontainer/api/+esm'
255+
256+
var term = new Terminal({
257+
258+
fontFamily : 'monospace',
259+
fontSize : 16,
260+
lineHeight : 1.0,
261+
262+
263+
theme : theme.light,
264+
rendererType : 'dom',
265+
266+
});
267+
var fitAddon = new FitAddon();
268+
term.loadAddon(fitAddon);
269+
term.open(terminal);
270+
fitAddon.fit();
271+
term.write('booting container ...\r\n')
272+
var webcontainer = await WebContainer.boot();
273+
term.write('spawn jsh ...\r\n')
274+
var shell = await webcontainer.spawn('jsh');
275+
var output = new WritableStream({write(data){term.write(data)}});
276+
shell.output.pipeTo(output);
277+
278+
var input = shell.input.getWriter();
279+
term.onData(data=>input.write(data));
280+
281+
term.focus();
282+
283+
</script>
284+
285+
</html>
286+

0 commit comments

Comments
 (0)