Mobile-first prototypes for a weekly digest of the most-engaged-with posts across four AI subreddits plus the AI timeline on X. The same content renders in all three, so what you are comparing is the treatment, not the copy.
Live: https://flaviusapop.github.io/ai-digest/
Every page is a single self-contained file — open any of them directly in a browser, no build step, no network calls except Google Fonts.
| Longwave | Quarto | Drift | |
|---|---|---|---|
| Archive model | Latest issue is the homepage | Homepage is the shelf of back issues | One endless feed, sticky week headers |
| Open / close / next | Accordion + fixed "Channel 3/5" dock | Page turn, one community per screen | Never leaves the scroll; floating Menu + per-community fold |
| Signature | Engagement drawn as signal amplitude, at three scales | Issue spine whose band length is engagement volume | Density strip that doubles as a position indicator |
| Palette | Green-black + brass | Paper white + ink blue | Monochrome, one hue per community |
| Type | Familjen Grotesk / Instrument Sans / Martian Mono | Literata / Wix Madefor Text | Chivo / Sometype Mono |
| Scales past ~10 communities | Rail gets long | Well — contents page absorbs it | Well — Contents sheet absorbs it |
One issue is Week → Community → 10 posts + 10 comments, where the two lists are
ranked independently. Every community carries a generated paragraph on what it
argued about that week, and every post carries two key points.
src/_data.js holds the whole issue (ISSUE) and the back-issue index
(ARCHIVE). It is the only place content lives; all three designs render from it.
The content here is synthetic. Week 34, 2026 sample data — plausible in shape and length, with invented usernames and handles. It is not a real digest and no real person's posts are reproduced.
./build.sh # inlines src/_data.js into each design, writes to repo root, runs checks
python check.py # markup + CSS + theme-token checkscheck.py verifies balanced tags, balanced CSS braces, no flow content illegally
nested inside <button>, that every colour token is defined on the bare :root
(so neither theme can render one theme's text on the other theme's ground), and
that the compact-mode rule is present.
- Lists, not cards. Every high-signal aggregator (Hacker News, Lobsters, Sidebar) uses lists; card grids with thumbnails are what newsletter marketing archives use. Reddit and X thumbnails are missing or useless anyway.
- Metadata at ~0.7x the title size, one grey, one line — lifted from Hacker News' 10pt/7pt ratio. It is why a 30-item page never feels heavy.
- Key points on by default, with a Compact toggle that strips back to the dense title-and-metrics scan. The toggle only ever hides, so content is never gated behind JavaScript.
- Tombstone rows. Reddit's public content policy obliges you to stop displaying a post once it is deleted. Removed posts render as a greyed row that keeps the rank and score but drops the text, so archived issues do not develop holes. Architecturally: cache title, score, permalink and subreddit — never body text.
- No iframe embeds. One
widgets.jsplus N iframes per issue is a Core Web Vitals disaster on a mobile feed. Re-render natively with attribution and a link back to the original. - No
backdrop-filteron sticky headers. Measured at a 15–30% frame-rate cost on real devices, and a sticky bar over a scrolling feed is the worst place to pay it. - Horizontal rails use
overflow-x:autowith gradient edge masks, the pattern Lobsters uses for its mobile nav — about twenty lines of CSS and no JavaScript.
- The typefaces are placeholders. All three pair faces off Google Fonts. They are not the tired defaults, but for a real launch the display face should be licensed — it is the single biggest lift available.
- Drift shows one real week. Weeks 33–27 render as headers only; inventing seven more weeks of posts would not have told us anything about the design.
- No backend. The subscribe forms confirm locally and send nothing.