funny javascript-optional bluesky web frontend

https://anartia.kelinci.net/did:plc:z72i7hdynmk6r22z27h6tvur

@bsky.app — Anartia

i want to get the video player working, i'll just have to figure out how to vendor hls.js

i think the right approach might just be to:

  • have a CSR-rendered page where it's just the video player taking up the whole page
  • when JS is disabled, show a banner indicating that it's required for HLS playback, but make the thumbnail a link to that video player page (not sure, but it might be good for archived pages)
  • when JS is loaded, intercept clicks to that link, replace it with an iframe

this solves my problem of trying to vendor HLS.js.

see, the way I've made these pages have minimal JavaScript is that I've purposefully disabled SvelteKit's client-side rendering functionality. (I've also heavily modified SvelteKit's build output to get rid of those <!-- --> HTML comments serving as hydration markers, we don't need those.)

to get sprinkles of interactivity (e.g. relative time, I think they're useful), I have a wrapper component that adds in <script> elements that link to JS snippets placed in the static assets directory.

I could get HLS.js to work, but I'd need to have a separate esbuild step that would vendor the library as a single file, where I could then consume as a JS snippet.

yeah I'm not gonna do that.

almost went for Alpine.js for interactivity, could also go for rini's Anguish.js since it's smaller and does mostly what I want, but honestly a lot of these interactivity is pretty simple atm ^-^
don't think there's any way to make banners not so bright is there, short of like, darkening it and undarkening it on hover (which seems like a bad idea)
flattened threading...
content blurring is here, so i'm doing feeds next so i can get to the home page (it'd just show a search box, don't worry, i just want to have links to discover feed so you can quickly check what's up on bluesky)
feeds! i'll do home page once i'm off work
(media blurred as it contains US politics)

i'd need to do proper error handling tbh, right now no errors are being handled, so things like viewing a feed requiring authentication will pretty much blast your eyes with a white 500 error page

it'd be nice if i got around to rewriting atcute/client such that it would return errors as values rather than exception, but alas

added some sort of error handling, and i've also added a <link rel=alternate> tag that links to the record's at-uri

who knows if the latter is useful but it should now be easier to link to other tools if you wanna

https://anartia.kelinci.net/
home, search, trending page pretty much knocked out

next is user lists and rss feeds...

Anartia

JavaScript-optional public web frontend for Bluesky.

realizing i should've probably had canonical pointing to bsky.app and not itself
not sure about adding RSS feeds for Bluesky's custom feeds yet, should I? I think I should just leave it up for later and only do profiles and lists

Bluesky's AppView mysteriously hides replies when unauthenticated for whatever reason, even when it's within the <200 limit (bc they designed the endpoint with no pagination) and there's no block relationship or gating going on

edit: turns out they were in the middle of migration and it broke stuff

made use of Constellation (https://constellation.microcosm.blue) to get around it and it works pretty well

Hello! — Constellation

Constellation is a self-hosted JSON API to an atproto-wide index of PDS record back-links. You can use it to query social interactions in real time.

I severely limited the amount of direct replies fetched at a time (10) just to not cause any unnecessary load to Constellation, honestly would be great if some other entity spins up an AppView that is written from scratch

i added rss feeds for profiles, add /rss if your reader doesn't detect it ig

https://anartia.kelinci.net/bsky.app/rss

i did a slight goof and it's ordered slightly wrong so you'll have to wait tomorrow for that

still haven't done lists, pretty much been polishing other parts of the site

anyway, it's pretty good for a one-off link that you share to your friends (that aren't on bluesky)

i think the blocking time is from the timestamp formatter, but that's optional (you'd just get time in UTC instead of local timezone)
@mary_ext In most cases brightening things on hover is a hint that the thing can be clicked for some further action so... probably best to not do that?