app/routes/book.chapter.tsx

Functions

Imports

It imports app/components/frame.tsx, app/lib/books.server.ts, app/lib/context.ts, app/lib/novels/export.ts, app/lib/novels/frontmatter.ts, app/lib/novels/layout.ts, app/lib/roles.ts. No module of this repo imports it.

Source

1// One chapter: its scenes in order with their headers and Dustin's beats, and the chapter's text read
2// straight through, as the index last had it from Git.
3
4import type { ReactNode } from "react";
5import { Form, Link, redirect } from "react-router";
6import { Alert } from "capsomer/react/banner";
7import { Button } from "capsomer/react/button";
8import { Field } from "capsomer/react/field";
9import { Panel } from "capsomer/react/panel";
10import { Row, RowList } from "capsomer/react/row-list";
11import { Status } from "capsomer/react/status";
12import { PageHead } from "capsomer/react/page-head";
13
14import { RouterLink } from "~/components/frame";
15
16import { indexedFile, listFiles, listFindings, requireBookProject } from "~/lib/books.server";
17import { getEnv, getViewer } from "~/lib/context";
18import { blocksToHtml, parseProse } from "~/lib/novels/export";
19import { parseFile } from "~/lib/novels/frontmatter";
20import { chapterOf, nextNumbered, readingOrder, slugify, titleFromSegment } from "~/lib/novels/layout";
21import { can } from "~/lib/roles";
22
23import type { Route } from "./+types/book.chapter";
24
25export function meta({ loaderData: data }: Route.MetaArgs) {
26  return [{ title: data ? `${data.chapter.title} · ${data.project.name} · Carrel` : "Carrel" }];
27}
28
29export async function loader({ params, context }: Route.LoaderArgs) {
30  const env = getEnv(context);
31  const project = await requireBookProject(env.DB, getViewer(context), params.project, "read");
32  const files = readingOrder(await listFiles(env.DB, project)).filter((f) => chapterOf(f.path) === params.chapter);
33  if (files.length === 0) throw new Response("Not found", { status: 404 });
34  const open = await listFindings(env.DB, project, { status: "open" });
35
36  const scenes = await Promise.all(
37    files.map(async (f) => {
38      const source = (await indexedFile(env.DB, project, f.path))?.source ?? "";
39      const header = f.meta.kind === "scene" ? f.meta.header : null;
40      return {
41        path: f.path,
42        name: titleFromSegment(f.path.split("/")[2]!.replace(/\.md$/, "")),
43        header,
44        words: f.words,
45        flags: open.filter((o) => o.path === f.path).length,
46        // Escaped by blocksToHtml: scene text is never trusted as markup.
47        html: blocksToHtml(parseProse(parseFile(source).body)),
48      };
49    }),
50  );
51  return {
52    project: { slug: project.slug, name: project.name },
53    chapter: { slug: params.chapter, title: titleFromSegment(params.chapter) },
54    canEdit: can(project.role, "edit"),
55    scenes,
56  };
57}
58
59export async function action({ params, request, context }: Route.ActionArgs) {
60  const env = getEnv(context);
61  const project = await requireBookProject(env.DB, getViewer(context), params.project, "edit");
62  const slug = slugify(String((await request.formData()).get("name") ?? ""));
63  if (!slug) return { error: "Give the scene a name with at least one letter or digit." };
64  const scenes = (await listFiles(env.DB, project))
65    .filter((f) => chapterOf(f.path) === params.chapter)
66    .map((f) => f.path.split("/")[2]!.replace(/\.md$/, ""));
67  return redirect(`/b/${project.slug}/f/chapters/${params.chapter}/${nextNumbered(scenes, slug)}.md`);
68}
69
70export default function Chapter({ loaderData, actionData }: Route.ComponentProps) {
71  const { project, chapter, canEdit, scenes } = loaderData;
72  const base = `/b/${project.slug}`;
73  const link = ({ href, children }: { href: string; children: ReactNode }) => <Link to={href}>{children}</Link>;
74  return (
75    <div className="app-page">
76      <PageHead
77        renderLink={RouterLink}
78        crumbs={[{ label: project.name, href: base }, { label: chapter.title }]}
79        title={chapter.title}
80        lead={`${scenes.length} scene${scenes.length === 1 ? "" : "s"}, ${scenes.reduce((n, s) => n + s.words, 0).toLocaleString()} words.`}
81      />
82
83      {actionData?.error ? <Alert tone="crit">{actionData.error}</Alert> : null}
84
85      <div className="app-split" data-aside data-flip>
86        <Panel
87          title="Scenes"
88          count={scenes.length}
89          flush
90          footer={
91            canEdit ? (
92              <Form method="post" className="app-inline-form">
93                <Field label="New scene">
94                  <input className="cap-input" name="name" required placeholder="Scene name" autoComplete="off" />
95                </Field>
96                <Button type="submit">Start it</Button>
97              </Form>
98            ) : undefined
99          }
100        >
101          <RowList label="Scenes">
102            {scenes.map((s) => (
103              <Row
104                key={s.path}
105                title={s.name}
106                href={`${base}/f/${s.path}`}
107                renderLink={link}
108                status={s.flags ? <Status tone="warn">{s.flags} flagged</Status> : undefined}
109                detail={
110                  s.header ? (
111                    <span className="app-scene-header">
112                      <span><b>Point of view</b> <span>{s.header.pov || "(none)"}</span></span>
113                      <span><b>Date</b> <span>
114                          {s.header.date || "(none)"}
115                          {s.header.flashback ? " (flashback)" : ""}
116                        </span></span>
117                      <span><b>Location</b> <span>{s.header.location || "(none)"}</span></span>
118                      <span><b>Present</b> <span>{s.header.characters.join(", ") || "(none)"}</span></span>
119                      <span><b>Goal</b> <span>{s.header.goal || "(none)"}</span></span>
120                      <span><b>Conflict</b> <span>{s.header.conflict || "(none)"}</span></span>
121                      <span><b>Outcome</b> <span>{s.header.outcome || "(none)"}</span></span>
122                    </span>
123                  ) : undefined
124                }
125                meta={<span className="cap-num">{s.words.toLocaleString()} words</span>}
126              />
127            ))}
128          </RowList>
129        </Panel>
130
131        <Panel title="The chapter, read through" headingId="text-heading">
132          <div data-context="prose" className="app-reading">
133            {scenes.map((s, i) => (
134              <div key={s.path}>
135                {i > 0 ? (
136                  <p className="app-scene-break" aria-hidden="true">
137                    * * *
138                  </p>
139                ) : null}
140                <div dangerouslySetInnerHTML={{ __html: s.html }} />
141              </div>
142            ))}
143          </div>
144        </Panel>
145      </div>
146    </div>
147  );
148}