app/routes/project.new.tsx

Functions

Imports

It imports app/components/frame.tsx, app/lib/content.server.ts, app/lib/context.ts, app/lib/projects.server.ts, app/lib/sites.server.ts. No module of this repo imports it.

Source

1// A new post starts as a Carrel draft under a slug the site does not hold yet. Nothing reaches the
2// site until the first Save, which sends it with expectedVersion null: the site refuses it if the
3// slug was taken in the meantime.
4
5import { Form, redirect, useNavigation } from "react-router";
6import { Button } from "capsomer/react/button";
7import { Field } from "capsomer/react/field";
8import { Panel } from "capsomer/react/panel";
9import { PageHead } from "capsomer/react/page-head";
10
11import { RouterLink } from "~/components/frame";
12
13import { autosave, readDoc } from "~/lib/content.server";
14import { getEnv, getViewer } from "~/lib/context";
15import { requireSiteProject } from "~/lib/projects.server";
16import { siteEntry, type SiteId } from "~/lib/sites.server";
17
18import type { Route } from "./+types/project.new";
19
20/** A site with a fixed set of items refuses a new one, so Carrel has no New post for it. */
21function newSourceFor(site: SiteId) {
22  const newSource = siteEntry(site).newSource;
23  if (!newSource) throw new Response("This site has a fixed set of items; Carrel cannot add one.", { status: 404 });
24  return newSource;
25}
26
27/** Stricter than the contract's id: lower case, digits and single hyphens, as the site's slugs are. */
28const SLUG = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
29
30export function meta() {
31  return [{ title: "New post · Carrel" }];
32}
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, "edit");
37  newSourceFor(project.site);
38  return { project: { slug: project.slug, name: project.name } };
39}
40
41export async function action({ params, request, context }: Route.ActionArgs) {
42  const env = getEnv(context);
43  const viewer = getViewer(context);
44  const project = await requireSiteProject(env.DB, viewer, params.project, "edit");
45  const newSource = newSourceFor(project.site);
46  const slug = String((await request.formData()).get("slug") ?? "").trim();
47  if (!SLUG.test(slug) || slug.length > 120) {
48    return { error: "Use lower-case letters, digits and single hyphens, such as my-new-post." };
49  }
50  if (await readDoc(env, project, slug)) {
51    return { error: `The site already has a post at ${slug}. Open it from the list instead.` };
52  }
53  const today = new Date().toISOString().slice(0, 10);
54  await autosave(env.DB, project, viewer, slug, { source: newSource(slug, today), baseVersion: null });
55  return redirect(`/p/${project.slug}/e/${slug}`);
56}
57
58export default function NewPost({ loaderData, actionData }: Route.ComponentProps) {
59  const busy = useNavigation().state !== "idle";
60  return (
61    <div className="app-page" data-narrow>
62      <PageHead
63        renderLink={RouterLink}
64        crumbs={[{ label: loaderData.project.name, href: `/p/${loaderData.project.slug}` }, { label: "New post" }]}
65        title="New post"
66        lead="A new post starts as a draft in Carrel, under the address you give it."
67      />
68      <Panel title="Address">
69        <Form method="post" className="app-form">
70          <Field label="Slug, the post's address on the site" required help="Lower-case letters, digits and single hyphens, such as my-new-post. The site gives it its address when it is published. It stays a draft in Carrel until you save it to the site." error={actionData?.error} announce>
71            <input className="cap-input" name="slug" required pattern="[a-z0-9]+(-[a-z0-9]+)*" autoComplete="off" spellCheck={false} data-error-pattern-mismatch="Use lower-case letters, digits and single hyphens, such as my-new-post." />
72          </Field>
73          <div className="app-actions">
74            <Button type="submit" variant="primary" pending={busy}>
75              Start writing
76            </Button>
77          </div>
78        </Form>
79      </Panel>
80    </div>
81  );
82}