/ concept-collection / minwebide-demo
Sign in
concept-collection / minwebide-demo
minwebide-demo / src / main.ts
49 lines · 1.6 KBCodeBlameHistory
62f426bminwebide demo app: deploys to GitHub PagesJeremy Magland 1import { createIndexedDBFileSystem, createWorkbench, loadBuiltinTheme, registerBuiltinLanguages } from 'minwebide';
2import { demoCustomEditors } from './customEditors';
3import { demoRunners } from './runners';
4import { sampleWorkspace } from './sampleWorkspace';
6/** A sample PNG, generated on the fly, to exercise the binary file path. */
7async function generateSampleImage(): Promise<Uint8Array> {
8 const canvas = document.createElement('canvas');
9 canvas.width = 320;
10 canvas.height = 200;
11 const ctx = canvas.getContext('2d')!;
12 const gradient = ctx.createLinearGradient(0, 0, 320, 200);
13 gradient.addColorStop(0, '#0078d4');
14 gradient.addColorStop(1, '#4ec9b0');
15 ctx.fillStyle = gradient;
16 ctx.fillRect(0, 0, 320, 200);
17 ctx.fillStyle = 'white';
18 ctx.font = 'bold 28px sans-serif';
19 ctx.textAlign = 'center';
20 ctx.fillText('minwebide', 160, 108);
21 const blob = await new Promise<Blob>((resolve, reject) =>
22 canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png'));
23 return new Uint8Array(await blob.arrayBuffer());
26async function main(): Promise<void> {
27 const fs = await createIndexedDBFileSystem({ dbName: 'minwebide-demo' });
28 await fs.seed({
29 ...sampleWorkspace,
30 '/assets/banner.png': await generateSampleImage(),
31 });
33 const theme = await loadBuiltinTheme('dark_modern');
34 await registerBuiltinLanguages(theme);
36 const workbench = createWorkbench(document.getElementById('app')!, {
37 fileSystem: fs,
38 theme,
39 workspaceName: 'demo workspace',
40 customEditors: demoCustomEditors,
41 });
42 for (const runner of demoRunners) {
43 workbench.registerRunner(runner);
44 }
46 await workbench.openFile(fs.root.with({ path: '/README.md' }));
49main();
moveopenescclose