components/publish-gate/examples.tsx

Functions

Imports

It imports components/publish-gate/publish-gate.react.tsx. No module of this repo imports it.

Source

1// Mounts the React specimen: <PublishGate> holding its own checks and destination, with the
2// page's own <PublishButton> beside it, as an editor bar would.
3import { StrictMode, useState } from "react";
4import { createRoot } from "react-dom/client";
5import { PublishButton, PublishGate, gateStates, publishWithPreview, type GateCheck, type GateSite } from "./publish-gate.react.tsx";
6
7const CHECKS: GateCheck[] = [
8  { id: "alt", name: "Alt text", required: true, ok: false, cause: "The cover image has no alt text", pass: "Every image has alt text", href: "#react-field-alt", fix: "Describe what the image shows." },
9  { id: "title", name: "Title", required: true, ok: true, cause: "The title is empty", pass: "The post has a title", href: "#react-field-title" },
10  { id: "length", name: "Title length", required: false, ok: false, cause: "The title is 78 characters; the feed cuts it at 60", pass: "The title fits the feed", href: "#react-field-title", fix: "Shorten it." },
11];
12
13function Held() {
14  const [checks, setChecks] = useState(CHECKS);
15  const [site, setSite] = useState<GateSite>({ id: "dustinedwards", name: "dustinedwards.info" });
16  const { sites } = gateStates([site], checks);
17  const state = sites[site.id] ?? "ready";
18  const [busy, setBusy] = useState(false);
19  const publish = async () => {
20    setBusy(true);
21    await new Promise((r) => setTimeout(r, 200));
22    setBusy(false);
23    setSite((s) => ({ ...s, published: { at: "2026-10-02T09:12:00Z", url: "https://dustinedwards.info/blog/react-post" } }));
24  };
25  const unpublish = async () => {
26    await new Promise((r) => setTimeout(r, 200));
27    setSite((s) => ({ ...s, published: undefined }));
28  };
29  return (
30    <div className="cap-gate-bar">
31      <PublishButton gateId="react-gate" site={site} state={state} busy={busy} summaryId="react-gate-sum" size="default" onPublish={() => void publishWithPreview(site, publish)} onUnpublish={() => void unpublish()} />
32      <PublishGate id="react-gate" summaryId="react-gate-sum" label="Publish checks (React)" sites={[site]} checks={checks} actions="none" publish={publish} unpublish={unpublish} />
33      <button type="button" className="cap-btn" data-size="sm" id="react-fix" onClick={() => setChecks((cs) => cs.map((c) => (c.id === "alt" ? { ...c, ok: !c.ok } : c)))}>
34        Toggle the alt text check
35      </button>
36    </div>
37  );
38}
39
40for (const el of document.querySelectorAll<HTMLElement>("[data-mount='react']")) {
41  createRoot(el).render(
42    <StrictMode>
43      <Held />
44    </StrictMode>,
45  );
46}