app/components/admin/title-slug-row.tsx

Functions

Imports

It imports app/lib/content/slug.mjs, app/lib/series-path.mjs. Imported by app/components/admin/post-editor.tsx.

Source

1import type { Dispatch, SetStateAction } from "react";
2
3import {
4  SLUG_ATTRIBUTE_PATTERN,
5  SLUG_MAX_LENGTH,
6  SLUG_PATTERN,
7} from "~/lib/content/slug.mjs";
8import { seriesSlug } from "~/lib/series-path.mjs";
9
10const TITLE_LIMIT = 70;
11
12// Strips rather than transliterates: a wrong guess at a non-ASCII character lands in a permanent URL.
13// The series rule, with apostrophes dropped rather than split on ("don't" is "dont") and a length cap.
14function slugify(title: string) {
15  return seriesSlug(title.replace(/['’]/g, ""))
16    .slice(0, 80)
17    .replace(/-+$/, "");
18}
19
20/** The title with its length count and, for a new post, the slug it derives until the author pins one. */
21export function TitleSlugRow({
22  title,
23  setTitle,
24  slug,
25  setSlug,
26  slugPinned,
27  setSlugPinned,
28  isNew,
29  existingSlugs,
30}: {
31  title: string;
32  setTitle: Dispatch<SetStateAction<string>>;
33  slug: string;
34  setSlug: Dispatch<SetStateAction<string>>;
35  slugPinned: boolean;
36  setSlugPinned: Dispatch<SetStateAction<boolean>>;
37  isNew: boolean;
38  existingSlugs: string[];
39}) {
40  const slugValid = SLUG_PATTERN.test(slug);
41  const slugTaken = isNew && slug !== "" && existingSlugs.includes(slug);
42  const slugProblem = slug === "" ? null : !slugValid ? "lowercase kebab-case only" : slugTaken ? "already taken" : null;
43
44  return (
45    <>
46      <div className="cap-field">
47        <label className="cap-field-label" htmlFor="field-title">
48          Title
49        </label>
50        <input
51          id="field-title"
52          name="title"
53          className="cap-input"
54          value={title}
55          onChange={(event) => {
56            setTitle(event.target.value);
57            if (isNew && !slugPinned) setSlug(slugify(event.target.value));
58          }}
59          placeholder="Untitled"
60          required
61          autoComplete="off"
62          aria-describedby="title-count"
63        />
64        <span
65          id="title-count"
66          className="cap-field-help"
67          data-over={title.length > TITLE_LIMIT ? "" : undefined}
68        >
69          {title.length}/{TITLE_LIMIT}
70          {title.length > TITLE_LIMIT ? " (over the length search results show)" : ""}
71        </span>
72      </div>
73
74      {isNew ? (
75        <div className="cap-field" data-invalid={slugProblem ? "" : undefined}>
76          <label className="cap-field-label" htmlFor="field-slug">
77            Slug
78            {/* Hidden from the name: the full sentence reaches the field by describedby. */}
79            {slugProblem ? <span aria-hidden="true"> ({slugProblem})</span> : null}
80          </label>
81          <div className="cap-input-group" role="group" aria-label="Slug">
82            <div className="cap-input-addon" data-align="inline-start">
83              <span className="cap-input-group-text">/writing/</span>
84            </div>
85            <input
86              id="field-slug"
87              className="cap-input"
88              name="slug"
89              value={slug}
90              onChange={(event) => {
91                setSlugPinned(true);
92                setSlug(event.target.value);
93              }}
94              required
95              pattern={SLUG_ATTRIBUTE_PATTERN}
96              /* An HTML pattern cannot carry a length without a lookahead, so the bound is its own attribute. */
97              maxLength={SLUG_MAX_LENGTH}
98              aria-invalid={slugProblem !== null}
99              aria-describedby={slugProblem ? "slug-problem slug-hint" : "slug-hint"}
100              autoComplete="off"
101            />
102          </div>
103          {slugProblem ? (
104            <p className="cap-field-error" id="slug-problem">
105              {slugTaken
106                ? `A post already lives at /writing/${slug}. Saving would be refused.`
107                : "Lowercase letters, digits and single hyphens."}
108            </p>
109          ) : null}
110          <span className="cap-field-help" id="slug-hint">
111            Derived from the title until you change it. Fixed after the first save, because it is
112            the filename and the public URL.
113          </span>
114        </div>
115      ) : null}
116    </>
117  );
118}