Webhooks for the AT Protocol
airglow.run
atproto
atprotocol
automation
webhook
feat: template placeholder descriptions
+93
-2
+29
-1
app/islands/SubscriptionForm.css.ts
+29
-1
app/islands/SubscriptionForm.css.ts
···
292
292
padding: `${space[2]} ${space[3]}`,
293
293
fontSize: fontSize.xs,
294
294
color: vars.color.textSecondary,
295
-
fontFamily: "monospace",
296
295
lineHeight: 1.6,
297
296
wordBreak: "break-word",
297
+
display: "flex",
298
+
flexDirection: "column",
299
+
gap: space[3],
300
+
});
301
+
302
+
export const placeholderGroup = style({
303
+
display: "flex",
304
+
flexDirection: "column",
305
+
gap: space[1],
306
+
});
307
+
308
+
export const placeholderGroupTitle = style({
309
+
fontSize: fontSize.xs,
310
+
fontWeight: fontWeight.medium,
311
+
color: vars.color.textSecondary,
312
+
marginBlockEnd: space[1],
313
+
});
314
+
315
+
export const placeholderItem = style({
316
+
fontFamily: "monospace",
317
+
fontSize: fontSize.xs,
318
+
color: vars.color.textSecondary,
319
+
display: "flex",
320
+
gap: space[2],
321
+
});
322
+
323
+
export const placeholderDesc = style({
324
+
fontFamily: "inherit",
325
+
color: vars.color.textMuted,
298
326
});
+64
-1
app/islands/SubscriptionForm.tsx
+64
-1
app/islands/SubscriptionForm.tsx
···
444
444
<details class={s.collapsibleDetails}>
445
445
<summary class={s.collapsibleSummary}>Available placeholders</summary>
446
446
<div class={s.collapsibleContent}>
447
-
{allPlaceholders.map((p) => `{{${p}}}`).join(", ")}
447
+
<div class={s.placeholderGroup}>
448
+
<div class={s.placeholderGroupTitle}>Event</div>
449
+
<div class={s.placeholderItem}>
450
+
<span>{"{{event.did}}"}</span>
451
+
<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>
455
+
<span class={s.placeholderDesc}>Lexicon NSID of the record</span>
456
+
</div>
457
+
<div class={s.placeholderItem}>
458
+
<span>{"{{event.commit.rkey}}"}</span>
459
+
<span class={s.placeholderDesc}>Record key</span>
460
+
</div>
461
+
<div class={s.placeholderItem}>
462
+
<span>{"{{event.commit.cid}}"}</span>
463
+
<span class={s.placeholderDesc}>Content hash of the record</span>
464
+
</div>
465
+
<div class={s.placeholderItem}>
466
+
<span>{"{{event.commit.operation}}"}</span>
467
+
<span class={s.placeholderDesc}>create, update, or delete</span>
468
+
</div>
469
+
</div>
470
+
471
+
{fields.length > 0 && (
472
+
<div class={s.placeholderGroup}>
473
+
<div class={s.placeholderGroupTitle}>Record fields</div>
474
+
{fields.map((f) => (
475
+
<div key={f.path} class={s.placeholderItem}>
476
+
<span>{`{{event.commit.record.${f.path}}}`}</span>
477
+
{f.description && <span class={s.placeholderDesc}>{f.description}</span>}
478
+
</div>
479
+
))}
480
+
</div>
481
+
)}
482
+
483
+
{fetches.some((f) => f.name) && (
484
+
<div class={s.placeholderGroup}>
485
+
<div class={s.placeholderGroupTitle}>Data sources</div>
486
+
{fetches
487
+
.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
+
))}
495
+
</div>
496
+
)}
497
+
498
+
<div class={s.placeholderGroup}>
499
+
<div class={s.placeholderGroupTitle}>Helpers</div>
500
+
<div class={s.placeholderItem}>
501
+
<span>{"{{now}}"}</span>
502
+
<span class={s.placeholderDesc}>Current ISO 8601 datetime</span>
503
+
</div>
504
+
<div class={s.placeholderItem}>
505
+
<span>{"{{self}}"}</span>
506
+
<span class={s.placeholderDesc}>
507
+
Your DID (resolved at save time, for conditions)
508
+
</span>
509
+
</div>
510
+
</div>
448
511
</div>
449
512
</details>
450
513
)}