app/components/admin/preview-links.tsx

Functions

Imports

It imports app/components/admin/copy-button.tsx, app/lib/long-date.mjs. Imported by app/routes/admin.posts.$slug.edit.tsx.

Source

1import { Alert } from "capsomer/react/banner";
2
3import { CopyTextButton } from "~/components/admin/copy-button";
4import { longDateUTC } from "~/lib/long-date.mjs";
5
6// The token is a capability: only six characters are printed, and the full URL leaves only via copy.
7export interface PreviewLinkView {
8  token: string;
9  short: string;
10  url: string;
11  createdAt: string;
12  expiresAt: string;
13  createdBy: string;
14  note: string;
15}
16
17export const CREATE_FORM_ID = "create-preview-link";
18
19// Substituted here, not in longDateUTC, because the blog pages want the null to omit the line.
20const expiresLabel = (iso: string) => {
21  const on = longDateUTC(iso);
22  return on === null ? "an unknown date" : on;
23};
24
25export const revokeFormId = (token: string) => `revoke-preview-link-${token}`;
26
27export function PreviewLinks({
28  links,
29  created,
30  error = null,
31}: {
32  links: PreviewLinkView[];
33  created: { url: string; expiresAt: string } | null;
34  /** Set when the list could not be read: live links may exist that this page cannot show or revoke. */
35  error?: string | null;
36}) {
37  return (
38    <>
39      {/* Revocation is not instant: `APP_KV.get` has an edge read cache, so a colo that already read
40          the record serves it until that lapses. Publication is immediate: the read path re-asks D1. */}
41      <p className="cap-muted">
42        A preview link shows this draft to anyone who has it, with no sign-in. It
43        stops working seven days after it is created, within a minute of you
44        revoking it, or the moment this post is published, whichever comes first.
45      </p>
46
47      {created ? (
48        // Shown in full once, so the author need not trust a copy button that may have failed.
49        <div className="cap-field">
50          <span className="cap-field-label">New preview link</span>
51          <code className="cap-mono">{created.url}</code>
52          <span className="cap-field-help">Expires {expiresLabel(created.expiresAt)}.</span>
53          <CopyTextButton value={created.url} label="Copy this link" subject="the new preview link" />
54        </div>
55      ) : null}
56
57      {links.length > 0 ? (
58        <ul className="cap-rows" role="list" aria-label="Preview links">
59          {links.map((link) => (
60            <li key={link.token} className="cap-row">
61              <div className="cap-row-title">
62                <code className="cap-mono">{link.short}...</code>
63              </div>
64              <p className="cap-row-detail">
65                Expires {expiresLabel(link.expiresAt)}
66                {link.createdBy ? `, created by ${link.createdBy}` : null}
67              </p>
68              <div className="cap-row-actions">
69                <CopyTextButton
70                  value={link.url}
71                  label="Copy"
72                  name={`the link starting ${link.short}`}
73                  subject={`the link starting ${link.short}`}
74                />
75                <button
76                  type="submit"
77                  form={revokeFormId(link.token)}
78                  name="intent"
79                  value="revoke-preview-link"
80                  className="cap-btn"
81                  data-size="sm"
82                  data-variant="quiet"
83                >
84                  Revoke
85                  <span className="cap-sr-only"> the link starting {link.short}</span>
86                </button>
87              </div>
88            </li>
89          ))}
90        </ul>
91      ) : error ? (
92        <Alert tone="warn">
93          The preview links could not be read, so any live link is not listed here and cannot be
94          revoked from this page until it loads: {error}
95        </Alert>
96      ) : (
97        <p className="cap-muted">No preview links for this draft.</p>
98      )}
99
100      <button
101        type="submit"
102        form={CREATE_FORM_ID}
103        name="intent"
104        value="preview-link"
105        className="cap-btn"
106        data-size="sm"
107      >
108        Create a preview link
109      </button>
110    </>
111  );
112}