app/components/editor/frontmatter-fields.tsx

Functions

Imports

It imports app/lib/frontmatter.ts, app/lib/kind-words.ts, app/lib/legal.ts. Imported by app/routes/ai-draft.tsx, app/routes/editor.tsx.

Source

1// A post's frontmatter as labelled fields: editable in the editor, read-only on the AI draft page.
2// The editor keeps the one source string; these fields read from it and write back through
3// setField, so a key they do not show is never touched (app/lib/frontmatter.ts).
4
5import { Field } from "capsomer/react/field";
6
7import { joinSource, splitSource } from "@dustinedwards/site-api/frontmatter";
8import { BANNER_WORD, FIELDS, readFields, setField, type FieldKey } from "~/lib/frontmatter";
9import { kindNoun, kindWord } from "~/lib/kind-words";
10import { legalTypeOf, marker, sectionsUsed } from "~/lib/legal";
11
12const HINTS: Partial<Record<FieldKey, string>> = {
13  tags: "Separated by commas.",
14  key_takeaways: "One per line.",
15  date: "Year, month, day: 2026-10-04.",
16  site_name: "Filled into shared text as {{site_name}}.",
17  operator_name: "Filled into shared text as {{operator_name}}.",
18  contact: "An email address or a path. Shared text: {{contact}}.",
19  jurisdiction: "Shared text: {{jurisdiction}}.",
20  data_held: "What this site collects, separated by commas. Shared text: {{data_held}}.",
21  last_updated: "Set when the Owner publishes a changed text. Edit it only to correct it.",
22  banner: `Shows the word "${BANNER_WORD}" on the page until you are satisfied with it.`,
23};
24
25/** Sets one field in a source and returns the whole source. A source with no frontmatter is returned as it was. */
26function withField(source: string, key: FieldKey, value: string): string {
27  const parts = splitSource(source);
28  return parts.front === null ? source : joinSource({ ...parts, front: setField(parts.front, key, value) });
29}
30
31export type SectionChoice = { key: string; title: string };
32
33/**
34 * `kind` is the site's kind for the item. A post (or an item with no kind) gets the post's fields and a
35 * legal page the legal fields; any other kind keeps its content in keys of its own (a phage's host, a
36 * cohort's researchers), so it gets its whole frontmatter as written, for the site to check on save.
37 */
38export function FrontmatterFields({ source, onChange, readOnly, sections = [], kind = null }: { source: string; onChange?: (next: string) => void; readOnly?: boolean; sections?: SectionChoice[]; kind?: string | null }) {
39  const parts = splitSource(source);
40  const { front, body } = parts;
41  if (front === null) return null;
42  const values = readFields(front);
43  const legal = legalTypeOf(source) !== null;
44  if (!legal && kind && kind !== "post") {
45    return (
46      <fieldset className="app-fm">
47        <legend>{kindWord(kind)} details</legend>
48        <div className="app-fm-field" data-wide="">
49          <Field label="Frontmatter" help={`The site's own keys for this ${kindNoun(kind)}, as it stores them. The site checks them when you save.`}>
50            <textarea
51              className="cap-input app-fm-raw"
52              value={front}
53              readOnly={readOnly || !onChange}
54              rows={Math.min(Math.max(front.split("\n").length + 1, 4), 24)}
55              spellCheck={false}
56              onChange={(event) => onChange?.(joinSource({ ...parts, front: event.target.value }))}
57            />
58          </Field>
59        </div>
60      </fieldset>
61    );
62  }
63  const shown = FIELDS.filter((f) => (f.on === "all" || f.on === (legal ? "legal" : "post")) && (!readOnly || values[f.key] !== ""));
64  if (shown.length === 0) return null;
65  const used = sectionsUsed(body);
66  const unused = sections.filter((s) => !used.includes(s.key));
67  return (
68    <fieldset className="app-fm">
69      <legend>{legal ? "Legal page details" : "Post details"}</legend>
70      {shown.map((f) => {
71        if (f.kind === "flag") {
72          return (
73            <div key={f.key} className="app-fm-field" data-wide="">
74              <Field label={f.label} help={HINTS[f.key]}>
75                <input type="checkbox" checked={values[f.key] !== ""} disabled={readOnly || !onChange} onChange={(event) => onChange?.(withField(source, f.key, event.target.checked ? BANNER_WORD : ""))} />
76              </Field>
77            </div>
78          );
79        }
80        const wide = f.kind !== "line" && f.key !== "tags";
81        const props = {
82          className: "cap-input",
83          value: values[f.key],
84          readOnly: readOnly || !onChange,
85          onChange: (event: { target: { value: string } }) => onChange?.(withField(source, f.key, event.target.value)),
86        };
87        return (
88          <div key={f.key} className="app-fm-field" data-wide={wide ? "" : undefined}>
89            <Field label={f.label} help={HINTS[f.key]}>
90              {f.kind === "text" || f.kind === "lines" ? <textarea {...props} rows={f.kind === "lines" ? 4 : 2} /> : <input {...props} type="text" />}
91            </Field>
92          </div>
93        );
94      })}
95      {legal && !readOnly && onChange && unused.length > 0 ? (
96        <div className="app-fm-field" data-wide="">
97          <Field label="Add a shared section" help="Written at the end of the text. It is filled in from the details above each time the page is saved to the site; edit its wording on the Legal tab, not here.">
98            <select
99              className="cap-input"
100              value=""
101              onChange={(event) => {
102                const key = event.target.value;
103                if (key) onChange(`${source.replace(/\n*$/, "")}\n\n${marker(key)}\n`);
104              }}
105            >
106              <option value="">Choose a section</option>
107              {unused.map((s) => (
108                <option key={s.key} value={s.key}>
109                  {s.title}
110                </option>
111              ))}
112            </select>
113          </Field>
114        </div>
115      ) : null}
116    </fieldset>
117  );
118}