app/routes/legal.tsx

Functions

Imports

It imports app/components/project-tabs.tsx, app/lib/content.server.ts, app/lib/context.ts, app/lib/frontmatter.ts, app/lib/legal.server.ts, app/lib/legal.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/sites.server.ts. No module of this repo imports it.

Source

1// The Legal tab: a site's privacy and terms pages, and the shared sections they are written from.
2// A legal page is an ordinary page on the site, edited in the normal editor; this tab lists them and
3// keeps the text every site says alike. Nothing here is a second editor for a page.
4
5import { Form, Link, useNavigation } from "react-router";
6import { Alert, Banner } from "capsomer/react/banner";
7import { Button } from "capsomer/react/button";
8import { Empty } from "capsomer/react/empty";
9import { Field } from "capsomer/react/field";
10import { Panel } from "capsomer/react/panel";
11import { Pill } from "capsomer/react/status";
12import { PageHead } from "capsomer/react/page-head";
13
14import { ProjectTabs } from "~/components/project-tabs";
15
16import { readDoc } from "~/lib/content.server";
17import { getEnv, getViewer } from "~/lib/context";
18import { splitSource } from "@dustinedwards/site-api/frontmatter";
19import { BANNER_WORD, readFields } from "~/lib/frontmatter";
20import { LEGAL_TYPES, legalItemId, sectionsUsed, type LegalType } from "~/lib/legal";
21import { deleteSection, listSections, saveSection, sectionsCurrent } from "~/lib/legal.server";
22import { requireSiteProject } from "~/lib/projects.server";
23import { can } from "~/lib/roles";
24import { siteEntry, SiteNotConnected } from "~/lib/sites.server";
25
26import type { Route } from "./+types/legal";
27
28export function meta({ loaderData: data }: Route.MetaArgs) {
29  return [{ title: data ? `Legal · ${data.project.name} · Carrel` : "Carrel" }];
30}
31
32const NAMES: Record<LegalType, string> = { privacy: "Privacy", terms: "Terms" };
33
34export async function loader({ params, context }: Route.LoaderArgs) {
35  const env = getEnv(context);
36  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "read");
37  const sections = await listSections(env.DB);
38  let siteError: string | null = null;
39  const pages = await Promise.all(
40    LEGAL_TYPES.map(async (type) => {
41      const id = legalItemId(type);
42      try {
43        const doc = await readDoc(env, project, id);
44        if (!doc) return { type, id, setUp: false as const };
45        const fields = readFields(splitSource(doc.source).front);
46        return {
47          type,
48          id,
49          setUp: true as const,
50          title: doc.title || NAMES[type],
51          status: doc.status,
52          lastUpdated: fields.last_updated,
53          draftBanner: fields.banner === BANNER_WORD,
54          version: doc.version,
55          shared: sectionsUsed(splitSource(doc.source).body),
56          behind: !(await sectionsCurrent(env.DB, doc.source)),
57        };
58      } catch (error) {
59        siteError = error instanceof SiteNotConnected ? error.detail : "The site did not answer.";
60        return { type, id, setUp: false as const };
61      }
62    }),
63  );
64  return {
65    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name, mentions: can(project.role, "read_mentions") },
66    canManage: can(project.role, "manage"),
67    siteError,
68    pages,
69    sections,
70  };
71}
72
73export async function action({ params, request, context }: Route.ActionArgs) {
74  const env = getEnv(context);
75  const viewer = getViewer(context);
76  const project = await requireSiteProject(env.DB, viewer, params.project, "read");
77  const form = await request.formData();
78  const intent = String(form.get("intent") ?? "");
79  const key = String(form.get("key") ?? "");
80  if (intent === "delete-section") {
81    await deleteSection(env.DB, project, key);
82    return { saved: null, error: null, deleted: key };
83  }
84  if (intent !== "save-section") throw new Response("Bad request", { status: 400 });
85  const result = await saveSection(env.DB, project, viewer, { key, title: String(form.get("title") ?? ""), body: String(form.get("body") ?? "") });
86  return result.ok ? { saved: key, error: null, deleted: null } : { saved: null, error: result.message, deleted: null };
87}
88
89export default function Legal({ loaderData, actionData }: Route.ComponentProps) {
90  const { project, canManage, siteError, pages, sections } = loaderData;
91  const navigation = useNavigation();
92  const saving = navigation.state !== "idle" ? String(navigation.formData?.get("key") ?? "") : null;
93
94  return (
95    <div className="app-page">
96      <PageHead title={project.name} lead={`The privacy and terms pages on ${project.site}, and the text every site shares.`} />
97      <ProjectTabs slug={project.slug} current="legal" mentions={project.mentions} />
98
99      {siteError ? (
100        <Banner tone="warn" title="The site's legal pages could not be read">
101          {siteError}
102        </Banner>
103      ) : null}
104      {actionData?.error ? <Alert tone="crit">{actionData.error}</Alert> : null}
105      {actionData?.saved ? (
106        <Banner tone="ok">
107          Saved "{actionData.saved}". A page picks up the new wording when it is next saved to the site, and its date changes when the Owner publishes it.
108        </Banner>
109      ) : null}
110      {actionData?.deleted ? <Banner tone="ok">Removed "{actionData.deleted}". A page that still names it is refused at publish until the marker is removed.</Banner> : null}
111
112      <Panel title="Pages" count={pages.length} src={`${project.site}'s content`} flush>
113        <div className="cap-table-wrap" role="region" aria-labelledby="legal-pages-caption" tabIndex={0}>
114          <table className="cap-table">
115            <caption id="legal-pages-caption" className="cap-sr-only">
116              Legal pages on {project.site}
117            </caption>
118            <thead>
119              <tr>
120                <th scope="col">Page</th>
121                <th scope="col">Status</th>
122                <th scope="col">Last updated</th>
123                <th scope="col">Shared text</th>
124              </tr>
125            </thead>
126            <tbody>
127              {pages.map((page) =>
128                page.setUp ? (
129                  <tr key={page.id}>
130                    <th scope="row">
131                      <Link className="cap-table-open" to={`/p/${project.slug}/e/${encodeURIComponent(page.id)}`}>
132                        {page.title}
133                      </Link>
134                      <span className="cap-table-aside">{page.id}</span>
135                    </th>
136                    <td>
137                      {page.status === "published" ? <Pill tone="ok">Published</Pill> : <Pill variant="secondary">Draft</Pill>}
138                      {page.draftBanner ? <Pill tone="warn">{BANNER_WORD} banner on</Pill> : null}
139                    </td>
140                    <td>{page.lastUpdated || "Not set"}</td>
141                    <td>
142                      {page.shared.length === 0 ? "None" : page.shared.join(", ")}
143                      {page.behind ? <Pill tone="warn">Shared text has changed</Pill> : null}
144                    </td>
145                  </tr>
146                ) : (
147                  <tr key={page.id}>
148                    <th scope="row">{NAMES[page.type]}</th>
149                    <td colSpan={3}>Not set up on this site</td>
150                  </tr>
151                ),
152              )}
153            </tbody>
154          </table>
155        </div>
156      </Panel>
157
158      <Panel title="Shared sections" count={sections.length} src="Carrel, used by every site">
159        <p>
160          Write a part once and every site's page can carry it. Put <code>{"{{site_name}}"}</code>, <code>{"{{operator_name}}"}</code>, <code>{"{{contact}}"}</code>,{" "}
161          <code>{"{{jurisdiction}}"}</code> or <code>{"{{data_held}}"}</code> in the text and each page fills in its own.
162        </p>
163        {sections.length === 0 ? (
164          <Empty kind="nothing-yet" title="No shared sections yet">
165            The parts every site says alike go here.
166          </Empty>
167        ) : null}
168        {sections.map((section) => (
169          <Form method="post" key={section.key} className="app-fm" aria-label={`Shared section ${section.key}`}>
170            <input type="hidden" name="key" value={section.key} />
171            <Field label={`${section.key}: title`}>
172              <input className="cap-input" name="title" defaultValue={section.title} readOnly={!canManage} />
173            </Field>
174            <Field label="Text">
175              <textarea className="cap-input" name="body" rows={5} defaultValue={section.body} readOnly={!canManage} />
176            </Field>
177            {canManage ? (
178              <div className="app-actions">
179                <Button type="submit" name="intent" value="save-section" pending={saving === section.key}>
180                  Save section
181                </Button>
182                <Button type="submit" name="intent" value="delete-section" variant="danger">
183                  Remove
184                </Button>
185              </div>
186            ) : null}
187          </Form>
188        ))}
189        {canManage ? (
190          <Form method="post" className="app-fm" aria-label="Add a shared section">
191            <Field label="Name" help="Lowercase words joined by hyphens, like cloudflare-hosting.">
192              <input className="cap-input" name="key" />
193            </Field>
194            <Field label="Title">
195              <input className="cap-input" name="title" />
196            </Field>
197            <Field label="Text">
198              <textarea className="cap-input" name="body" rows={5} />
199            </Field>
200            <div className="app-actions">
201              <Button type="submit" name="intent" value="save-section" variant="primary">
202                Add section
203              </Button>
204            </div>
205          </Form>
206        ) : (
207          <p>Only the Owner changes shared text.</p>
208        )}
209      </Panel>
210    </div>
211  );
212}