1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>atlibs editor</title>
<script type="importmap">
{
"imports": {
"@atproto/oauth-client-browser": "https://esm.sh/@atproto/oauth-client-browser@0.5.14",
"@atproto/lexicon": "https://esm.sh/@atproto/lexicon@0.7.17",
"@publicdomainrelay/atlibs/": "https://cdn.jsdelivr.net/npm/@publicdomainrelay/atlibs@0.3.0/src/",
"codemirror": "https://esm.sh/codemirror@6.0.2?deps=@codemirror/state@6.7.6,@codemirror/view@6.43.15,@codemirror/language@6.13.1",
"@codemirror/lang-json": "https://esm.sh/@codemirror/lang-json@6.0.2?deps=@codemirror/state@6.7.6,@codemirror/view@6.43.15,@codemirror/language@6.13.1"
}
}
</script>
<style>
:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; max-width: 72rem; margin: 1rem auto; padding: 0 1rem; }
form { margin: 0.5rem 0; }
input[name=ref] { width: 28rem; max-width: 100%; }
#editor { border: 1px solid #8888; }
#editor .cm-editor { height: 24rem; }
#status, #out { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 0.9rem; }
.error { color: #c33; }
table { border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1rem; }
th, td { border: 1px solid #8884; padding: 0.15rem 0.4rem; text-align: left; vertical-align: top; }
td { word-break: break-all; }
tr.added { opacity: 0.65; font-style: italic; }
textarea { width: 28rem; max-width: 100%; height: 4rem; font-family: ui-monospace, monospace; }
</style>
<script type="module" src="./main.js"></script>
<h1>atlibs editor</h1>
<p><a id="source" href="https://knotless.dev/johnandersen777.bsky.social/atlibs-web-editor-ui">Source</a></p>
<form id="login" hidden><input name="handle" placeholder="you.bsky.social" required> <button>Sign in</button></form>
<p id="who" hidden><span></span> <button type="button" id="logout">Sign out</button></p>
<form id="open"><input name="ref" placeholder="handle/composition or at://…" required> <button>Open</button> <button type="button" id="example">Example</button></form>
<p id="opened"></p>
<div id="editor"></div>
<p id="status"></p>
<form id="add"><input name="ref" placeholder="handle/module or at://…" required> <input name="name" placeholder="instance name"> <button>Add module</button></form>
<form id="publish"><input name="rkey" placeholder="rkey" required> <button>Publish</button></form>
<form id="bind">
<input name="repo" placeholder="knotless repo name, or self" required> <button>Bind to knotless repo</button><br>
<textarea name="inputs" aria-label="inputs">{}</textarea>
</form>
<p id="out"></p>
<section id="summary"></section>
