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

add loading icon

finxol.io 5207b61a 9bc37269

verified
Changed files
+61 -2
src
+41
index.html
···
atproto website </a
>.
</p>
</main>
<section class="users">
<h3>Users</h3>
<p>No users found on this PDS</p>
</section>
</body>
···
atproto website </a
>.
</p>
+
+
<p>
+
If you'd like to migrate your atproto account to this PDS,
+
<br class="desktop-only" />
+
feel free to
+
<a
+
href="https://bsky.app/profile/did:plc:hpmpe3pzpdtxbmvhlwrevhju"
+
>DM me on Bluesky</a
+
>
+
or
+
<a href="mailto:contact@finxol.io">send me an email</a>.
+
</p>
</main>
<section class="users">
<h3>Users</h3>
+
<noscript>
+
To view the list of accounts hosted on this PDS, please activate
+
Javascript.
+
</noscript>
+
<p>No users found on this PDS</p>
+
+
<svg
+
width="24"
+
height="24"
+
viewBox="0 0 24 24"
+
xmlns="http://www.w3.org/2000/svg"
+
id="users__spinner"
+
>
+
<style>
+
.spinner_P7sC {
+
transform-origin: center;
+
animation: spinner_svv2 0.75s infinite linear;
+
}
+
@keyframes spinner_svv2 {
+
100% {
+
transform: rotate(360deg);
+
}
+
}
+
</style>
+
<path
+
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"
+
class="spinner_P7sC"
+
/>
+
</svg>
</section>
</body>
+8 -2
src/main.ts
···
let cleared = false
const list = document.createElement("div")
for (const user of users) {
if (!user.active) {
···
const doc = document.querySelector("section.users")
-
//biome-ignore lint/style/noNonNullAssertion: it's fine
-
doc!.appendChild(list)
···
let cleared = false
+
const spinner = document.getElementById("users__spinner")
+
const list = document.createElement("div")
for (const user of users) {
if (!user.active) {
···
const doc = document.querySelector("section.users")
+
if (!doc) {
+
throw new Error("Could not find section.users")
+
}
+
doc.appendChild(list)
+
+
spinner?.remove()
+12
src/style.css
···
}
}
}
···
}
}
}
+
+
/* hide by default */
+
.desktop-only {
+
display: none;
+
}
+
+
/* When the screen is 768px or wider, show it */
+
@media (min-width: 768px) {
+
.desktop-only {
+
display: initial;
+
}
+
}