Ionosphere.tv
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

docs: conference discussion page design spec

Curated multi-column layout for conference-wide Bluesky discussion.
Sections: top posts, recaps & blog posts, videos & VOD sites.
Wider search across 20+ VOD domains, OG metadata for blogs,
talk matching via URL/speaker/keyword.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+138
+138
docs/superpowers/specs/2026-04-12-conference-discussion-design.md
··· 1 + # Conference Discussion Page 2 + 3 + A curated, high-density overview of what people said about ATmosphereConf 2026 — top posts, recaps & blog posts, follow-up videos, and VOD sites. Displayed in tight responsive columns matching the concordance index style. 4 + 5 + ## Layout 6 + 7 + Multi-column greedy-fill layout (same as `IndexContent.tsx`). Content flows across columns naturally. Sections act as dividers within the flow. 8 + 9 + **Left nav**: Section shortcuts (T/R/V) for quick jumping, like the letter nav on the concordance. 10 + 11 + **Filter bar**: At the top, filter pills to show all or just one medium: 12 + - All (default) 13 + - Top Posts 14 + - Recaps & Blog Posts 15 + - Videos & VOD Sites 16 + 17 + Plus a text filter input for searching within visible items. 18 + 19 + **Right panel**: Click any post that has an associated talk → opens the talk video + transcript in a slide-out panel (same pattern as concordance click-to-play). 20 + 21 + ## Sections 22 + 23 + ### Top Posts 24 + 25 + All conference mentions sorted by likes (descending). Each item: 26 + - 14px avatar + handle + like count (inline) 27 + - Post text (1-2 lines, truncated) 28 + - Talk link → (if matched to a talk) + "View on Bluesky ↗" 29 + 30 + ### Recaps & Blog Posts 31 + 32 + Posts containing links to blog/article domains, identified by facet URIs. Each item: 33 + - Avatar + handle + like count 34 + - Post text or OG title (prefer OG title when available) 35 + - Domain link ↗ (green accent) 36 + - Talk link → (if matched by speaker mentions) 37 + 38 + OG metadata (title, description) fetched at index time and stored. No images — just title + domain to keep it tight. 39 + 40 + ### Videos & VOD Sites 41 + 42 + Posts linking to video platforms. Each item: 43 + - Avatar + handle + like count 44 + - Post text 45 + - Video link ↗ (purple accent) 46 + - Talk link → (if matched) 47 + 48 + Plus a compact pill directory of all VOD JAM sites as clickable external links. 49 + 50 + ### Stats Card 51 + 52 + Aggregate numbers: total posts, blog recaps, VOD sites, unique people. 53 + 54 + ## Data 55 + 56 + ### Wider search (fetch script extension) 57 + 58 + Extend `fetch-mentions.mjs` with a new phase that searches for: 59 + 60 + **Blog/recap posts:** 61 + - `q: "atmosphereconf recap"`, `q: "atmosphereconf wrote"`, `q: "atmosphereconf takeaway"`, `q: "atmosphereconf writeup"` 62 + - `q: "atmosphere"` with `author:` for known community writers 63 + 64 + **VOD/video posts:** 65 + - `domain:` searches for each known VOD site: 66 + - stream.place, vods.sky.boo, vod.atverkackt.de, ionosphere.tv, atmosphereconf-vods.wisp.place, rpg.actor, vod.j4ck.xyz, atmosphere-vods.j4ck.xyz, atmosphereconf-tv.btao.org, stream-bsky.pages.dev, sites.wisp.place, vods.ajbird.net, streamhut.wisp.place, conf-vods.wisp.place, aetheros.computer, atmo.rsvp, atmosphereconf.org, youtube.com (with atmosphere keywords) 67 + 68 + **ionosphere.tv links:** 69 + - `domain: ionosphere.tv` — already done, can extract talk rkey from URL 70 + 71 + ### New fields in mentions table 72 + 73 + Add `content_type` column: `post` | `blog` | `video` | `vod_site` 74 + 75 + Add `external_url` column: the primary external link from facets (blog URL, VOD URL). 76 + 77 + Add `og_title` column: OG metadata title fetched from external URL (nullable). 78 + 79 + ### Talk matching 80 + 81 + 1. **Direct URL match**: If post links to `ionosphere.tv/talks/RKEY`, match directly 82 + 2. **Speaker mention match**: If post @-mentions a speaker, match to their talks (prefer talks during the post's time window) 83 + 3. **Keyword match**: If post text contains a talk title (fuzzy), match to that talk 84 + 85 + Store matched `talk_uri` on the mention row. 86 + 87 + ### OG metadata fetching 88 + 89 + For blog/recap posts with external URLs, fetch the page and extract `<meta property="og:title">` and `<meta property="og:description">`. Store in `og_title` column. Skip if fetch fails — text from the Bluesky post is the fallback. 90 + 91 + ## API 92 + 93 + ### `tv.ionosphere.getDiscussion` 94 + 95 + Returns all discussion items grouped by content_type, sorted by likes within each group. 96 + 97 + ``` 98 + GET /xrpc/tv.ionosphere.getDiscussion 99 + ``` 100 + 101 + Response: 102 + ```json 103 + { 104 + "posts": [...], // content_type = 'post', sorted by likes desc 105 + "blogs": [...], // content_type = 'blog' 106 + "videos": [...], // content_type = 'video' or 'vod_site' 107 + "vodSites": [...], // unique VOD site domains as strings 108 + "stats": { "totalPosts": N, "blogCount": N, "vodSiteCount": N, "uniqueAuthors": N } 109 + } 110 + ``` 111 + 112 + Each item includes: uri, author_handle, author_display_name, author_avatar_url, text, likes, reposts, external_url, og_title, talk_rkey, talk_title, content_type. 113 + 114 + ## Frontend 115 + 116 + ### Route: `/discussion` 117 + 118 + New Next.js page at `apps/ionosphere/src/app/discussion/page.tsx`. 119 + 120 + ### Component: `DiscussionContent.tsx` 121 + 122 + Based on the concordance `IndexContent.tsx` pattern: 123 + - Greedy column-fill with section headers as flow items 124 + - Filter bar (medium pills + text search) 125 + - Section nav sidebar 126 + - Click-to-play right panel for talk associations 127 + - Mobile: single column with progressive rendering 128 + 129 + ### Nav update 130 + 131 + Add "Discussion" link to the site nav in `layout.tsx`. 132 + 133 + ## Not in scope 134 + 135 + - Real-time updates 136 + - Editing/curating items manually 137 + - Full OG card with images (just title + domain) 138 + - Comment/reply threading on the discussion page (that's on the talk page)