burrito.space
experiments in a post-browser web
burrito.tngl.sh
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Chain Editor</title>
8
9 <!-- Import map for CodeMirror -->
10 <script type="importmap">
11 {
12 "imports": {
13 "@codemirror/state": "peek://node_modules/@codemirror/state/dist/index.js",
14 "@codemirror/view": "peek://node_modules/@codemirror/view/dist/index.js",
15 "@codemirror/commands": "peek://node_modules/@codemirror/commands/dist/index.js",
16 "@codemirror/language": "peek://node_modules/@codemirror/language/dist/index.js",
17 "@codemirror/autocomplete": "peek://node_modules/@codemirror/autocomplete/dist/index.js",
18 "@codemirror/lang-markdown": "peek://node_modules/@codemirror/lang-markdown/dist/index.js",
19 "@codemirror/lang-html": "peek://node_modules/@codemirror/lang-html/dist/index.js",
20 "@codemirror/lang-css": "peek://node_modules/@codemirror/lang-css/dist/index.js",
21 "@codemirror/lang-javascript": "peek://node_modules/@codemirror/lang-javascript/dist/index.js",
22 "@codemirror/theme-one-dark": "peek://node_modules/@codemirror/theme-one-dark/dist/index.js",
23 "@codemirror/search": "peek://node_modules/@codemirror/search/dist/index.js",
24 "@replit/codemirror-vim": "peek://node_modules/@replit/codemirror-vim/dist/index.js",
25 "@lezer/common": "peek://node_modules/@lezer/common/dist/index.js",
26 "@lezer/highlight": "peek://node_modules/@lezer/highlight/dist/index.js",
27 "@lezer/lr": "peek://node_modules/@lezer/lr/dist/index.js",
28 "@lezer/markdown": "peek://node_modules/@lezer/markdown/dist/index.js",
29 "@lezer/html": "peek://node_modules/@lezer/html/dist/index.js",
30 "@lezer/css": "peek://node_modules/@lezer/css/dist/index.js",
31 "@lezer/javascript": "peek://node_modules/@lezer/javascript/dist/index.js",
32 "crelt": "peek://node_modules/crelt/index.js",
33 "style-mod": "peek://node_modules/style-mod/src/style-mod.js",
34 "w3c-keyname": "peek://node_modules/w3c-keyname/index.js",
35 "@marijn/find-cluster-break": "peek://node_modules/@marijn/find-cluster-break/src/index.js"
36 }
37 }
38 </script>
39
40 <style>
41 @import url('peek://theme/variables.css');
42
43 html, body {
44 margin: 0;
45 padding: 0;
46 height: 100%;
47 width: 100%;
48 background-color: color-mix(in srgb, var(--base00) 98%, transparent);
49 font-family: var(--theme-font-sans);
50 color: var(--theme-text, #333);
51 overflow: hidden;
52 display: flex;
53 flex-direction: column;
54 border-radius: 8px;
55 }
56
57 #editor-container {
58 flex: 1;
59 min-height: 0;
60 overflow: hidden;
61 position: relative;
62 }
63
64 #editor-container .cm-editor {
65 height: 100%;
66 }
67
68 #editor-container .cm-scroller {
69 overflow: auto;
70 }
71
72 #status-line {
73 flex-shrink: 0;
74 }
75
76 #status-line .vim-status-line {
77 border-radius: 0 0 8px 8px;
78 }
79 </style>
80 </head>
81 <body>
82 <div id="editor-container"></div>
83 <div id="status-line"></div>
84
85 <script type="module" src="./chain-editor.js"></script>
86 </body>
87</html>