Add Reddit with its comment threads, and show quoted posts whole
CI / Typecheck, test, build (pull_request) Successful in 9s

Two changes. They share the `Segment` model, which is why they arrive
together.

## Reddit

A new adapter under /reddit, plus the thread beneath the post -- on Reddit the
conversation is usually the reason the link was shared, so a viewer that showed
only the post would be showing the wrong half.

The `.json` twin of a post URL is the post and the whole first page of comments
in one response, far better than anything the page gives up, so it is the only
layer that normally runs. Reddit refuses it to a browser it has never seen and
answers with a JavaScript challenge, which any ordinary navigation solves by
itself; the adapter navigates once and retries, and the cookie left behind
serves every later post. Below that, `shreddit-comment` elements are read from
the rendered page -- flat, each carrying its own `depth`, so `treeFromDepths`
rebuilds the nesting.

`Post.comments` is a tree rather than a flat list with depths, because folding
a comment has to take everything under it along and nesting is what makes that
free. Each comment renders as a `<details open>`, so collapsing works with the
stylesheet off and from the keyboard, and a collapsed one says how many replies
it is hiding. "Collapse all" is the only part that needs the script, so it
ships hidden and appears once the script has run. What sits behind a "load
more" is not fetched -- that is a second page and often a third -- but it is
counted and said out loud rather than quietly dropped.

Four things the payloads got wrong on the first try, each now with a fixture:
`fallback_url` is the video track alone whenever `has_audio` is true, so a post
with sound has to use `hls_url` and only a silent one gets the proxied MP4;
`scrubber_media_url` looks like a poster and is a second MP4 for the timeline
thumbnails, while the still is in `preview.images`; a gallery's pictures live
in `media_metadata` keyed and unordered, with their order only in
`gallery_data`; and `replies` is the string "" rather than an object when there
are none. Comment bodies are Markdown, rendered by a new render/markdown.ts
that escapes first and then puts back only the constructs we chose to support
-- never Reddit's own `body_html`, which would mean trusting markup a stranger
caused to be generated.

An app share link (/r/<sub>/s/<code>) is a plain 301, so one request told not
to follow it is enough. The permalink it resolves to is what the copy button
hands back, since an opaque share code is a tracking parameter by another name.

## Quoted posts

Both X and Bluesky lifted the quoted post's media out and showed it as the
quoter's own, dropping the quoted words and the quoted author entirely. A quote
of a photo post therefore rendered as somebody else's picture under the wrong
name with nothing to say so, and a quote that had a picture of its own dropped
the quoted one instead -- the two could never both appear. Half the quote posts
people share are someone answering a stranger and the other half are someone
continuing a thought from an earlier post; neither reads with only one side of
it on the page.

`Segment.quoted` now carries the whole thing -- author, words, pictures, time
and a link to it -- and renders as a post inside the post. Neither payload
carries a usable address for it: X has no permalink and it is rebuilt from the
handle and `id_str`, Bluesky has an `at://` URI nobody can open and it is
rebuilt from the handle and the record key. On Bluesky the record sits at
`embed.record` for a plain quote and at `embed.record.record` when the quoting
post has media of its own, and a quote can also point at a feed, a list or a
post since deleted, which arrive in the same slot under a different `$type` --
only `app.bsky.embed.record#viewRecord` is taken.

Two things about X's text, both visible on any post and not only a quote. It
arrives pre-escaped, so an ampersand someone typed was reaching the page as the
literal `&amp;`; it is decoded in the adapter, where the encoding comes from,
leaving the escape-on-the-way-out rule alone. And every link is a `t.co`, which
tells the reader nothing and routes them through X's click tracker to find out
-- `entities.urls` carries the real address alongside, so it is put back. The
shortlink X staples onto the end of a quote post is dropped rather than
expanded, since the post it points at is already on the page;
`display_text_range` is where that boundary is and it keeps a link the author
put there deliberately. Its indices are UTF-16 units into the escaped text, so
the slice happens before decoding and before expanding, and splitting to
codepoints first overshoots past an emoji -- checked against a post carrying
one.

A quote is context, and context that fills the screen has stopped being
context, so a segment carrying one gives up the window-filling cap on its own
media.

## Along the way

setupMedia only ever wired `document.querySelector('.media')`, the first rail
on the page. That was already wrong for a Bluesky or Threads chain with media
in more than one post, and a quoted carousel would have hit it too. It now runs
per rail.

## Verified

108 tests, typecheck and build clean. Resolved end to end against the live
platforms: Reddit self, gallery, video, link and share-link posts; X quotes
with no media, with media on the quoted side, and with media on both; Bluesky
quotes in both embed shapes, including a ten-post chain where every post quotes
a different account and all nine quotes come back under the right name.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_017nMQ2eDKnqALYhAibpTKTu
This commit is contained in:
2026-08-27 11:45:40 -03:00
co-authored by Claude Opus 5
parent 361cdbd966
commit 6325f0ff32
28 changed files with 3623 additions and 69 deletions
+46 -4
View File
@@ -1,9 +1,9 @@
# antisocial — working notes
A self-hosted page that shows a social post without the app. StopTheMadness rewrites
links to X, Threads, Instagram, TikTok and Bluesky into `/<prefix>/<original path>`;
this resolves the post by driving a real headless Chromium and renders the media, the
text, a platform badge and a copy-the-original button.
links to X, Threads, Instagram, TikTok, Bluesky and Reddit into
`/<prefix>/<original path>`; this resolves the post by driving a real headless Chromium
and renders the media, the text, a platform badge and a copy-the-original button.
Built for one person on a private network, with no authentication. `README.md` has the
rewrite rules and the user-facing description. This file is the working context.
@@ -35,6 +35,7 @@ different fixes:
| Right media, wrong count | The structured payload was missed and it fell through to the DOM, which only shows the first carousel item. |
| Poster image where a video belongs | Same fall-through, plus the `<video>` had not hydrated when the DOM was read. |
| Nothing at all | The platform refused this specific post logged out, or a key moved. |
| Reddit post fine, no comments | The `.json` was refused and it fell through to the page, where the comment tree loads late. |
**3. Look at what the page actually served.**
@@ -66,6 +67,17 @@ A `Post` is a list of `Segment`s, not a single body. Most platforms produce one
(`oneSegment` in `types.ts`); Bluesky and Threads produce the author's whole chain,
with `isAnchor` marking the post that was linked — which need not be the first.
`Segment.quoted` is a post inside a post — someone else's words and pictures, kept
under their own name. X and Bluesky fill it in. Both used to lift the quoted post's
media out and show it as the quoter's own, which is the bug to avoid reintroducing:
a quoted picture without the name attached to it is a false attribution.
`Post.comments` is a separate thing and a tree, not a chain. Only Reddit fills it in,
because only there is the conversation usually the point of the link. It is a tree
rather than a flat list with depths because folding a comment has to take everything
under it along, and nesting is what makes that free — the renderer emits a `<details>`
per comment and gets collapsing without a line of JavaScript.
Things worth knowing before editing:
- **One Chromium, one context, persistent.** Cookies and dismissed banners accumulate on
@@ -95,8 +107,24 @@ Things worth knowing before editing:
deliberately matches only V1. Threads are built by walking `parent` up and the
author's own `replies` down; `depth`/`parentHeight` are what make that possible, at
the cost of dragging the whole reply tree along (a few hundred KB on a busy post).
A quote fills in `Segment.quoted`. The record sits at `embed.record` for a plain quote
and at `embed.record.record` when the quoting post has media of its own
(`recordWithMedia`) — check both. A quote can also point at a feed, a list or a post
since deleted, which arrive in the same slot under a different `$type`, so only
`app.bsky.embed.record#viewRecord` is accepted. The quoted post's address has to be
rebuilt: `uri` is an `at://` nobody can open.
- **X** — the `platform.twitter.com` embed calls the syndication endpoint; we catch that
response. A quote post carries no media of its own, so the quoted post's media is used.
response. A quote post keeps the post it quotes whole, in `Segment.quoted` — author,
words and pictures — rather than lifting its media out; doing that put someone else's
picture under the quoter's name, and dropped the quoted words entirely. There is no
permalink in the payload, so the quoted post's URL is rebuilt from the handle and
`id_str`. Two things about the text: it arrives pre-escaped (`&amp;`) and has to be
decoded, since everything downstream escapes again on the way out; and X staples a
`t.co` to the quoted post onto the end, which `display_text_range` trims — its indices
are UTF-16 units into the *escaped* text, so slice before decoding and do not split to
codepoints first. Every remaining link is a `t.co`, expanded from `entities.urls`
matched on the shortlink text rather than by `indices`, which are offsets into a string
the expansion is changing the length of.
- **Instagram** — the least reliable. It ships the structured payload only some of the
time, and refuses some posts from the embed entirely ("the link may be broken"). The
DOM is the floor and only ever shows the first carousel item. Reels hydrate their
@@ -106,6 +134,20 @@ Things worth knowing before editing:
carries an `itemStruct`; do not hardcode the key, photo posts use a different one.
Its CDN needs `Referer` *and* cookies. Short `vm.`/`vt.` links arrive as a bare path
segment and are rebuilt in `buildOriginalUrl`.
- **Reddit** — the `.json` twin of any post URL is the whole post plus the first page of
comments in one response, which is far better than anything the page gives up, so that
is the only layer that normally runs. A cold profile gets a JavaScript challenge
instead of JSON; an ordinary navigation solves it by itself, so the adapter navigates
once and retries, and the cookie serves every later post. The floor is
`shreddit-comment` elements, which are flat with a `depth` attribute — `treeFromDepths`
rebuilds the nesting. `replies` is `""` and not an object when there are none.
Video: `fallback_url` is the *video track alone* whenever `has_audio` is true, so a
post with sound has to use `hls_url`, direct and unproxied; a silent one gets the
proxied MP4. `scrubber_media_url` is not a poster — it is a second MP4 for the
timeline thumbnails, and the still is in `preview.images`. A gallery's pictures are in
`media_metadata`, keyed and unordered; their order is only in `gallery_data`. Comment
bodies are Markdown, rendered by `src/render/markdown.ts` — escape first, then put
back the constructs we chose to support, never `body_html`.
- **Threads** — same media schema as Instagram (`src/platforms/meta-media.ts`). Its
payloads are full of empty stub nodes, so the finder only accepts a node with actual
candidates in it. The page ships the linked post, the author's follow-ups, other