A very simple single-file PDS home page to list active users

add loading icon

finxol.io 5207b61a 9bc37269

verified
+61 -2
+41
index.html
··· 38 38 atproto website </a 39 39 >. 40 40 </p> 41 + 42 + <p> 43 + If you'd like to migrate your atproto account to this PDS, 44 + <br class="desktop-only" /> 45 + feel free to 46 + <a 47 + href="https://bsky.app/profile/did:plc:hpmpe3pzpdtxbmvhlwrevhju" 48 + >DM me on Bluesky</a 49 + > 50 + or 51 + <a href="mailto:contact@finxol.io">send me an email</a>. 52 + </p> 41 53 </main> 42 54 43 55 <section class="users"> 44 56 <h3>Users</h3> 45 57 58 + <noscript> 59 + To view the list of accounts hosted on this PDS, please activate 60 + Javascript. 61 + </noscript> 62 + 46 63 <p>No users found on this PDS</p> 64 + 65 + <svg 66 + width="24" 67 + height="24" 68 + viewBox="0 0 24 24" 69 + xmlns="http://www.w3.org/2000/svg" 70 + id="users__spinner" 71 + > 72 + <style> 73 + .spinner_P7sC { 74 + transform-origin: center; 75 + animation: spinner_svv2 0.75s infinite linear; 76 + } 77 + @keyframes spinner_svv2 { 78 + 100% { 79 + transform: rotate(360deg); 80 + } 81 + } 82 + </style> 83 + <path 84 + d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" 85 + class="spinner_P7sC" 86 + /> 87 + </svg> 47 88 </section> 48 89 </body> 49 90
+8 -2
src/main.ts
··· 5 5 6 6 let cleared = false 7 7 8 + const spinner = document.getElementById("users__spinner") 9 + 8 10 const list = document.createElement("div") 9 11 for (const user of users) { 10 12 if (!user.active) { ··· 35 37 36 38 37 39 const doc = document.querySelector("section.users") 38 - //biome-ignore lint/style/noNonNullAssertion: it's fine 39 - doc!.appendChild(list) 40 + if (!doc) { 41 + throw new Error("Could not find section.users") 42 + } 43 + doc.appendChild(list) 44 + 45 + spinner?.remove()
+12
src/style.css
··· 86 86 } 87 87 } 88 88 } 89 + 90 + /* hide by default */ 91 + .desktop-only { 92 + display: none; 93 + } 94 + 95 + /* When the screen is 768px or wider, show it */ 96 + @media (min-width: 768px) { 97 + .desktop-only { 98 + display: initial; 99 + } 100 + }