A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Add like/repost/quote/reply actions to reader article pages
Readers can now react to a published article from the bottom of the post.
Each action writes a native app.bsky.feed.* record to the reader's own PDS,
targeting the article's companion Bluesky post (bskyPostRef) so the reply
threads under it and the like/repost show on Bluesky:
- like -> app.bsky.feed.like
- repost -> app.bsky.feed.repost
- reply -> app.bsky.feed.post with reply.{root,parent} = companion post
- quote -> app.bsky.feed.post embedding the companion post
Replies are app.bsky.feed.post (not a site.standard.* record) because only
app.bsky.* records thread/federate on Bluesky; that caps replies at 300
graphemes, so a plain composer with an Intl.Segmenter counter replaces the
block editor for replies (Decision 0015).
A client:only PostActions island reuses the existing OAuth AuthProvider to
sign readers in; the read path still imports no @wordpress/*. No new OAuth
scope (transition:generic already covers app.bsky.feed.* writes). Actions are
disclosed as public Bluesky actions. The bar is omitted for legacy documents
without a bskyPostRef.
author
Jeremy Herve
date
(Jun 9, 2026, 9:33 PM +0200)
commit
fdadf892
fdadf89224d89c2991977ed95fab2ed2f9927ecb
parent
1bff76bf
1bff76bf72c668d6d1b096fe3cd41399dd014111
+1161
+55
src/components/PostActions.test.tsx
+55
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
+
} );
+328
src/components/PostActions.tsx
+328
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 ).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
+
{ status === 'error' && 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
+
const validity = validateReplyText( text );
210
+
const graphemes = graphemeLength( text );
211
+
212
+
return (
213
+
<div className="post-actions">
214
+
<div className="post-actions__bar" role="group" aria-label="Post actions">
215
+
<button
216
+
type="button"
217
+
className={ `post-actions__btn${ liked ? ' is-active' : '' }` }
218
+
aria-pressed={ liked }
219
+
disabled={ busy === 'like' }
220
+
onClick={ onToggleLike }
221
+
>
222
+
{ liked ? '♥' : '♡' } Like{ countLabel( state?.likeCount ) }
223
+
</button>
224
+
<button
225
+
type="button"
226
+
className={ `post-actions__btn${ reposted ? ' is-active' : '' }` }
227
+
aria-pressed={ reposted }
228
+
disabled={ busy === 'repost' }
229
+
onClick={ onToggleRepost }
230
+
>
231
+
⇄ Repost{ countLabel( state?.repostCount ) }
232
+
</button>
233
+
<button type="button" className="post-actions__btn" onClick={ () => openComposer( 'quote' ) }>
234
+
❝ Quote
235
+
</button>
236
+
<button type="button" className="post-actions__btn" onClick={ () => openComposer( 'reply' ) }>
237
+
↩ Reply{ countLabel( state?.replyCount ) }
238
+
</button>
239
+
</div>
240
+
241
+
{ composer && (
242
+
<div className="post-actions__composer">
243
+
<label className="post-actions__composer-label" htmlFor="post-actions-text">
244
+
{ composer === 'reply' ? 'Your reply' : 'Add a comment to your quote' }
245
+
</label>
246
+
<textarea
247
+
id="post-actions-text"
248
+
className="post-actions__textarea"
249
+
rows={ 4 }
250
+
placeholder={ composer === 'reply' ? 'Write a reply…' : 'Optional comment…' }
251
+
value={ text }
252
+
onChange={ ( event ) => setText( event.target.value ) }
253
+
/>
254
+
<div className="post-actions__composer-foot">
255
+
<span
256
+
className={ `post-actions__count${
257
+
graphemes > MAX_REPLY_GRAPHEMES ? ' is-over' : ''
258
+
}` }
259
+
>
260
+
{ graphemes } / { MAX_REPLY_GRAPHEMES }
261
+
</span>
262
+
<div className="post-actions__composer-btns">
263
+
<button
264
+
type="button"
265
+
className="post-actions__btn"
266
+
onClick={ () => setComposer( null ) }
267
+
disabled={ submitting }
268
+
>
269
+
Cancel
270
+
</button>
271
+
<button
272
+
type="button"
273
+
className="post-actions__submit"
274
+
onClick={ onSubmitComposer }
275
+
disabled={ submitting || ! validity.ok }
276
+
>
277
+
{ submitting
278
+
? 'Posting…'
279
+
: composer === 'reply'
280
+
? 'Post reply'
281
+
: 'Post quote' }
282
+
</button>
283
+
</div>
284
+
</div>
285
+
</div>
286
+
) }
287
+
288
+
{ flash && (
289
+
<p
290
+
className={ `post-actions__flash post-actions__flash--${ flash.kind }` }
291
+
role={ flash.kind === 'error' ? 'alert' : 'status' }
292
+
>
293
+
{ flash.message }{ ' ' }
294
+
{ flash.href && (
295
+
<a href={ flash.href } target="_blank" rel="noopener noreferrer">
296
+
View on Bluesky
297
+
</a>
298
+
) }
299
+
</p>
300
+
) }
301
+
302
+
<p className="post-actions__note">
303
+
Likes, reposts, quotes, and replies are public and happen on Bluesky.
304
+
</p>
305
+
<a className="post-actions__thread" href={ threadUrl } target="_blank" rel="noopener noreferrer">
306
+
View the full thread on Bluesky
307
+
</a>
308
+
</div>
309
+
);
310
+
}
311
+
312
+
/** A `(n)` suffix for a button label, omitted when the count is zero/unknown. */
313
+
function countLabel( count: number | undefined ): string {
314
+
return count && count > 0 ? ` (${ count })` : '';
315
+
}
316
+
317
+
function errorText( err: unknown, fallback: string ): string {
318
+
const detail = err instanceof Error ? err.message : '';
319
+
return detail ? `${ fallback } ${ detail }` : fallback;
320
+
}
321
+
322
+
export default function PostActions( props: PostActionsProps ) {
323
+
return (
324
+
<AuthProvider>
325
+
<ActionsGate { ...props } />
326
+
</AuthProvider>
327
+
);
328
+
}
+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
+
}