A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Merge branch 'social-actions-on-posts' into trunk
author
Jeremy Herve
date
(Jun 9, 2026, 10:08 PM +0200)
commit
3e951e32
3e951e320d1dd2a6266536d917165b7ddf667a60
parent
e60961b0
e60961b088c8dea7c9ddd19bd55ff6fb10a70a1a
+1353
-2
+66
src/components/PostActions.test.tsx
+66
src/components/PostActions.test.tsx
···
1
+
import { describe, it, expect } from 'vitest';
2
+
import { createElement } from 'react';
3
+
import { renderToStaticMarkup } from 'react-dom/server';
4
+
import { ActionsGate } from './PostActions';
5
+
import { AuthContext, type AuthContextValue } from '../lib/auth/AuthProvider';
6
+
7
+
const PROPS = { postUri: 'at://did:plc:writer/app.bsky.feed.post/3kpost', postCid: 'bafypost' };
8
+
9
+
/** Render ActionsGate under a hand-rolled auth context (bypasses real OAuth). */
10
+
function renderGate( auth: Partial< AuthContextValue > ): string {
11
+
const value: AuthContextValue = {
12
+
status: 'signed-out',
13
+
agent: null,
14
+
did: null,
15
+
handle: null,
16
+
displayName: null,
17
+
avatar: null,
18
+
pdsUrl: null,
19
+
error: null,
20
+
signIn: async () => {},
21
+
signOut: async () => {},
22
+
...auth,
23
+
};
24
+
return renderToStaticMarkup(
25
+
createElement( AuthContext.Provider, { value }, createElement( ActionsGate, PROPS ) )
26
+
);
27
+
}
28
+
29
+
describe( 'PostActions render branches', () => {
30
+
it( 'shows a loading state while auth initialises', () => {
31
+
expect( renderGate( { status: 'loading' } ) ).toContain( 'Loading actions…' );
32
+
} );
33
+
34
+
it( 'prompts sign-in (with the public-actions note) when signed out', () => {
35
+
const markup = renderGate( { status: 'signed-out' } );
36
+
expect( markup ).toContain( 'Sign in to react' );
37
+
expect( markup.toLowerCase() ).toContain( 'public' );
38
+
// Even signed-out, the thread is linkable on Bluesky.
39
+
expect( markup ).toContain( 'bsky.app/profile/did:plc:writer/post/3kpost' );
40
+
} );
41
+
42
+
it( 'renders the four actions when signed in', () => {
43
+
const markup = renderGate( {
44
+
status: 'signed-in',
45
+
agent: {} as never,
46
+
did: 'did:plc:reader',
47
+
handle: 'reader.test',
48
+
} );
49
+
expect( markup ).toContain( 'Like' );
50
+
expect( markup ).toContain( 'Repost' );
51
+
expect( markup ).toContain( 'Quote' );
52
+
expect( markup ).toContain( 'Reply' );
53
+
expect( markup.toLowerCase() ).toContain( 'public' );
54
+
} );
55
+
56
+
it( 'surfaces a sign-in error while still signed out (signIn sets error, not status)', () => {
57
+
// AuthProvider.signIn reports invalid handles / sign-in failures via `error`
58
+
// without flipping `status` to 'error', so the affordance must show it regardless.
59
+
const markup = renderGate( {
60
+
status: 'signed-out',
61
+
error: 'Enter a handle (alice.bsky.social), a DID, or a PDS URL.',
62
+
} );
63
+
expect( markup ).toContain( 'Enter a handle' );
64
+
expect( markup ).toContain( 'role="alert"' );
65
+
} );
66
+
} );
+329
src/components/PostActions.tsx
+329
src/components/PostActions.tsx
···
1
+
import { useEffect, useRef, useState } from 'react';
2
+
import { AuthProvider } from '../lib/auth/AuthProvider';
3
+
import { useAuth } from '../lib/auth/useAuth';
4
+
import {
5
+
like,
6
+
unlike,
7
+
repost,
8
+
unrepost,
9
+
postReply,
10
+
postQuote,
11
+
fetchPostState,
12
+
type PostState,
13
+
} from '../lib/social/interactions';
14
+
import {
15
+
graphemeLength,
16
+
validateReplyText,
17
+
bskyPostWebUrl,
18
+
MAX_REPLY_GRAPHEMES,
19
+
type StrongRef,
20
+
} from '../lib/social/records';
21
+
22
+
export interface PostActionsProps {
23
+
/** The companion `app.bsky.feed.post` AT-URI (the article's Bluesky post). */
24
+
postUri: string;
25
+
/** Its cid — together with `postUri` it forms the strongRef every action targets. */
26
+
postCid: string;
27
+
}
28
+
29
+
type Composer = 'reply' | 'quote' | null;
30
+
31
+
/** A composed reply/quote in flight, surfaced as a success or error banner. */
32
+
interface Flash {
33
+
kind: 'success' | 'error';
34
+
message: string;
35
+
/** For a success, the bsky.app link to the freshly created post. */
36
+
href?: string;
37
+
}
38
+
39
+
/**
40
+
* The signed-in / signed-out action bar. Renders inside <AuthProvider>; reads the
41
+
* companion post's counts + the viewer's like/repost state, and writes like / repost /
42
+
* reply / quote records to the reader's own PDS.
43
+
*/
44
+
export function ActionsGate( { postUri, postCid }: PostActionsProps ) {
45
+
const { status, agent, did, signIn, error: authError } = useAuth();
46
+
const subject: StrongRef = { uri: postUri, cid: postCid };
47
+
48
+
const [ state, setState ] = useState< PostState | null >( null );
49
+
const [ busy, setBusy ] = useState< null | 'like' | 'repost' >( null );
50
+
const [ composer, setComposer ] = useState< Composer >( null );
51
+
const [ text, setText ] = useState( '' );
52
+
const [ submitting, setSubmitting ] = useState( false );
53
+
const [ flash, setFlash ] = useState< Flash | null >( null );
54
+
const [ handle, setHandle ] = useState( '' );
55
+
56
+
// Guards a late `refresh()` setState after unmount (refresh runs from event
57
+
// handlers, so it can't rely on an effect cleanup like the mount load below).
58
+
const mounted = useRef( true );
59
+
useEffect( () => () => {
60
+
mounted.current = false;
61
+
}, [] );
62
+
63
+
// Load counts + viewer state once signed in (and refresh after each write).
64
+
useEffect( () => {
65
+
if ( status !== 'signed-in' || ! agent ) {
66
+
return;
67
+
}
68
+
let cancelled = false;
69
+
fetchPostState( agent, postUri )
70
+
.then( ( next ) => ! cancelled && next && setState( next ) )
71
+
.catch( () => {
72
+
/* counts are best-effort; the action buttons still work */
73
+
} );
74
+
return () => {
75
+
cancelled = true;
76
+
};
77
+
}, [ status, agent, postUri ] );
78
+
79
+
const refresh = () => {
80
+
if ( agent ) {
81
+
fetchPostState( agent, postUri )
82
+
.then( ( next ) => mounted.current && next && setState( next ) )
83
+
.catch( () => {} );
84
+
}
85
+
};
86
+
87
+
const onToggleLike = async () => {
88
+
if ( ! agent || ! did || busy ) {
89
+
return;
90
+
}
91
+
setBusy( 'like' );
92
+
setFlash( null );
93
+
try {
94
+
if ( state?.viewerLikeUri ) {
95
+
await unlike( agent, did, state.viewerLikeUri );
96
+
} else {
97
+
await like( agent, did, subject );
98
+
}
99
+
refresh();
100
+
} catch ( err ) {
101
+
setFlash( { kind: 'error', message: errorText( err, 'Could not update your like.' ) } );
102
+
} finally {
103
+
setBusy( null );
104
+
}
105
+
};
106
+
107
+
const onToggleRepost = async () => {
108
+
if ( ! agent || ! did || busy ) {
109
+
return;
110
+
}
111
+
setBusy( 'repost' );
112
+
setFlash( null );
113
+
try {
114
+
if ( state?.viewerRepostUri ) {
115
+
await unrepost( agent, did, state.viewerRepostUri );
116
+
} else {
117
+
await repost( agent, did, subject );
118
+
}
119
+
refresh();
120
+
} catch ( err ) {
121
+
setFlash( { kind: 'error', message: errorText( err, 'Could not update your repost.' ) } );
122
+
} finally {
123
+
setBusy( null );
124
+
}
125
+
};
126
+
127
+
const openComposer = ( mode: Composer ) => {
128
+
setComposer( mode );
129
+
setText( '' );
130
+
setFlash( null );
131
+
};
132
+
133
+
const onSubmitComposer = async () => {
134
+
if ( ! agent || ! did || ! composer || submitting ) {
135
+
return;
136
+
}
137
+
if ( ! validateReplyText( text, { allowEmpty: composer === 'quote' } ).ok ) {
138
+
return;
139
+
}
140
+
setSubmitting( true );
141
+
try {
142
+
const action = composer === 'reply' ? postReply : postQuote;
143
+
const uri = await action( agent, did, { text, subject } );
144
+
setComposer( null );
145
+
setText( '' );
146
+
setFlash( {
147
+
kind: 'success',
148
+
message: composer === 'reply' ? 'Reply posted to Bluesky.' : 'Quote posted to Bluesky.',
149
+
href: bskyPostWebUrl( uri ),
150
+
} );
151
+
refresh();
152
+
} catch ( err ) {
153
+
setFlash( { kind: 'error', message: errorText( err, 'Could not post to Bluesky.' ) } );
154
+
} finally {
155
+
setSubmitting( false );
156
+
}
157
+
};
158
+
159
+
if ( status === 'loading' ) {
160
+
return <div className="post-actions post-actions--loading">Loading actions…</div>;
161
+
}
162
+
163
+
const threadUrl = bskyPostWebUrl( postUri );
164
+
165
+
// Signed-out: prompt sign-in (same OAuth flow as the editor) before any action.
166
+
if ( status !== 'signed-in' || ! agent || ! did ) {
167
+
return (
168
+
<div className="post-actions">
169
+
<p className="post-actions__note">
170
+
Sign in with your AT Protocol account to like, repost, or reply. Actions are
171
+
public and happen on Bluesky.
172
+
</p>
173
+
<form
174
+
className="post-actions__signin"
175
+
onSubmit={ ( event ) => {
176
+
event.preventDefault();
177
+
void signIn( handle );
178
+
} }
179
+
>
180
+
<input
181
+
className="post-actions__signin-input"
182
+
aria-label="Your handle, DID, or PDS URL"
183
+
autoComplete="username"
184
+
autoCapitalize="none"
185
+
autoCorrect="off"
186
+
spellCheck={ false }
187
+
placeholder="alice.bsky.social"
188
+
value={ handle }
189
+
onChange={ ( event ) => setHandle( event.target.value ) }
190
+
/>
191
+
<button className="post-actions__signin-btn" type="submit">
192
+
Sign in to react
193
+
</button>
194
+
</form>
195
+
{ authError && (
196
+
<p className="post-actions__error" role="alert">
197
+
{ authError }
198
+
</p>
199
+
) }
200
+
<a className="post-actions__thread" href={ threadUrl } target="_blank" rel="noopener noreferrer">
201
+
View this post on Bluesky
202
+
</a>
203
+
</div>
204
+
);
205
+
}
206
+
207
+
const liked = Boolean( state?.viewerLikeUri );
208
+
const reposted = Boolean( state?.viewerRepostUri );
209
+
// A quote can be posted with no commentary (bare quote-repost); a reply cannot.
210
+
const validity = validateReplyText( text, { allowEmpty: composer === 'quote' } );
211
+
const graphemes = graphemeLength( text );
212
+
213
+
return (
214
+
<div className="post-actions">
215
+
<div className="post-actions__bar" role="group" aria-label="Post actions">
216
+
<button
217
+
type="button"
218
+
className={ `post-actions__btn${ liked ? ' is-active' : '' }` }
219
+
aria-pressed={ liked }
220
+
disabled={ busy === 'like' }
221
+
onClick={ onToggleLike }
222
+
>
223
+
{ liked ? '♥' : '♡' } Like{ countLabel( state?.likeCount ) }
224
+
</button>
225
+
<button
226
+
type="button"
227
+
className={ `post-actions__btn${ reposted ? ' is-active' : '' }` }
228
+
aria-pressed={ reposted }
229
+
disabled={ busy === 'repost' }
230
+
onClick={ onToggleRepost }
231
+
>
232
+
⇄ Repost{ countLabel( state?.repostCount ) }
233
+
</button>
234
+
<button type="button" className="post-actions__btn" onClick={ () => openComposer( 'quote' ) }>
235
+
❝ Quote
236
+
</button>
237
+
<button type="button" className="post-actions__btn" onClick={ () => openComposer( 'reply' ) }>
238
+
↩ Reply{ countLabel( state?.replyCount ) }
239
+
</button>
240
+
</div>
241
+
242
+
{ composer && (
243
+
<div className="post-actions__composer">
244
+
<label className="post-actions__composer-label" htmlFor="post-actions-text">
245
+
{ composer === 'reply' ? 'Your reply' : 'Add a comment to your quote' }
246
+
</label>
247
+
<textarea
248
+
id="post-actions-text"
249
+
className="post-actions__textarea"
250
+
rows={ 4 }
251
+
placeholder={ composer === 'reply' ? 'Write a reply…' : 'Optional comment…' }
252
+
value={ text }
253
+
onChange={ ( event ) => setText( event.target.value ) }
254
+
/>
255
+
<div className="post-actions__composer-foot">
256
+
<span
257
+
className={ `post-actions__count${
258
+
graphemes > MAX_REPLY_GRAPHEMES ? ' is-over' : ''
259
+
}` }
260
+
>
261
+
{ graphemes } / { MAX_REPLY_GRAPHEMES }
262
+
</span>
263
+
<div className="post-actions__composer-btns">
264
+
<button
265
+
type="button"
266
+
className="post-actions__btn"
267
+
onClick={ () => setComposer( null ) }
268
+
disabled={ submitting }
269
+
>
270
+
Cancel
271
+
</button>
272
+
<button
273
+
type="button"
274
+
className="post-actions__submit"
275
+
onClick={ onSubmitComposer }
276
+
disabled={ submitting || ! validity.ok }
277
+
>
278
+
{ submitting
279
+
? 'Posting…'
280
+
: composer === 'reply'
281
+
? 'Post reply'
282
+
: 'Post quote' }
283
+
</button>
284
+
</div>
285
+
</div>
286
+
</div>
287
+
) }
288
+
289
+
{ flash && (
290
+
<p
291
+
className={ `post-actions__flash post-actions__flash--${ flash.kind }` }
292
+
role={ flash.kind === 'error' ? 'alert' : 'status' }
293
+
>
294
+
{ flash.message }{ ' ' }
295
+
{ flash.href && (
296
+
<a href={ flash.href } target="_blank" rel="noopener noreferrer">
297
+
View on Bluesky
298
+
</a>
299
+
) }
300
+
</p>
301
+
) }
302
+
303
+
<p className="post-actions__note">
304
+
Likes, reposts, quotes, and replies are public and happen on Bluesky.
305
+
</p>
306
+
<a className="post-actions__thread" href={ threadUrl } target="_blank" rel="noopener noreferrer">
307
+
View the full thread on Bluesky
308
+
</a>
309
+
</div>
310
+
);
311
+
}
312
+
313
+
/** A `(n)` suffix for a button label, omitted when the count is zero/unknown. */
314
+
function countLabel( count: number | undefined ): string {
315
+
return count && count > 0 ? ` (${ count })` : '';
316
+
}
317
+
318
+
function errorText( err: unknown, fallback: string ): string {
319
+
const detail = err instanceof Error ? err.message : '';
320
+
return detail ? `${ fallback } ${ detail }` : fallback;
321
+
}
322
+
323
+
export default function PostActions( props: PostActionsProps ) {
324
+
return (
325
+
<AuthProvider>
326
+
<ActionsGate { ...props } />
327
+
</AuthProvider>
328
+
);
329
+
}
+4
-2
src/lib/landing/landing-content.test.ts
+4
-2
src/lib/landing/landing-content.test.ts
···
58
58
expect( index ).toMatch( /[Ff]ree/ );
59
59
} );
60
60
61
-
it( 'keeps the honest Bluesky cross-post note (product guardrail)', () => {
62
-
expect( index ).toMatch( /posts to Bluesky/ );
61
+
it( 'no longer carries the Bluesky cross-post note on the home page', () => {
62
+
// The "One thing worth knowing…" notice was removed from the landing page
63
+
// (commit c1508f9); the cross-post disclosure now lives on the publish panel.
64
+
expect( index ).not.toMatch( /posts to Bluesky/ );
63
65
} );
64
66
65
67
it( 'shows the three-up "see it in action" screenshot strip', () => {
+143
src/styles/post-actions.css
+143
src/styles/post-actions.css
···
1
+
/**
2
+
* Reader social-action bar (`PostActions`). The component is a `client:only` React
3
+
* island mounted on the article page, so Astro's component-scoped styles never reach
4
+
* its DOM — these rules must be global (imported from `[rkey].astro`).
5
+
*/
6
+
.post-actions {
7
+
max-width: 40rem;
8
+
margin: 2.5rem auto 0;
9
+
padding: 1.5rem 1.5rem 0;
10
+
border-top: 1px solid var(--line);
11
+
}
12
+
.post-actions--loading {
13
+
color: var(--muted);
14
+
font-size: 0.95rem;
15
+
}
16
+
.post-actions__bar {
17
+
display: flex;
18
+
flex-wrap: wrap;
19
+
gap: 0.5rem;
20
+
}
21
+
.post-actions__btn {
22
+
display: inline-flex;
23
+
align-items: center;
24
+
gap: 0.35rem;
25
+
padding: 0.5rem 0.85rem;
26
+
border: 1px solid var(--line-strong, var(--line));
27
+
border-radius: 999px;
28
+
background: transparent;
29
+
color: var(--ink);
30
+
font: inherit;
31
+
font-size: 0.95rem;
32
+
cursor: pointer;
33
+
}
34
+
.post-actions__btn:hover {
35
+
border-color: var(--sun);
36
+
}
37
+
.post-actions__btn:disabled {
38
+
opacity: 0.55;
39
+
cursor: default;
40
+
}
41
+
.post-actions__btn.is-active {
42
+
border-color: var(--sun);
43
+
color: var(--sun);
44
+
}
45
+
.post-actions__composer {
46
+
margin-top: 1rem;
47
+
}
48
+
.post-actions__composer-label {
49
+
display: block;
50
+
font-size: 0.85rem;
51
+
font-weight: 600;
52
+
margin-bottom: 0.4rem;
53
+
}
54
+
.post-actions__textarea {
55
+
width: 100%;
56
+
box-sizing: border-box;
57
+
padding: 0.7rem 0.8rem;
58
+
border: 1px solid var(--line-strong, var(--line));
59
+
border-radius: 10px;
60
+
font: inherit;
61
+
resize: vertical;
62
+
}
63
+
.post-actions__composer-foot {
64
+
display: flex;
65
+
align-items: center;
66
+
justify-content: space-between;
67
+
margin-top: 0.6rem;
68
+
gap: 0.75rem;
69
+
}
70
+
.post-actions__count {
71
+
font-size: 0.85rem;
72
+
color: var(--muted);
73
+
font-variant-numeric: tabular-nums;
74
+
}
75
+
.post-actions__count.is-over {
76
+
color: var(--ember, #c0392b);
77
+
font-weight: 600;
78
+
}
79
+
.post-actions__composer-btns {
80
+
display: flex;
81
+
gap: 0.5rem;
82
+
}
83
+
.post-actions__submit {
84
+
padding: 0.5rem 1rem;
85
+
border: none;
86
+
border-radius: 999px;
87
+
background: var(--sun);
88
+
color: var(--paper, #fff);
89
+
font: inherit;
90
+
font-weight: 600;
91
+
cursor: pointer;
92
+
}
93
+
.post-actions__submit:disabled {
94
+
opacity: 0.5;
95
+
cursor: default;
96
+
}
97
+
.post-actions__signin {
98
+
display: flex;
99
+
flex-wrap: wrap;
100
+
gap: 0.5rem;
101
+
margin: 0.5rem 0;
102
+
}
103
+
.post-actions__signin-input {
104
+
flex: 1 1 14rem;
105
+
box-sizing: border-box;
106
+
padding: 0.55rem 0.7rem;
107
+
border: 1px solid var(--line-strong, var(--line));
108
+
border-radius: 8px;
109
+
font: inherit;
110
+
}
111
+
.post-actions__signin-btn {
112
+
padding: 0.55rem 1.1rem;
113
+
border: none;
114
+
border-radius: 999px;
115
+
background: var(--sun);
116
+
color: var(--paper, #fff);
117
+
font: inherit;
118
+
font-weight: 600;
119
+
cursor: pointer;
120
+
}
121
+
.post-actions__note {
122
+
margin: 0.9rem 0 0;
123
+
font-size: 0.82rem;
124
+
color: var(--muted);
125
+
}
126
+
.post-actions__error,
127
+
.post-actions__flash--error {
128
+
color: var(--ember, #c0392b);
129
+
font-size: 0.9rem;
130
+
}
131
+
.post-actions__flash {
132
+
margin: 0.9rem 0 0;
133
+
font-size: 0.9rem;
134
+
}
135
+
.post-actions__flash--success {
136
+
color: var(--ink-soft, var(--ink));
137
+
}
138
+
.post-actions__thread {
139
+
display: inline-block;
140
+
margin-top: 0.75rem;
141
+
color: var(--sun);
142
+
font-size: 0.9rem;
143
+
}