components/posts-list/examples.tsx

Functions

Imports

It imports components/content/content.ts, components/message/message.react.tsx, components/posts-list/posts-list.react.tsx. No module of this repo imports it.

Source

1// Mounts the specimens: PostsList as a host would hold it, with a small in-memory site standing in
2// for the content kit, so every action can be tried. The kit's intents and words here are a
3// specimen's, not a contract; the real ones live with the kit.
4import { StrictMode, useRef, useState, type ReactNode } from "react";
5import { createRoot } from "react-dom/client";
6import { renderToStaticMarkup } from "react-dom/server";
7import type { ContentCan, IntentResult, PostRow, PostsData } from "../content/content.ts";
8import { MessageProvider } from "../message/message.react.tsx";
9import { PostsList } from "./posts-list.react.tsx";
10
11const NOW = Date.parse("2026-10-10T12:00:00Z");
12const ALL: ContentCan = { edit: true, publish: true, deleteContent: true, deleteMedia: true, decideMentions: true };
13
14const ROWS: PostRow[] = [
15  { id: "foxhound-release", title: "Notes on the Foxhound release", kind: "post", status: "published", path: "/blog/foxhound-release", href: "/editor/foxhound-release", liveHref: "https://dustinedwards.info/blog/foxhound-release", publishAt: null, publishedAt: "2026-10-02T09:00:00Z", updatedAt: "2026-10-09T16:20:00Z", tags: ["release"] },
16  { id: "uptime-strip", title: "Why the uptime strip counts gaps", kind: "post", status: "scheduled", path: null, href: "/editor/uptime-strip", liveHref: null, publishAt: "2026-10-13T08:00:00Z", publishedAt: null, updatedAt: "2026-10-10T08:05:00Z", tags: ["capsid"] },
17  { id: "mention-queue", title: "What a mention queue is for", kind: "post", status: "draft", path: null, href: "/editor/mention-queue", liveHref: null, publishAt: null, publishedAt: null, updatedAt: "2026-10-08T21:40:00Z", notes: [{ text: "2 AI drafts waiting", tone: "info" }], tags: [] },
18  { id: "read-only-agent", title: "Notes on a read-only agent", kind: "post", status: "published", path: "/blog/read-only-agent", href: "/editor/read-only-agent", liveHref: "https://dustinedwards.info/blog/read-only-agent", publishAt: null, publishedAt: "2026-09-21T10:00:00Z", updatedAt: "2026-09-22T08:00:00Z", tags: ["agents", "capsid"] },
19  { id: "phage-lambda", title: "Phage lambda: lysis or lysogeny", kind: "post", status: "draft", path: null, href: "/editor/phage-lambda", liveHref: null, publishAt: null, publishedAt: null, updatedAt: "2026-10-01T12:00:00Z", notes: [{ text: "New draft" }, { text: "Held by a flag", tone: "warn" }] },
20  { id: "about", title: "About", kind: "page", status: "published", path: "/about", href: "/editor/about", liveHref: "https://dustinedwards.info/about", publishAt: null, publishedAt: "2026-06-01T09:00:00Z", updatedAt: "2026-09-02T11:00:00Z", tags: [] },
21];
22
23const WORDS: Record<string, string> = { "foxhound-release": "1,240", "uptime-strip": "860", "mention-queue": "1,530", "read-only-agent": "2,110", "phage-lambda": "3,020", about: "410" };
24
25function dataOf(rows: PostRow[], over: Partial<PostsData> = {}): PostsData {
26  const count = (s: PostRow["status"]) => rows.filter((r) => r.status === s).length;
27  return {
28    site: { name: "dustinedwards.info" },
29    query: {},
30    rows,
31    page: { nextCursor: null },
32    counts: { all: rows.length, draft: count("draft"), scheduled: count("scheduled"), published: count("published") },
33    kinds: ["post", "page"],
34    offers: { delete: true, schedule: true, tags: true, duplicate: true },
35    can: ALL,
36    newHref: "/editor/new",
37    extra: { columns: [{ id: "words", label: "Words", cells: WORDS }], toolbar: [{ intent: "ask-reindex", label: "Rebuild the Ask index" }] },
38    ...over,
39  };
40}
41
42const posts = (n: number) => (n === 1 ? "post" : "posts");
43
44interface Win {
45  postsLog: Array<Record<string, string | string[]>>;
46}
47const win = window as unknown as Win;
48win.postsLog = [];
49
50let copies = 0;
51
52// The in-memory site: what the content kit would do through site-api, enough to try each action.
53function useSite() {
54  const [rows, setRowsState] = useState(ROWS);
55  // The site's truth between renders: an Undo posted later reads the rows as they are then.
56  const live = useRef(ROWS);
57  const setRows = (f: (rs: PostRow[]) => PostRow[]) => {
58    live.current = f(live.current);
59    setRowsState(live.current);
60  };
61  const submit = async (form: FormData): Promise<IntentResult> => {
62    const entry: Record<string, string | string[]> = {};
63    for (const k of new Set(form.keys())) entry[k] = form.getAll(k).length > 1 ? form.getAll(k).map(String) : String(form.get(k));
64    win.postsLog.push(entry);
65    await new Promise((r) => setTimeout(r, 40));
66    const intent = String(form.get("intent"));
67    const ids = form.getAll("ids").map(String);
68    const tag = String(form.get("tag") ?? "").trim();
69    const rows = live.current;
70    const title = (id: string) => rows.find((r) => r.id === id)?.title ?? id;
71    switch (intent) {
72      case "unpublish":
73      case "republish": {
74        const to = intent === "unpublish" ? "draft" : "published";
75        setRows((rs) => rs.map((r) => (ids.includes(r.id) ? { ...r, status: to, publishAt: null, path: to === "draft" ? null : `/blog/${r.id}`, liveHref: to === "draft" ? null : `https://dustinedwards.info/blog/${r.id}` } : r)));
76        return intent === "unpublish"
77          ? { ok: true, message: `Unpublished ${ids.length === 1 ? `“${title(ids[0] ?? "")}”` : `${ids.length} posts`}.`, undo: { intent: "republish", fields: { ids } } }
78          : { ok: true, message: `Published ${ids.length === 1 ? `“${title(ids[0] ?? "")}”` : `${ids.length} posts`} again.` };
79      }
80      case "duplicate": {
81        const made = ids.map((id) => `${id}-copy-${++copies}`);
82        setRows((rs) => [...ids.map((id, i) => ({ ...(rs.find((r) => r.id === id) as PostRow), id: made[i] ?? id, title: `Copy of ${title(id)}`, status: "draft" as const, path: null, liveHref: null, notes: [] })), ...rs]);
83        return { ok: true, message: `Duplicated ${ids.length} ${posts(ids.length)} as drafts.`, undo: { intent: "remove-copies", fields: { ids: made } } };
84      }
85      case "remove-copies":
86        setRows((rs) => rs.filter((r) => !ids.includes(r.id)));
87        return { ok: true, message: `Removed the ${ids.length === 1 ? "copy" : `${ids.length} copies`}.` };
88      case "add-tag":
89      case "remove-tag": {
90        if (!tag) return { ok: false, message: "Type a tag first. Nothing was changed." };
91        const adding = intent === "add-tag";
92        // The site refuses a post with no front matter (Carrel's bulk.server.ts does).
93        const refused: string[] = ids.filter((id) => id === "phage-lambda");
94        const changed = ids.filter((id) => !refused.includes(id) && (rows.find((r) => r.id === id)?.tags ?? []).includes(tag) !== adding);
95        setRows((rs) => rs.map((r) => (changed.includes(r.id) ? { ...r, tags: adding ? [...(r.tags ?? []), tag] : (r.tags ?? []).filter((t) => t !== tag) } : r)));
96        const outcomes = ids.map((id) => (refused.includes(id) ? { id, ok: false, message: "This post has no front matter, so it cannot carry tags yet." } : { id, ok: true, message: changed.includes(id) ? undefined : adding ? "Already had it." : "Did not have it." }));
97        return {
98          ok: refused.length === 0,
99          message: `${adding ? "Added" : "Removed"} the tag ${tag} ${adding ? "to" : "from"} ${changed.length} ${posts(changed.length)}${refused.length ? `; ${refused.length} refused` : ""}.`,
100          outcomes,
101          undo: changed.length ? { intent: adding ? "remove-tag" : "add-tag", fields: { ids: changed, tag } } : undefined,
102        };
103      }
104      case "delete": {
105        const typed = String(form.get("confirm") ?? "");
106        if (typed !== String(ids.length)) {
107          return {
108            ok: false,
109            message: "Confirm first.",
110            confirm: { intent: "delete", title: `Delete ${ids.length} ${posts(ids.length)}?`, lead: "This removes them from the site and cannot be undone.", items: ids.map(title), action: `Delete ${ids.length} ${posts(ids.length)}`, typeToConfirm: String(ids.length), fields: { ids } },
111          };
112        }
113        setRows((rs) => rs.filter((r) => !ids.includes(r.id)));
114        return { ok: true, message: `Deleted ${ids.length} ${posts(ids.length)}.`, outcomes: ids.map((id) => ({ id, ok: true })) };
115      }
116      case "ask-reindex":
117        return { ok: true, message: "The Ask index is rebuilding; it takes about a minute." };
118      default:
119        return { ok: false, message: `Nothing here runs “${intent}”.` };
120    }
121  };
122  return { rows, submit };
123}
124
125function Editor() {
126  const { rows, submit } = useSite();
127  return <PostsList data={dataOf(rows)} action="/posts" submit={submit} now={NOW} />;
128}
129
130const outcomeResult: IntentResult = {
131  ok: false,
132  message: "Added the tag capsid to 2 posts; 1 refused.",
133  outcomes: [
134    { id: "foxhound-release", ok: true },
135    { id: "phage-lambda", ok: false, message: "This post has no front matter, so it cannot carry tags yet." },
136    { id: "mention-queue", ok: true },
137  ],
138  undo: { intent: "remove-tag", fields: { ids: ["foxhound-release", "mention-queue"], tag: "capsid" } },
139};
140
141const confirmResult: IntentResult = {
142  ok: false,
143  message: "Confirm first.",
144  confirm: { intent: "delete", title: "Delete 2 posts?", lead: "This removes them from the site and cannot be undone.", items: ["What a mention queue is for", "Phage lambda: lysis or lysogeny"], action: "Delete 2 posts", typeToConfirm: "2", fields: { ids: ["mention-queue", "phage-lambda"] } },
145};
146
147const reader = dataOf(ROWS.slice(0, 4), { can: { edit: false, publish: false, deleteContent: false, deleteMedia: false, decideMentions: false }, newHref: undefined, extra: undefined });
148const limited = dataOf(ROWS.slice(0, 3), { offers: { delete: false, schedule: true, tags: false, duplicate: true }, query: { sort: "title" }, page: { nextCursor: "c-2", sortedOnPage: true }, counts: { all: 128, draft: 9, scheduled: 2, published: 117 }, kinds: ["post"], extra: undefined });
149const emptyDrafts = dataOf([], { query: { status: "draft" }, counts: { all: 4, draft: 0, scheduled: 1, published: 3 }, extra: undefined });
150const emptyMatch = dataOf([], { query: { q: "lysogeny", kind: "page" }, extra: undefined });
151
152const mounts: Record<string, () => ReactNode> = {
153  editor: () => (
154    <MessageProvider>
155      <Editor />
156    </MessageProvider>
157  ),
158  outcomes: () => <PostsList data={dataOf(ROWS.slice(0, 5))} action="/posts" result={outcomeResult} now={NOW} />,
159  reader: () => <PostsList data={reader} action="/posts" now={NOW} />,
160  limited: () => <PostsList data={limited} action="/posts" now={NOW} labels={{ noun: "article" }} />,
161  "empty-drafts": () => <PostsList data={emptyDrafts} action="/posts" now={NOW} />,
162  "empty-match": () => <PostsList data={emptyMatch} action="/posts" now={NOW} />,
163  confirm: () => <PostsList data={dataOf(ROWS)} action="/posts" result={confirmResult} now={NOW} />,
164};
165
166for (const el of document.querySelectorAll<HTMLElement>("[data-mount]")) {
167  const make = mounts[el.dataset.mount ?? ""];
168  if (make) createRoot(el).render(<StrictMode>{make()}</StrictMode>);
169}
170
171const staticHost = document.getElementById("posts-static");
172if (staticHost) staticHost.innerHTML = renderToStaticMarkup(<PostsList data={dataOf(ROWS.slice(0, 4))} action="/posts" now={NOW} />, { identifierPrefix: "static" });