app/components/admin/post-metadata.tsx

Functions

Imports

It imports app/lib/editor/frontmatter.ts. Imported by app/components/admin/post-editor.tsx.

Source

1import { Disclosure } from "capsomer/react/disclosure";
2
3import {
4  FR_CONTROL,
5  FR_INTERNAL,
6  FR_TITLE,
7  FR_URL,
8  splitReading,
9} from "~/lib/editor/frontmatter";
10
11// Not in the settings drawer: that is a showModal() dialog, and these fields must work without script.
12// An absent field never means cleared.
13export function PostMetadata({
14  formId,
15  featured,
16  series,
17  part,
18  furtherReading,
19  ogTitle,
20  ogDescription,
21  title,
22  description,
23  linkTargets,
24  currentSlug,
25}: {
26  formId: string;
27  featured: boolean;
28  series: string;
29  part: string;
30  furtherReading: string;
31  ogTitle: string;
32  ogDescription: string;
33  title: string;
34  description: string;
35  linkTargets: { slug: string; title: string; state: string }[];
36  currentSlug: string;
37}) {
38  const reading = splitReading(furtherReading);
39  const chosen = new Set(
40    reading.internal.map((item) => item.url.replace(/^\/writing\//, "")),
41  );
42
43  // Published only: further reading is public, so offering a draft would be offering a link that 404s.
44  const candidates = linkTargets.filter(
45    (target) => target.state === "published" && target.slug !== currentSlug,
46  );
47
48  // One spare row is what makes adding a link possible without script.
49  const rows = [...reading.external, { title: "", url: "" }];
50
51  return (
52    <Disclosure
53      summary={
54        <>
55          Post metadata{" "}
56          <span className="cap-muted">Featured, series, further reading, social overrides</span>
57        </>
58      }
59    >
60      <div className="app-form">
61        <fieldset className="cap-field">
62          <legend className="cap-field-label">Index</legend>
63          {/* An unticked checkbox submits nothing, so this carries the "false". It comes first
64              because `fieldsFromForm` takes the LAST value. */}
65          <input type="hidden" form={formId} name="featured" value="false" />
66          <label className="cap-check">
67            <input
68              type="checkbox"
69              form={formId}
70              name="featured"
71              value="true"
72              defaultChecked={featured}
73            />
74            Featured
75          </label>
76          <p className="cap-field-help">The index shows one featured post as its hero.</p>
77        </fieldset>
78
79        <fieldset className="cap-field">
80          <legend className="cap-field-label">Series</legend>
81          <p className="cap-field-help">
82            Both travel together. A part with no series is refused by the schema.
83          </p>
84          <div className="app-fields">
85            <div className="cap-field">
86              <label className="cap-field-label" htmlFor="field-series">
87                Series name
88              </label>
89              <input
90                id="field-series"
91                className="cap-input"
92                form={formId}
93                name="series"
94                type="text"
95                defaultValue={series}
96                autoComplete="off"
97              />
98            </div>
99            <div className="cap-field">
100              <label className="cap-field-label" htmlFor="field-part">
101                Part
102              </label>
103              <input
104                id="field-part"
105                className="cap-input"
106                form={formId}
107                name="part"
108                type="number"
109                min="1"
110                step="1"
111                defaultValue={part}
112                inputMode="numeric"
113              />
114            </div>
115          </div>
116        </fieldset>
117
118        <fieldset className="cap-field">
119          <legend className="cap-field-label">Social overrides</legend>
120          <div className="app-fields">
121            <div className="cap-field">
122              <label className="cap-field-label" htmlFor="field-og-title">
123                OG title
124              </label>
125              <input
126                id="field-og-title"
127                className="cap-input"
128                form={formId}
129                name="ogTitle"
130                type="text"
131                defaultValue={ogTitle}
132                autoComplete="off"
133                aria-describedby="og-title-note"
134              />
135              <p className="cap-field-help" id="og-title-note">
136                Left empty, cards use the post title: {title.trim() || "(untitled)"}
137              </p>
138            </div>
139            <div className="cap-field">
140              <label className="cap-field-label" htmlFor="field-og-description">
141                OG description
142              </label>
143              <input
144                id="field-og-description"
145                className="cap-input"
146                form={formId}
147                name="ogDescription"
148                type="text"
149                defaultValue={ogDescription}
150                autoComplete="off"
151                aria-describedby="og-description-note"
152              />
153              <p className="cap-field-help" id="og-description-note">
154                Left empty, cards use the description: {description.trim() || "(none set)"}
155              </p>
156            </div>
157          </div>
158        </fieldset>
159
160        <fieldset className="cap-field">
161          <legend className="cap-field-label">Further reading</legend>
162          {/* The marker says this control was on the page, so an empty result means the author
163              cleared the list; the hidden value is the fallback for every other caller. */}
164          <input type="hidden" form={formId} name={FR_CONTROL} value="1" />
165          <input type="hidden" form={formId} name="furtherReading" value={furtherReading} />
166
167          <p className="cap-field-help">
168            External links, and posts from this site. Both render as one list under the post.
169          </p>
170
171          {rows.map((row, index) => (
172            // eslint-disable-next-line react/no-array-index-key
173            <div key={index} className="app-fields">
174              <div className="cap-field">
175                <label className="cap-field-label" htmlFor={`field-fr-title-${index}`}>
176                  Title
177                </label>
178                <input
179                  id={`field-fr-title-${index}`}
180                  className="cap-input"
181                  form={formId}
182                  name={FR_TITLE}
183                  type="text"
184                  defaultValue={row.title}
185                  autoComplete="off"
186                />
187              </div>
188              <div className="cap-field">
189                <label className="cap-field-label" htmlFor={`field-fr-url-${index}`}>
190                  URL
191                </label>
192                <input
193                  id={`field-fr-url-${index}`}
194                  className="cap-input"
195                  form={formId}
196                  name={FR_URL}
197                  type="url"
198                  defaultValue={row.url}
199                  autoComplete="off"
200                  placeholder="https://"
201                />
202              </div>
203            </div>
204          ))}
205
206          {candidates.length > 0 ? (
207            <fieldset className="cap-field">
208              <legend className="cap-field-label">Posts from this site</legend>
209              <p className="cap-field-help">Stored as a path, so these survive a change of domain.</p>
210              <div className="cap-field-options">
211                {candidates.map((target) => (
212                  <label key={target.slug} className="cap-check">
213                    {/* Slug and title in one value, so the picker adds one field name however long the blog gets. */}
214                    <input
215                      type="checkbox"
216                      form={formId}
217                      name={FR_INTERNAL}
218                      value={JSON.stringify({
219                        slug: target.slug,
220                        title: target.title,
221                      })}
222                      defaultChecked={chosen.has(target.slug)}
223                    />
224                    {target.title}
225                  </label>
226                ))}
227              </div>
228            </fieldset>
229          ) : (
230            <p className="cap-field-help">No other published post to link to yet.</p>
231          )}
232        </fieldset>
233      </div>
234    </Disclosure>
235  );
236}