Ionosphere.tv
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
+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)