Skip to content

Commit 9481617

Browse files
dylan-sutton-chavezdylan-sutton-chavez
committed
Feat: Add packages for frontend demo.
1 parent c8b8030 commit 9481617

8 files changed

Lines changed: 126 additions & 7 deletions

File tree

‎demo/index.html‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@
3333

3434
</head>
3535

36-
<body class="bg-[#161616] text-[#ffffff] h-screen flex flex-col p-4 gap-4 overflow-hidden">
36+
<body class="bg-[#161616] text-[#ffffff] h-screen flex p-4 gap-4 overflow-hidden">
3737

3838
<h1 class="sr-only">Edge Python — Online Python 3.13 Playground</h1>
3939

40-
<main class="contents">
40+
<main class="flex-1 flex flex-col gap-4 min-h-0">
4141
<nav class="bg-[#222222] border border-[#2d2d2d] rounded-md text-[#c2c2c2] text-[12px] px-3 py-2 flex items-center justify-between">
4242
<a href="/" class="flex items-center gap-2">
4343
<h1 class="font-semibold">Edge Python Playground</h1>
@@ -52,7 +52,7 @@ <h1 class="font-semibold">Edge Python Playground</h1>
5252
</a>
5353
</nav>
5454

55-
<section aria-label="Code editor" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden">
55+
<section aria-label="Code editor" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden min-h-0">
5656
<header class="bg-[#1c1c1c] border-[#2d2d2d] flex justify-between items-center">
5757
<div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full border-b border-[#2d2d2d]">
5858
<span class="px-3 py-2">
@@ -67,19 +67,20 @@ <h1 class="font-semibold">Edge Python Playground</h1>
6767
<span>Run</span>
6868
</button>
6969
</span>
70+
</div>
7071
</header>
7172

72-
<div class="flex flex-1 code-font text-sm overflow-hidden">
73+
<div class="flex flex-1 code-font text-sm overflow-hidden min-w-0 min-h-0">
7374
<pre id="ln" aria-hidden="true" class="no-scrollbar pt-2 pb-2 text-[#525252] text-center bg-[#2d2d2d] select-none border-r border-[#2d2d2d] overflow-y-hidden flex-none w-[35px]"></pre>
7475

7576
<div id="ed"
76-
class="no-scrollbar flex-1 p-2 text-[#c2c2c2] overflow-y-auto"
77+
class="no-scrollbar flex-1 p-2 text-[#c2c2c2] min-w-0"
7778
aria-label="Python source code editor">
7879
</div>
7980
</div>
8081
</section>
8182

82-
<section aria-label="Output terminal" aria-live="polite" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[30] basis-0 overflow-hidden">
83+
<section aria-label="Output terminal" aria-live="polite" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[30] basis-0 overflow-hidden min-h-0">
8384
<header class="bg-[#1c1c1c] border-b border-[#2d2d2d] px-3 py-2 flex justify-between items-center">
8485
<div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
8586
<h2 class="sr-only">Terminal</h2>
@@ -92,6 +93,29 @@ <h2 class="sr-only">Terminal</h2>
9293
</section>
9394
</main>
9495

96+
<aside data-hide-sm class="bg-[#222222] border border-[#2d2d2d] min-w-[270px] max-w-[370px] w-full rounded-md text-[#c2c2c2] text-[12px] px-3 py-2 flex flex-col h-full">
97+
98+
<div class="flex items-center gap-2 mb-4">
99+
<span>Standard Packages</span>
100+
101+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 ml-auto" aria-hidden="true" focusable="false">
102+
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
103+
<path d="M12 22V12"/>
104+
<polyline points="3.29 7 12 12 20.71 7"/>
105+
<path d="m7.5 4.27 9 5.15"/>
106+
</svg>
107+
</div>
108+
109+
<ul id="pkg-list" class="flex flex-col grow gap-3"></ul>
110+
111+
<footer class="text-center w-full text-xs py-2 mt-4">
112+
<a href="/" target="_blank" class="text-zinc-500 underline">
113+
<span>Documentation</span>
114+
</a>
115+
</footer>
116+
117+
</aside>
118+
95119
</body>
96120

97121
</html>

‎demo/main.js‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,48 @@ ed.addEventListener('keydown', (e) => {
175175
}
176176
}, true);
177177

178+
const RELOAD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#1c1c1c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true" focusable="false"><path d="M12 13v8l-4-4"/><path d="m12 21 4-4"/><path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"/></svg>`;
179+
180+
const fetchSvg = async (src) => {
181+
const text = await fetch(src).then(r => r.text()).catch(() => '');
182+
const svg = new DOMParser().parseFromString(text, 'image/svg+xml').querySelector('svg');
183+
if (!svg) return '';
184+
svg.setAttribute('class', 'size-3.5');
185+
svg.setAttribute('aria-hidden', 'true');
186+
svg.setAttribute('focusable', 'false');
187+
return svg.outerHTML;
188+
};
189+
190+
const loadPackages = async () => {
191+
const list = $('pkg-list');
192+
if (!list) return;
193+
194+
const packages = await fetch('./packages.json').then(r => r.json()).catch(() => []);
195+
196+
for (const pkg of packages) {
197+
const iconSvg = await fetchSvg(pkg.icon);
198+
const li = document.createElement('li');
199+
li.className = 'bg-[#1c1c1c] border border-[#2d2d2d] rounded-md w-full';
200+
li.innerHTML = `
201+
<div class="flex items-center">
202+
<div class="px-2 py-2.5">
203+
<h3 class="text-[11.8px]">${pkg.name}</h3>
204+
</div>
205+
<div class="flex items-center gap-2 ml-auto px-1.5">
206+
${iconSvg}
207+
<button disabled aria-label="Reload ${pkg['aria-label']}" class="bg-[#ffffff] p-[3.7px] rounded-full opacity-40 cursor-not-allowed">
208+
${RELOAD_SVG}
209+
</button>
210+
</div>
211+
</div>`;
212+
list.appendChild(li);
213+
}
214+
};
215+
178216
ed.addEventListener('scroll', () => { ln.scrollTop = ed.scrollTop; });
179217

180218
jar.onUpdate(sync);
181219
jar.updateCode(DEFAULT_CODE);
182220

183-
loadWasm();
221+
loadWasm();
222+
loadPackages();

‎demo/packages.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
[
2+
{
3+
"name": "Math",
4+
"icon": "./static/sigma.svg",
5+
"aria-label": "The Math package in Edge Python, providing basic mathematical functions and constants.",
6+
"source": "./packages/math.wasm"
7+
},
8+
{
9+
"name": "Regex",
10+
"icon": "./static/a-letter.svg",
11+
"aria-label": "Regex package in Edge Python, offering regular expression matching operations similar to Python's re module.",
12+
"source": "./packages/re.wasm"
13+
},
14+
{
15+
"name": "Operating System",
16+
"icon": "./static/binary.svg",
17+
"aria-label": "Operating System package in Edge Python, providing a way of using operating system dependent functionality like file and directory operations.",
18+
"source": "./packages/os.wasm"
19+
},
20+
{
21+
"name": "Random",
22+
"icon": "./static/dices.svg",
23+
"aria-label": "Random package in Edge Python, offering functions for generating random numbers and performing random operations.",
24+
"source": "./packages/random.wasm"
25+
}
26+
]

‎demo/static/a-letter.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎demo/static/binary.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎demo/static/dices.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎demo/static/sigma.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎demo/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@
77
}
88

99
#ed {
10+
min-width: 0;
1011
tab-size: 4;
1112
white-space: pre !important;
1213
outline: none;
1314
font-variant-ligatures: none;
1415
overflow-x: auto;
16+
overflow-y: auto;
17+
}
18+
19+
@media (max-width: 1050px) {
20+
aside[data-hide-sm] {
21+
display: none;
22+
}
1523
}
1624

1725
.tk-kw { color: #c586c0; }

0 commit comments

Comments
 (0)