app/routes/admin.kb.preview.tsx

Functions

Imports

It imports app/components/procedure.tsx, app/kb/form.server.ts, app/kb/procedures/save.server.ts, app/lib/context.ts, app/lib/error-message.mjs. No module of this repo imports it.

Source

1import { renderToStaticMarkup } from "react-dom/server";
2
3import { ProcedureView } from "~/components/procedure";
4import { getEnv } from "~/lib/context";
5import { errorMessage } from "~/lib/error-message.mjs";
6import { rawFromForm } from "~/kb/form.server";
7import { compile } from "~/kb/procedures/save.server";
8
9import type { Route } from "./+types/admin.kb.preview";
10
11// The public page's stylesheets, in the order its layout and route link them (legacy-public.tsx, procedure.tsx), which
12// the preview frame links: the admin links none of them.
13import appCss from "~/app.css?url";
14import pageShellCss from "~/styles/page-shell.css?url";
15import shellCss from "~/styles/shell.css?url";
16import proseCss from "~/styles/prose.css?url";
17import procedureCss from "~/styles/procedure.css?url";
18
19const STYLES = [appCss, pageShellCss, shellCss, proseCss, procedureCss];
20
21/**
22 * The Knowledge Base editor's live preview (docs/KNOWLEDGE-BASE.md): the entry the form describes, compiled by the save's
23 * own compile and drawn by the public page's own component, so the preview is the page. Read only although it is a POST:
24 * a whole form does not belong in a query string, and nothing is written. A file the checks refuse answers with their
25 * messages, as a 200, since a half-made edit is ordinary.
26 */
27export async function action({ request, params, context }: Route.ActionArgs) {
28  if (request.method !== "POST") return Response.json({ error: "Method not allowed" }, { status: 405 });
29  const slug = params.slug;
30  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)) return Response.json({ error: "No such entry." }, { status: 404 });
31  const form = await request.formData();
32  const written = rawFromForm(String(form.get("original") ?? ""), String(form.get("model") ?? ""));
33  if ("errors" in written) return Response.json({ errors: written.errors });
34  try {
35    const compiled = await compile(getEnv(context), slug, written.raw);
36    if (!compiled.ok) return Response.json({ errors: compiled.errors });
37    const { record } = compiled;
38    const count = record.profile === "recipe" ? (record.servings ?? 1) : (record.scale?.count ?? 1);
39    const html = renderToStaticMarkup(
40      <main className="page">
41        <div className="page-inner">
42          <h1 className="page-title">{record.title}</h1>
43          <ProcedureView record={record} count={count} factor={1} sheetPath={null} />
44        </div>
45      </main>,
46    );
47    return Response.json({ html, styles: STYLES });
48  } catch (error) {
49    console.error(JSON.stringify({ alert: "kb-preview-failed", detail: errorMessage(error) }));
50    return Response.json({ error: `The preview failed: ${errorMessage(error)}` }, { status: 500 });
51  }
52}