a proof of concept realtime collaborative text editor using atproto as a sync server jake.tngl.io/y-pds/
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve styles a bit

+81 -34
+19 -7
app.js
··· 103 103 104 104 render() { 105 105 return html` 106 - <form onSubmit=${e => this.onSubmit(e)}> 107 - <actor-typeahead> 108 - <input name="handle" /> 109 - </actor-typeahead> 110 - <button>log in</button> 111 - <p>Log in with your <a href="https://internethandle.org">Internet handle</a>.</p> 112 - </form> 106 + <div class="login"> 107 + <h1>Yjs via PDS</h1> 108 + <p> 109 + A proof-of-concept collaborative text editor,<br />built with${" "} 110 + <a href="https://yjs.dev">Yjs</a> on top of <a href="https://atproto.com">Atproto</a>. 111 + </p> 112 + <form class="login-form" onSubmit=${e => this.onSubmit(e)}> 113 + <label> 114 + <span>Handle</span> 115 + <actor-typeahead> 116 + <input name="handle" placeholder="example.bsky.social" /> 117 + </actor-typeahead> 118 + </label> 119 + <button>Log in</button> 120 + </form> 121 + <p class="login-blurb"> 122 + Log in with your <a href="https://internethandle.org">Internet handle</a>. 123 + </p> 124 + </div> 113 125 `; 114 126 } 115 127 }
+4 -27
reset.css
··· 34 34 overflow-wrap: break-word; 35 35 } 36 36 37 - :where(ol, ul) { 38 - list-style: none; 39 - } 40 - 41 - :not([class]) { 42 - &:where(h1, h2, h3, h4, h5, h6) { 43 - margin-block: 0.75em; 44 - margin-trim: block; 45 - line-height: 1.25; 46 - text-wrap: balance; 47 - letter-spacing: -0.05ch; 48 - } 49 - 50 - &:where(p, ol, ul) { 51 - margin-block: 1em; 52 - margin-trim: block; 53 - } 54 - 55 - &:where(ol, ul) { 56 - padding-inline-start: 1.5em; 57 - list-style: revert; 58 - } 59 - 60 - &:where(li) { 61 - margin-block: 0.5em; 62 - margin-trim: block; 63 - } 37 + &:where(h1, h2, h3, h4, h5, h6) { 38 + line-height: 1.25; 39 + text-wrap: balance; 40 + letter-spacing: -0.05ch; 64 41 } 65 42 }
+58
style.css
··· 5 5 @import url("https://esm.sh/prosemirror-example-setup/style/style.css"); 6 6 @import url("https://esm.sh/prosemirror-gapcursor/style/gapcursor.css"); 7 7 8 + input, 9 + select, 10 + textarea { 11 + width: 100%; 12 + padding: 0.4rem 0.5rem; 13 + border: 1px solid #ccc; 14 + border-radius: 4px; 15 + font-size: 0.875rem; 16 + background: #fff; 17 + transition: border-color 0.15s; 18 + 19 + &:focus { 20 + outline-offset: 1px; 21 + outline: 2px solid rgba(from blue r g b / 0.5); 22 + } 23 + } 24 + 25 + button { 26 + padding: 0.4rem 0.75rem; 27 + border: 1px solid #ccc; 28 + border-radius: 4px; 29 + background: #fff; 30 + font-size: 0.875rem; 31 + cursor: pointer; 32 + transition: background 0.15s; 33 + 34 + &:hover { 35 + background: #f5f5f5; 36 + } 37 + 38 + &:active { 39 + background: #eee; 40 + } 41 + } 42 + 43 + label { 44 + font-size: 0.75rem; 45 + } 46 + 8 47 html, 9 48 body { 10 49 height: 100%; ··· 34 73 flex: 1; 35 74 display: flex; 36 75 flex-direction: column; 76 + } 77 + 78 + .login { 79 + margin: auto; 80 + text-align: center; 81 + display: flex; 82 + flex-direction: column; 83 + gap: 16px; 84 + } 85 + 86 + .login-form { 87 + display: flex; 88 + flex-direction: column; 89 + gap: 8px; 90 + text-align: left; 91 + } 92 + 93 + .login-blurb { 94 + font-size: 0.75rem; 37 95 } 38 96 39 97 .loading {