Skip to content

Commit 4d27e0d

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 1db4370 commit 4d27e0d

File tree

1 file changed

+98
-34
lines changed

1 file changed

+98
-34
lines changed

‎blog/25-08-26/terminal-in-a-webpage/terminal-in-a-webpage.html‎

Lines changed: 98 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,37 @@
55
cross-origin-isolate
66
-->
77

8-
<html>
8+
<!DOCTYPE html>
99

1010

11-
<head>
11+
<html>
1212

13+
<head>
14+
<meta charset=utf-8>
1315

14-
<title>terminal in a webpage</title>
16+
<title>
17+
Terminal In A Webpage
18+
</title>
1519

20+
<meta name=description content='Learn how to embed a fully interactive WebContainer-powered terminal directly into your webpage. This guide walks you through the setup and includes editable, runnable code so you can experiment with real Node.js environments right in the browser.'>
1621
<base href='https://ext-code.com/blog/25-08-26/terminal-in-a-webpage/'>
17-
<base href='https://javascript-2020.github.io/blog/25-08-26/terminal-in-a-webpage/'>
18-
1922
<link rel=canonical href='https://ext-code.com/blog/25-08-26/terminal-in-a-webpage/terminal-in-a-webpage.html'>
20-
2123
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
24+
<meta name=viewport content='width=device-width, initial-scale=1'>
25+
26+
<script type='application/ld+json'>
27+
{
28+
"@context" : "https://schema.org",
29+
"@type" : "TechArticle",
30+
"headline" : "Terminal In A Webpage",
31+
"description" : "Learn how to embed a fully interactive WebContainer-powered terminal directly into your webpage. This guide walks you through the setup and includes editable, runnable code so you can experiment with real Node.js environments right in the browser.",
32+
"author" : {"@type":"Person","name":"Matthew Richards"},
33+
"datePublished" : "2025-08-25",
34+
"dateModified" : "2025-10-29",
35+
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-08-26/terminal-in-a-webpage/terminal-in-a-webpage.html"},
36+
"publisher" : {"@type":"Organization","name":"Your Blog or Company Name","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
37+
}
38+
</script>
2239

2340

2441
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
@@ -31,39 +48,43 @@
3148
console.log('terminal-in-a-webpage.html');
3249
console.log();
3350
console.json=v=>console.log(JSON.stringify(v,null,4));
34-
var df=true
51+
var df=true,version='v2.0'
3552
;
3653

3754

3855
var ext;
3956
var $;
4057
var datatype;
41-
var keydown;
4258
var menumod;
43-
var code;
59+
var keydown;
4460
var debug;
4561

4662
var snippet;
4763

64+
var log;
65+
4866

4967
//:
5068

5169

52-
mod.stack.add = init;
53-
5470
async function init(){
55-
debug('init');
71+
debug('init',version);
5672
menu = menumod();
5773

5874

5975
snippet = mod['snippet-html-console'];
76+
log = mod.log;
6077

6178
snippet.initmod({ext,$,menu,ace});
79+
log.initmod({ext,$});
6280

63-
await snippet.init();
81+
await Promise.all([
82+
snippet.init(),
83+
log.init(),
84+
]);
6485

6586

66-
await initdom(document.body);
87+
initdom(document.body);
6788

6889

6990
}//init
@@ -83,58 +104,98 @@
83104
'js/core/datatype.js',
84105
'js/dom/menumod/menumod.js',
85106
'js/dom/keydown/keydown.js',
86-
'js/dom/code/v2.0/code-v2.0.js.api',
87107
'js/debug/debug.js',
88108
);
89-
[$,datatype,menumod,keydown,code,debug] = await promise;
109+
[$,datatype,menumod,keydown,debug] = await promise;
90110

91-
code.initmod({ext,$,datatype,menumod});
92-
93111
mod.stack.complete;
94112

95113
})();
96114

97115

98116
</script init>
99-
100117

101118

102119
<link rel=stylesheet href='/blog/css/blog.css'>
103120

104121
<style>
122+
105123

106124
html
107-
{height:100%}
125+
{height:100%;font-family:arial}
108126
body
109-
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;align-items:center;
110-
font-family:arial
127+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:20px;margin:20px;align-items:center;
128+
padding-bottom:200px;
111129
}
112130
body>*
113-
{max-width:1400px;width:100%;padding:0 20px;}
131+
{max-width:1400px;width:100%}
132+
133+
[component]
134+
{display:none}
135+
136+
.description
137+
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
138+
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
139+
.description>p
140+
{margin:0}
141+
.description > p+p
142+
{margin:10px 0}
143+
144+
code
145+
{font-family:monospace;background:whitesmoke}
146+
code.inline
147+
{display:inline;padding:5px 10px}
148+
149+
a
150+
{color:#4a90e2;text-decoration:none;font-weight:500}
151+
a:hover
152+
{text-decoration:underline}
153+
.link-domain
154+
{font-size:0.85rem;color:#777;margin-left:0.25rem}
155+
.link-domain::before
156+
{content:'['}
157+
.link-domain::after
158+
{content:']'}
159+
.link-txt
160+
{}
161+
162+
input
163+
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
164+
input[type=button]
165+
{cursor:pointer}
166+
167+
114168

115169
</style>
116170

117-
118-
119171
</head>
120172

121173

122174
<body>
123175

124-
125-
126-
<h3>
127-
terminal in a webpage
128-
</h3>
176+
<blog-hdr component=grp1 v2.0>
177+
<h1 class=title>
178+
Terminal In A Webpage
179+
</h1>
180+
<time slot=date datetime=2025-10-29>
181+
29 Oct 2025
182+
</time>
183+
</blog-hdr>
129184

130185

131-
<div id=desc>
132-
terminal in a webpage
186+
187+
<div class=description>
188+
<p>
189+
Learn how to embed a fully interactive WebContainer-powered terminal directly into your webpage.
190+
This guide walks you through the setup and includes editable, runnable code so you can experiment with real Node.js environments right in the browser.
191+
</p>
133192
</div>
134193

135194

136-
<snippet-html-console component v2.0 src='ex/ex.html'>
137-
</snippet-html-console>
195+
<snippet-html-console component v2.0 src='ex/ex.html'></snippet-html-console>
196+
197+
198+
<log component v2.0></log>
138199

139200

140201
</body>
@@ -150,6 +211,9 @@ <h3>
150211

151212
snippet.initdom(root);
152213
snippet.console.height = 200;
214+
215+
216+
log.initdom();
153217

154218

155219
}//initdom

0 commit comments

Comments
 (0)