Webhooks for the AT Protocol
airglow.run
atproto
atprotocol
automation
webhook
feat: copy template placeholders
+69
-31
+17
app/islands/SubscriptionForm.css.ts
+17
app/islands/SubscriptionForm.css.ts
···
318
318
color: vars.color.textSecondary,
319
319
display: "flex",
320
320
gap: space[2],
321
+
alignItems: "baseline",
322
+
});
323
+
324
+
export const placeholderCode = style({
325
+
cursor: "pointer",
326
+
borderRadius: radii.sm,
327
+
paddingInline: space[1],
328
+
marginInline: `calc(-1 * ${space[1]})`,
329
+
transition: "background-color 0.15s ease",
330
+
":hover": {
331
+
backgroundColor: vars.color.borderSubtle,
332
+
},
333
+
selectors: {
334
+
"&[data-copied]": {
335
+
color: vars.color.success,
336
+
},
337
+
},
321
338
});
322
339
323
340
export const placeholderDesc = style({
+52
-31
app/islands/SubscriptionForm.tsx
+52
-31
app/islands/SubscriptionForm.tsx
···
220
220
}
221
221
222
222
// ---------------------------------------------------------------------------
223
+
// Copy-to-clipboard placeholder
224
+
// ---------------------------------------------------------------------------
225
+
226
+
function CopyPlaceholder({ value, children }: { value: string; children?: unknown }) {
227
+
const [copied, setCopied] = useState(false);
228
+
const copy = useCallback(() => {
229
+
void navigator.clipboard.writeText(value).then(() => {
230
+
setCopied(true);
231
+
setTimeout(() => setCopied(false), 1200);
232
+
});
233
+
}, [value]);
234
+
235
+
return (
236
+
<div class={s.placeholderItem}>
237
+
<span
238
+
role="button"
239
+
class={s.placeholderCode}
240
+
onClick={copy}
241
+
title="Click to copy"
242
+
{...(copied ? { "data-copied": "" } : {})}
243
+
>
244
+
{copied ? "Copied!" : `{{${value}}}`}
245
+
</span>
246
+
{children}
247
+
</div>
248
+
);
249
+
}
250
+
251
+
// ---------------------------------------------------------------------------
223
252
// Main form
224
253
// ---------------------------------------------------------------------------
225
254
···
446
475
<div class={s.collapsibleContent}>
447
476
<div class={s.placeholderGroup}>
448
477
<div class={s.placeholderGroupTitle}>Event</div>
449
-
<div class={s.placeholderItem}>
450
-
<span>{"{{event.did}}"}</span>
478
+
<CopyPlaceholder value="event.did">
451
479
<span class={s.placeholderDesc}>DID of the repo that emitted the event</span>
452
-
</div>
453
-
<div class={s.placeholderItem}>
454
-
<span>{"{{event.commit.collection}}"}</span>
480
+
</CopyPlaceholder>
481
+
<CopyPlaceholder value="event.commit.collection">
455
482
<span class={s.placeholderDesc}>Lexicon NSID of the record</span>
456
-
</div>
457
-
<div class={s.placeholderItem}>
458
-
<span>{"{{event.commit.rkey}}"}</span>
483
+
</CopyPlaceholder>
484
+
<CopyPlaceholder value="event.commit.rkey">
459
485
<span class={s.placeholderDesc}>Record key</span>
460
-
</div>
461
-
<div class={s.placeholderItem}>
462
-
<span>{"{{event.commit.cid}}"}</span>
486
+
</CopyPlaceholder>
487
+
<CopyPlaceholder value="event.commit.cid">
463
488
<span class={s.placeholderDesc}>Content hash of the record</span>
464
-
</div>
465
-
<div class={s.placeholderItem}>
466
-
<span>{"{{event.commit.operation}}"}</span>
489
+
</CopyPlaceholder>
490
+
<CopyPlaceholder value="event.commit.operation">
467
491
<span class={s.placeholderDesc}>create, update, or delete</span>
468
-
</div>
492
+
</CopyPlaceholder>
469
493
</div>
470
494
471
495
{fields.length > 0 && (
472
496
<div class={s.placeholderGroup}>
473
497
<div class={s.placeholderGroupTitle}>Record fields</div>
474
498
{fields.map((f) => (
475
-
<div key={f.path} class={s.placeholderItem}>
476
-
<span>{`{{event.commit.record.${f.path}}}`}</span>
499
+
<CopyPlaceholder key={f.path} value={`event.commit.record.${f.path}`}>
477
500
{f.description && <span class={s.placeholderDesc}>{f.description}</span>}
478
-
</div>
501
+
</CopyPlaceholder>
479
502
))}
480
503
</div>
481
504
)}
···
485
508
<div class={s.placeholderGroupTitle}>Data sources</div>
486
509
{fetches
487
510
.filter((f) => f.name)
488
-
.map((f) => (
489
-
<div key={f.name} class={s.placeholderItem}>
490
-
<span>
491
-
{`{{${f.name}.uri}}`}, {`{{${f.name}.cid}}`}, {`{{${f.name}.record.*}}`}
492
-
</span>
493
-
</div>
494
-
))}
511
+
.flatMap((f) => [
512
+
<CopyPlaceholder key={`${f.name}.uri`} value={`${f.name}.uri`} />,
513
+
<CopyPlaceholder key={`${f.name}.cid`} value={`${f.name}.cid`} />,
514
+
<CopyPlaceholder key={`${f.name}.record`} value={`${f.name}.record.*`}>
515
+
<span class={s.placeholderDesc}>access nested fields</span>
516
+
</CopyPlaceholder>,
517
+
])}
495
518
</div>
496
519
)}
497
520
498
521
<div class={s.placeholderGroup}>
499
522
<div class={s.placeholderGroupTitle}>Helpers</div>
500
-
<div class={s.placeholderItem}>
501
-
<span>{"{{now}}"}</span>
523
+
<CopyPlaceholder value="now">
502
524
<span class={s.placeholderDesc}>Current ISO 8601 datetime</span>
503
-
</div>
504
-
<div class={s.placeholderItem}>
505
-
<span>{"{{self}}"}</span>
525
+
</CopyPlaceholder>
526
+
<CopyPlaceholder value="self">
506
527
<span class={s.placeholderDesc}>
507
528
Your DID (resolved at save time, for conditions)
508
529
</span>
509
-
</div>
530
+
</CopyPlaceholder>
510
531
</div>
511
532
</div>
512
533
</details>