Skip to content

Commit 46650f5

Browse files
javascript-2020javascript-2020
committed
save file
1 parent b96471d commit 46650f5

File tree

1 file changed

+271
-0
lines changed

1 file changed

+271
-0
lines changed

‎utils/misc/stackblitz/stackblitz.html‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
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/component.js'></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 init(){
62+
debug('init',version);
63+
64+
menu = menumod();
65+
66+
hdr = mod['misc-hdr'];
67+
68+
hdr.initmod({ext,$});
69+
70+
await Promise.all([
71+
hdr.init(),
72+
]);
73+
74+
75+
initdom();
76+
77+
78+
}//init
79+
80+
81+
(async()=>{
82+
83+
mod.stack.add;
84+
85+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
86+
87+
var promise = ext.load.libs(
88+
'js/dom/$.js',
89+
'js/core/datatype.js',
90+
'js/dom/menumod/menumod.js',
91+
'js/dom/keydown/keydown.js',
92+
'js/debug/debug.js',
93+
);
94+
[$,datatype,menumod,keydown,debug] = await promise;
95+
96+
mod.stack.complete;
97+
98+
})();
99+
100+
101+
</script>
102+
103+
104+
<style>
105+
106+
html
107+
{height:100%}
108+
109+
body
110+
{font-family:arial;/*margin:20px;*/height:calc(100% - 16px);display:flex;flex-direction:column;}
111+
112+
.hdr
113+
{position:relative;display:flex;justify-content:space-between;align-items:center;/*padding-bottom:10px;border-bottom:1px solid lightblue;margin-bottom:20px;*/
114+
margin-top:0;font-family:arial;
115+
}
116+
117+
.hdr-icon
118+
{display:inline-block;text-align:center;
119+
background : whitesmoke;
120+
border-radius : 5px;
121+
border : 1px solid lightgray;
122+
padding : 5px 3px 0px;
123+
cursor : pointer;
124+
margin-right : 10px;
125+
min-width : 50px;
126+
}
127+
128+
.hdr-icon-img
129+
{}
130+
131+
.hdr-icon-label
132+
{margin:2px 0 0;}
133+
134+
.hdr-title
135+
{/*text-align:center;position:absolute;left:0;right:0;top:5px;z-index:-1;*/
136+
margin:0;}
137+
138+
.hdr-date
139+
{float:right;}
140+
141+
.ftr
142+
{background-color:rgb(238, 232, 170);height:50px;margin-top:70px;}
143+
144+
#center
145+
{width:100%;max-width:1000px;margin:auto;flex:1;}
146+
147+
.heading
148+
{border-left:5px solid rgba(238,232,170,1);background:rgba(239,247,250,1);padding:20px 20px;}
149+
150+
a
151+
{color:blue}
152+
a:visited
153+
{color:blue}
154+
155+
embed
156+
{height:100%}
157+
158+
</style>
159+
160+
</head>
161+
162+
163+
<body>
164+
165+
166+
<misc-hdr component=grp>
167+
<img class=title src='images/stackblitz.png' style='top:-15px;height:60px' alt=stackblitz>
168+
<time slot=date datetime=2025-10-31>31 Oct 2025</time>
169+
</misc-hdr>
170+
171+
172+
<div id=embed></div>
173+
174+
175+
</body>
176+
177+
178+
<script>
179+
180+
181+
function initdom(){
182+
183+
184+
hdr.initdom();
185+
186+
187+
}//initdom
188+
189+
190+
</script>
191+
192+
193+
194+
<script type=module>
195+
196+
197+
/*
198+
var hdr = $('.hdr');
199+
hdr.status = false;
200+
hdr.show = ()=>hdr.style.height = '60px';
201+
hdr.hide = ()=>hdr.style.height = '10px';
202+
hdr.onmouseenter = e=>hdr.show();
203+
hdr.onmouseleave = e=>hdr.hide();
204+
*/
205+
206+
207+
/*
208+
https://developer.stackblitz.com/platform/api/javascript-sdk
209+
https://developer.stackblitz.com/platform/api/javascript-sdk-options
210+
https://webcontainers.io/api
211+
*/
212+
213+
/*
214+
files : {
215+
'settings.json':`
216+
{
217+
218+
"editor.fontSize": 16,
219+
"editor.autoClosingBrackets": "never",
220+
"editor.autoClosingQuotes": "never",
221+
"editor.renderIndentGuides": false,
222+
"editor.formatOnSave": false,
223+
"editor.formatOnPaste": false,
224+
"editor.formatOnType": false,
225+
"editor.occurrencesHighlight": false,
226+
227+
"editor.guides.indentation" : false,
228+
229+
230+
"workbench.colorCustomizations": {
231+
"editorGutter.background": "#4A90E2",
232+
"editor.lineHighlightBackground": "#F0F8FF", // Light blue, adjust as needed
233+
"editor.lineHighlightBorder": "" // Removes the border
234+
}
235+
236+
}
237+
`
238+
239+
}
240+
*/
241+
242+
243+
244+
import sdk from 'https://cdn.jsdelivr.net/npm/@stackblitz/sdk/+esm';
245+
246+
var project = {
247+
title : 'dynamically generated project',
248+
description : 'created with <3',
249+
template : 'node',
250+
files:{},
251+
};
252+
253+
254+
var vm = await sdk.embedProject('embed',project,{
255+
forceEmbedLayout : true,
256+
//openFile : 'readme.md',
257+
theme : 'light',
258+
hideExplorer : false,
259+
hideNavigation : false,
260+
width : '100%',
261+
height : '100%',
262+
terminalHeight : '50',
263+
view : 'default'
264+
});
265+
266+
267+
</script>
268+
269+
</html>
270+
271+

0 commit comments

Comments
 (0)