Skip to content

Commit b96471d

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 37ff565 commit b96471d

File tree

1 file changed

+179
-124
lines changed

1 file changed

+179
-124
lines changed

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

Lines changed: 179 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,121 @@
11

2+
3+
<!DOCTYPE html>
4+
5+
26
<html>
7+
38
<head>
9+
<meta charset=utf-8>
10+
11+
<title>
12+
stackblitz
13+
</title>
414

5-
<title>stackblitz</title>
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'>
620

7-
<base href='https://javascript-2020.github.io/utils/editors/stackblitz/stackblitz.html'>
8-
<link rel="shortcut icon" type="image/x-icon" href="images/stackblitz.png">
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>
936

1037

11-
<style>
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+
;
1247

13-
html
14-
{height:100%}
48+
var ext;
49+
var $;
50+
var datatype;
51+
var menumod;
52+
var keydown;
53+
var debug;
1554

16-
body
17-
{
18-
font-family : arial;
19-
/*margin : 20px;*/
20-
height : calc(100% - 16px);
21-
display : flex;
22-
flex-direction : column;
23-
}
55+
var menu;
2456

57+
var hdr;
2558

26-
.hdr
27-
{
28-
position : relative;
29-
display:flex;
30-
justify-content:space-between;
31-
align-items:center;
32-
/*padding-bottom : 10px;
33-
border-bottom : 1px solid lightblue;
34-
margin-bottom : 20px;*/
35-
margin-top : 0;
36-
font-family : arial;
37-
}
3859

39-
.hdr-icon
40-
{
41-
display : inline-block;
42-
text-align : center;
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;
43119
background : whitesmoke;
44120
border-radius : 5px;
45121
border : 1px solid lightgray;
@@ -49,100 +125,74 @@
49125
min-width : 50px;
50126
}
51127

52-
.hdr-icon-img
53-
{
54-
}
55-
56-
.hdr-icon-label
57-
{
58-
margin : 2px 0 0;
59-
}
60-
61-
.hdr-title
62-
{
63-
/*
64-
text-align : center;
65-
position : absolute;
66-
left : 0;
67-
right : 0;
68-
top : 5px;
69-
z-index : -1;
70-
*/
71-
margin : 0;
72-
}
73-
74-
.hdr-date
75-
{
76-
float : right;
77-
}
78-
79-
.ftr
80-
{
81-
background-color : rgb(238, 232, 170);
82-
height : 50px;
83-
margin-top : 70px;
84-
}
85-
86-
87-
#center
88-
{
89-
width : 100%;
90-
max-width : 1000px;
91-
margin : auto;
92-
flex : 1;
93-
}
94-
95-
96-
.heading
97-
{
98-
border-left : 5px solid rgba(238,232,170,1);
99-
background : rgba(239,247,250,1);
100-
padding : 20px 20px;
101-
}
102-
103-
104-
a
105-
{
106-
color : blue;
107-
}
108-
a:visited
109-
{
110-
color : blue;
111-
}
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}
112154

113-
embed
114-
{height:100%}
155+
embed
156+
{height:100%}
157+
158+
</style>
159+
160+
</head>
115161

116-
</style>
162+
163+
<body>
164+
117165

118-
</head>
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>
119170

120-
<body>
171+
172+
<div id=embed></div>
121173

122-
<section style="box-sizing:border-box" class="hdr">
123-
<a id="home" href='https://javascript-2020.github.io/'>
124-
<div class="hdr-icon-label">
125-
home
126-
</div>
127-
</a>
128-
<h3 style="color: blue; font-weight: bold;" class="hdr-title">
129-
stackblitz
130-
</h3>
131-
<div style="" class="hdr-date">
132-
22 Nov 2024
133-
</div>
134-
</section>
135174

175+
</body>
176+
177+
178+
<script>
136179

137-
<div id=embed></div>
180+
181+
function initdom(){
138182

139-
<script type=module>
140-
console.clear();
141-
console.log('stackblitz');
142-
console.log();
143-
console.json=v=>console.log(JSON.stringify(v,null,4));
183+
184+
hdr.initdom();
185+
186+
187+
}//initdom
188+
189+
190+
</script>
191+
192+
193+
194+
<script type=module>
144195

145-
var $ = (root,sel)=>(!sel && (sel=root,root=document),root.querySelector(sel));
146196

147197
/*
148198
var hdr = $('.hdr');
@@ -160,12 +210,7 @@ <h3 style="color: blue; font-weight: bold;" class="hdr-title">
160210
https://webcontainers.io/api
161211
*/
162212

163-
import sdk from 'https://cdn.jsdelivr.net/npm/@stackblitz/sdk/+esm';
164-
165-
var project = {
166-
title : 'dynamically generated project',
167-
description : 'created with <3',
168-
template : 'node',
213+
/*
169214
files : {
170215
'settings.json':`
171216
{
@@ -192,7 +237,19 @@ <h3 style="color: blue; font-weight: bold;" class="hdr-title">
192237
`
193238
194239
}
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:{},
195251
};
252+
196253

197254
var vm = await sdk.embedProject('embed',project,{
198255
forceEmbedLayout : true,
@@ -206,10 +263,8 @@ <h3 style="color: blue; font-weight: bold;" class="hdr-title">
206263
view : 'default'
207264
});
208265

209-
</script>
210-
211266

212-
</body>
267+
</script>
213268

214269
</html>
215270

0 commit comments

Comments
 (0)