A very simple single-file PDS home page to list active users
1import { getAvatar, getUsers, resolveAliases } from "./atproto" 2 3 4const users = await getUsers() 5 6let cleared = false 7 8const list = document.createElement("div") 9for (const user of users) { 10 if (!user.active) { 11 continue; 12 } 13 14 if (!cleared) { 15 document.querySelector("section.users > p")?.remove() 16 cleared = true 17 } 18 19 const handleElement = document.createElement("div") 20 handleElement.textContent = user.did 21 22 const handle = (await resolveAliases(user.did))?.at(0)?.replace("at://", "") || user.did 23 24 const container = document.createElement("div") 25 container.innerHTML = ` 26 <img src="${await getAvatar(user.did)}" alt="${handle}" /> 27 <div class="info"> 28 <a href="https://pdsls.dev/at://${user.did}" class="handle" target="_blank"> 29 ${handle} 30 </a> 31 </div> 32 ` 33 list.appendChild(container) 34} 35 36 37const doc = document.querySelector("section.users") 38//biome-ignore lint/style/noNonNullAssertion: it's fine 39doc!.appendChild(list)