the statusphere demo reworked into a vite/react app in a monorepo
0
fork

Configure Feed

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

Finish the UI

+58 -59
+17 -52
src/pages/home.ts
··· 65 65 <button type="submit">Log out</button> 66 66 </div> 67 67 </form>` 68 - : html`<p><a href="/login">Log in</a> to set your status!</p>`} 68 + : html`<div class="session-form"> 69 + <div><a href="/login">Log in</a> to set your status!</div> 70 + <div> 71 + <a href="/login" class="button">Log in</a> 72 + </div> 73 + </div>`} 69 74 </div> 70 - <div class=""> 71 - <div class="status-options"> 72 - ${STATUS_OPTIONS.map( 73 - (status) => 74 - html`<div class="status-option" data-value="${status}"> 75 - ${status} 76 - </div>` 77 - )} 78 - </div> 79 - </div> 80 - <div class="status-line no-line"> 81 - <div class="status">👍</div> 82 - <div class="desc"> 83 - <a class="author" href="/">@pfrazee.com</a> 84 - is feeling 👍 on Aug 12, 2024 85 - </div> 86 - </div> 87 - <div class="status-line"> 88 - <div class="status">👍</div> 89 - <div class="desc"> 90 - <a class="author" href="/">@pfrazee.com</a> 91 - is feeling 👍 on Aug 12, 2024 92 - </div> 93 - </div> 94 - <div class="status-line"> 95 - <div class="status">👍</div> 96 - <div class="desc"> 97 - <a class="author" href="/">@pfrazee.com</a> 98 - is feeling 👍 on Aug 12, 2024 99 - </div> 100 - </div> 101 - <div class="status-line"> 102 - <div class="status">👍</div> 103 - <div class="desc"> 104 - <a class="author" href="/">@pfrazee.com</a> 105 - is feeling 👍 on Aug 12, 2024 106 - </div> 107 - </div> 108 - <div class="status-line"> 109 - <div class="status">👍</div> 110 - <div class="desc"> 111 - <a class="author" href="/">@pfrazee.com</a> 112 - is feeling 👍 on Aug 12, 2024 113 - </div> 114 - </div> 115 - <div class="status-line"> 116 - <div class="status">👍</div> 117 - <div class="desc"> 118 - <a class="author" href="/">@pfrazee.com</a> 119 - is feeling 👍 on Aug 12, 2024 120 - </div> 75 + <div class="status-options"> 76 + ${STATUS_OPTIONS.map( 77 + (status) => 78 + html`<div 79 + class="status-option" 80 + data-value="${status}" 81 + data-authed=${profile ? '1' : '0'} 82 + > 83 + ${status} 84 + </div>` 85 + )} 121 86 </div> 122 87 ${statuses.map((status, i) => { 123 88 const handle = didHandleMap[status.authorDid] || status.authorDid
+16 -5
src/pages/login.ts
··· 12 12 13 13 function content({ error }: Props) { 14 14 return html`<div id="root"> 15 - <form action="/login" method="post"> 16 - <input type="text" name="handle" placeholder="handle" required /> 17 - <button type="submit">Log in.</button> 18 - ${error ? html`<p>Error: <i>${error}</i></p>` : undefined} 19 - </form> 15 + <div id="header"> 16 + <h1>Statusphere</h1> 17 + <p>Set your status on the Atmosphere.</p> 18 + </div> 19 + <div class="container"> 20 + <form action="/login" method="post" class="login-form"> 21 + <input 22 + type="text" 23 + name="handle" 24 + placeholder="Enter your handle (eg alice.bsky.social)" 25 + required 26 + /> 27 + <button type="submit">Log in</button> 28 + ${error ? html`<p>Error: <i>${error}</i></p>` : undefined} 29 + </form> 30 + </div> 20 31 </div>` 21 32 }
+6
src/public/home.js
··· 1 1 Array.from(document.querySelectorAll('.status-option'), (el) => { 2 2 el.addEventListener('click', async (ev) => { 3 3 setError('') 4 + 5 + if (el.dataset.authed !== '1') { 6 + window.location = '/login' 7 + return 8 + } 9 + 4 10 const res = await fetch('/status', { 5 11 method: 'POST', 6 12 headers: { 'content-type': 'application/json' },
+19 -2
src/public/styles.css
··· 43 43 /* 44 44 Common components 45 45 */ 46 - button { 46 + button, .button { 47 + display: inline-block; 47 48 border: 0; 48 49 background-color: var(--primary-500); 49 50 border-radius: 50px; 50 51 color: #fff; 51 52 padding: 2px 10px; 52 53 cursor: pointer; 54 + text-decoration: none; 53 55 } 54 - button:hover { 56 + button:hover, .button:hover { 55 57 background: var(--primary-400); 56 58 } 57 59 ··· 106 108 flex-direction: row; 107 109 align-items: center; 108 110 justify-content: space-between; 111 + } 112 + 113 + .login-form { 114 + display: flex; 115 + flex-direction: row; 116 + gap: 6px; 117 + border: 1px solid var(--border-color); 118 + border-radius: 6px; 119 + padding: 10px 16px; 120 + background-color: #fff; 121 + } 122 + 123 + .login-form input { 124 + flex: 1; 125 + border: 0; 109 126 } 110 127 111 128 .status-options {