A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Add design: switch Bluesky view-links to mu.social + 🌀 icon
author
Jeremy Herve
date
(Jun 19, 2026, 10:20 AM +0200)
commit
144f33fb
144f33fb0d49b027ea1660ef7db63a345643a2c2
parent
d13088ad
d13088addfd1102a1de6416c2e37437e533b475c
+115
+115
docs/superpowers/specs/2026-06-19-atmosphere-view-links-design.md
+115
docs/superpowers/specs/2026-06-19-atmosphere-view-links-design.md
···
1
+
# Switch Bluesky view-links to mu.social + 🌀 icon
2
+
3
+
**Date:** 2026-06-19
4
+
**Status:** Approved (design)
5
+
6
+
## Problem
7
+
8
+
SkyPress sends readers to `bsky.app` to view profiles, posts, and hashtags, and
9
+
marks those links with a Bluesky butterfly icon. We want those *view* links to
10
+
point at `mu.social` (an alternative AT Protocol AppView, e.g.
11
+
`https://mu.social/profile/skypress.blog`) and to mark them with the `🌀` emoji
12
+
instead of the butterfly.
13
+
14
+
This only concerns where we send a reader to *view* something. SkyPress still
15
+
publishes to the Bluesky/atproto network exactly as before.
16
+
17
+
## Scope
18
+
19
+
### In scope — view-links move to `mu.social`
20
+
21
+
| Place | File | Today |
22
+
|---|---|---|
23
+
| Author profile `@handle` link | `src/pages/[author]/index.astro` | `bsky.app/profile/<handle>` |
24
+
| Bio `@mention` links | `src/lib/reader/rich-text.ts` | `bsky.app/profile/<handle>` |
25
+
| Bio `#hashtag` links | `src/lib/reader/rich-text.ts` | `bsky.app/hashtag/<tag>` |
26
+
| Editor mention autocomplete (stored in content) | `src/lib/editor/mention-autocompleter.ts` | `bsky.app/profile/<handle>` |
27
+
| Post "view" links | `src/lib/social/records.ts` (`bskyPostWebUrl`) | `bsky.app/profile/<did>/post/<rkey>` |
28
+
| "Create an account" link | `src/components/SignInPanel.tsx` | `https://bsky.app` |
29
+
30
+
`mu.social` is a Bluesky AppView client and uses the same path scheme
31
+
(`/profile/<id>`, `/profile/<did>/post/<rkey>`, `/hashtag/<tag>`). The profile
32
+
path is confirmed live; the post/hashtag paths are the standard AppView scheme
33
+
and will be verified with a real link during the smoke test.
34
+
35
+
### Out of scope — deliberately unchanged
36
+
37
+
- `public.api.bsky.app` API calls (actor lookup in `src/lib/landing/actor-lookup.ts`,
38
+
interaction counts in `src/lib/social/interactions.ts`). mu.social does not serve
39
+
that data API.
40
+
- Network/protocol descriptions: "publishing creates a public Bluesky post", the
41
+
`app.bsky.feed.post` lexicon record on `src/pages/lexicon.astro`, unpublish
42
+
warnings, and publish-disclosure copy. These describe the real atproto/Bluesky
43
+
network and stay accurate.
44
+
- **Existing published articles** keep the `bsky.app` mention links already stored
45
+
in their document HTML. We do not rewrite saved content; only newly authored
46
+
mentions get `mu.social` links.
47
+
48
+
## Architecture
49
+
50
+
Introduce a single dependency-free helper module so the host lives in one place
51
+
and is safe to import from the reader path (no `@wordpress/*`):
52
+
53
+
```ts
54
+
// src/lib/social/atmosphere-url.ts
55
+
export const ATMOSPHERE_WEB_BASE = 'https://mu.social';
56
+
export function atmosphereProfileUrl( identifier: string ): string; // handle or DID
57
+
export function atmospherePostWebUrl( atUri: string ): string; // at:// → web URL
58
+
export function atmosphereHashtagUrl( tag: string ): string;
59
+
```
60
+
61
+
- `atmospherePostWebUrl` absorbs the existing `bskyPostWebUrl` logic (parses
62
+
`at://<did>/app.bsky.feed.post/<rkey>`, falls back to `ATMOSPHERE_WEB_BASE` on an
63
+
unparseable URI). `bskyPostWebUrl` is removed and its one caller
64
+
(`src/components/PostActions.tsx`) updated.
65
+
- All six call sites switch to these helpers.
66
+
67
+
### Critical coupling
68
+
69
+
`src/lib/publish/mentions.ts` (`PROFILE_RE`) parses stored mention `href`s to
70
+
decide who gets cc'd on the companion Bluesky post. Because the editor will now
71
+
insert `mu.social` hrefs, this regex MUST match both hosts, or mentions silently
72
+
stop being cc'd. Widen it to accept `bsky.app` **and** `mu.social` (this also keeps
73
+
already-saved drafts working).
74
+
75
+
## Wording
76
+
77
+
Link labels / aria-labels that say "Bluesky" become **"the ATmosphere"**:
78
+
79
+
- `src/components/PostActions.tsx`: "View this post on Bluesky" → "View this post on
80
+
the ATmosphere"; "View on Bluesky" → "View on the ATmosphere".
81
+
- `src/pages/[author]/index.astro`: aria-label "View @handle on Bluesky" → "View
82
+
@handle on the ATmosphere".
83
+
- `src/components/SignInPanel.tsx`: "Create one on Bluesky" and its aria-label →
84
+
"…on the ATmosphere".
85
+
86
+
Disclosure / network text stays "Bluesky" (it describes the network, not a link):
87
+
"Likes, reposts… happen on Bluesky", "creates a public Bluesky post", unpublish
88
+
warnings, the lexicon page.
89
+
90
+
## The 🌀 icon
91
+
92
+
- **Author profile** (`src/pages/[author]/index.astro`): replace the inline
93
+
butterfly SVG with the `🌀` emoji as text.
94
+
- **Article mentions** (`src/pages/[author]/[slug]/[rkey].astro`): replace the CSS
95
+
`mask-image` butterfly on `a.skypress-mention::before` with `content: "🌀"`. The
96
+
glyph becomes multicolor (no longer tinted by the publication theme); the hover
97
+
slide-in transform is preserved.
98
+
99
+
## Testing (TDD)
100
+
101
+
Write/extend failing tests first:
102
+
103
+
- New `src/lib/social/atmosphere-url.test.ts` — profile (handle + DID), post
104
+
(`at://` → web URL, plus fallback), hashtag.
105
+
- Update `src/lib/reader/rich-text` tests — profile and hashtag URLs now `mu.social`.
106
+
- Update `src/lib/publish/mentions` tests — `PROFILE_RE` matches both `bsky.app`
107
+
and `mu.social` hrefs.
108
+
- Update any post-URL test currently asserting `bskyPostWebUrl`/`bsky.app`.
109
+
110
+
Run `npm run test` and `npm run check`.
111
+
112
+
## Decision record
113
+
114
+
Record the canonical view-host change (bsky.app → mu.social, and the
115
+
"the ATmosphere" link wording) as `docs/decisions/0022-atmosphere-view-host.md`.