Skip to content

Commit e5438ad

Browse files
javascript-2020javascript-2020
committed
save file
1 parent d5b050c commit e5438ad

1 file changed

Lines changed: 266 additions & 0 deletions

File tree

‎utils/misc/stackblitz/v2.0/stackblitz.html‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
2+
3+
<!DOCTYPE html>
4+
5+
6+
<html>
7+
8+
<head>
9+
<meta charset=utf-8>
10+
11+
<title>
12+
stackblitz
13+
</title>
14+
15+
<base href='https://ext-code.com/utils/misc/stackblitz/'>
16+
<link rel=canonical href='https://ext-code.com/utils/misc/stackblitz/stackblitz.html'>
17+
18+
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAMAAABBJv+bAAAAQlBMVEVHcEwyODg0ODkzNzgxNzc0ODk0ODkzODgzODgzNzgyNzgzODg0ODkzODgyNzgzODgzODgzODk0ODk0ODkyNzg0ODmObyvDAAAAFXRSTlMABvaSDbPHe15GL5u9hRxvO6rn2VJXM6DpAAAAxElEQVQoz71TyRbDIAh0Ie6J2fz/Xy3Y2pDktZ5aTiODCAMK0QxAPoFsgNk0JrMEQmEwyU5ndt4K2khQEzLhdNeQTznCWREegNEOOe18fRO8i6ooz+gRw1k9gMkyo/E9zY5yKMX+ihbLq8mjFB5N4UepYLGRmdM7OnLlpYtJXWQQkFCIpHcpfBVpCxeRV/KuodHzmfaNxuTmlpxmoEzc5bs0rnGdQQZeybWxRX6Vxf5rJJ116CxTZxX5Isf7Ive+wadP9AAuFg97y3bd7gAAAABJRU5ErkJggg=='>
19+
<meta name=viewport content='width=device-width, initial-scale=1'>
20+
21+
<script type='application/ld+json'>
22+
{
23+
"@context" : "https://schema.org",
24+
"@type" : "SoftwareApplication",
25+
"name" : "Stackblitz",
26+
"url" : "https://ext-code.com/utils/misc/stackblitz/stackblitz.html",
27+
"author" : {"@type":"Person","name":"Matthew Richards"},
28+
"description" : "Use this tool to quickly setup nodejs environments and experiment without touching the local disk.",
29+
"applicationCategory" : "DeveloperApplication",
30+
"operatingSystem" : "All",
31+
"browserRequirements" : "Requires JavaScript-enabled browser",
32+
"softwareVersion" : "1.0.0",
33+
"offers" : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
34+
}
35+
</script>
36+
37+
38+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js?hdr'></script>
39+
40+
<script init>
41+
console.clear();
42+
console.log('stackblitz-v2.0.html');
43+
console.log();
44+
console.json=v=>console.log(JSON.stringify(v,null,4));
45+
var df=true,version='v2.0'
46+
;
47+
48+
var ext;
49+
var $;
50+
var datatype;
51+
var menumod;
52+
var keydown;
53+
var debug;
54+
55+
var menu;
56+
57+
var hdr;
58+
59+
60+
61+
async function ready(){
62+
debug('init',version);
63+
hdr = mod['misc-hdr'];
64+
65+
66+
await initdom();
67+
68+
69+
hdr.complete();
70+
71+
72+
}//ready
73+
74+
75+
(async()=>{
76+
77+
mod.stack.add;
78+
79+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
80+
81+
var promise = ext.load.libs(
82+
'js/dom/viewport-manager/v1.0.0/viewport-manager.js.api',
83+
);
84+
[vm] = await promise;
85+
86+
vm = vm();
87+
vm.initmod({mod});
88+
await vm.init();
89+
await vm.initdom();
90+
mod.base.add({vm});
91+
92+
mod.stack.complete;
93+
94+
})();
95+
96+
</script>
97+
98+
99+
<style>
100+
101+
html
102+
{height:100%}
103+
104+
body
105+
{font-family:arial;/*margin:20px;*/height:calc(100% - 16px);display:flex;flex-direction:column;}
106+
107+
.hdr
108+
{position:relative;display:flex;justify-content:space-between;align-items:center;/*padding-bottom:10px;border-bottom:1px solid lightblue;margin-bottom:20px;*/
109+
margin-top:0;font-family:arial;
110+
}
111+
112+
.hdr-icon
113+
{display:inline-block;text-align:center;
114+
background : whitesmoke;
115+
border-radius : 5px;
116+
border : 1px solid lightgray;
117+
padding : 5px 3px 0px;
118+
cursor : pointer;
119+
margin-right : 10px;
120+
min-width : 50px;
121+
}
122+
123+
.hdr-icon-img
124+
{}
125+
126+
.hdr-icon-label
127+
{margin:2px 0 0;}
128+
129+
.hdr-title
130+
{/*text-align:center;position:absolute;left:0;right:0;top:5px;z-index:-1;*/
131+
margin:0;}
132+
133+
.hdr-date
134+
{float:right;}
135+
136+
.ftr
137+
{background-color:rgb(238, 232, 170);height:50px;margin-top:70px;}
138+
139+
#center
140+
{width:100%;max-width:1000px;margin:auto;flex:1;}
141+
142+
.heading
143+
{border-left:5px solid rgba(238,232,170,1);background:rgba(239,247,250,1);padding:20px 20px;}
144+
145+
a
146+
{color:blue}
147+
a:visited
148+
{color:blue}
149+
150+
embed
151+
{height:100%}
152+
153+
</style>
154+
155+
</head>
156+
157+
158+
<body>
159+
160+
161+
<misc-hdr component=grp>
162+
<img slot=title class=title src='images/stackblitz.png' style='top:-15px;height:60px' alt=stackblitz>
163+
<time slot=date datetime=2026-04-23>
164+
23 Apr 2026
165+
</time>
166+
</misc-hdr>
167+
168+
169+
<div id=embed></div>
170+
171+
172+
</body>
173+
174+
175+
<script>
176+
177+
178+
async function initdom(){
179+
180+
181+
182+
}//initdom
183+
184+
185+
</script>
186+
187+
188+
189+
<script type=module>
190+
191+
192+
/*
193+
var hdr = $('.hdr');
194+
hdr.status = false;
195+
hdr.show = ()=>hdr.style.height = '60px';
196+
hdr.hide = ()=>hdr.style.height = '10px';
197+
hdr.onmouseenter = e=>hdr.show();
198+
hdr.onmouseleave = e=>hdr.hide();
199+
*/
200+
201+
202+
/*
203+
https://developer.stackblitz.com/platform/api/javascript-sdk
204+
https://developer.stackblitz.com/platform/api/javascript-sdk-options
205+
https://webcontainers.io/api
206+
*/
207+
208+
/*
209+
files : {
210+
'settings.json':`
211+
{
212+
213+
"editor.fontSize": 16,
214+
"editor.autoClosingBrackets": "never",
215+
"editor.autoClosingQuotes": "never",
216+
"editor.renderIndentGuides": false,
217+
"editor.formatOnSave": false,
218+
"editor.formatOnPaste": false,
219+
"editor.formatOnType": false,
220+
"editor.occurrencesHighlight": false,
221+
222+
"editor.guides.indentation" : false,
223+
224+
225+
"workbench.colorCustomizations": {
226+
"editorGutter.background": "#4A90E2",
227+
"editor.lineHighlightBackground": "#F0F8FF", // Light blue, adjust as needed
228+
"editor.lineHighlightBorder": "" // Removes the border
229+
}
230+
231+
}
232+
`
233+
234+
}
235+
*/
236+
237+
238+
239+
import sdk from 'https://cdn.jsdelivr.net/npm/@stackblitz/sdk/+esm';
240+
241+
var project = {
242+
title : 'dynamically generated project',
243+
description : 'created with <3',
244+
template : 'node',
245+
files:{},
246+
};
247+
248+
249+
var vm = await sdk.embedProject('embed',project,{
250+
forceEmbedLayout : true,
251+
//openFile : 'readme.md',
252+
theme : 'light',
253+
hideExplorer : false,
254+
hideNavigation : false,
255+
width : '100%',
256+
height : '100%',
257+
terminalHeight : '50',
258+
view : 'default'
259+
});
260+
261+
262+
</script>
263+
264+
</html>
265+
266+

0 commit comments

Comments
 (0)