app/lib/blog-view.ts

Functions

Imports

It imports app/db/index.ts, app/lib/content/reading-time.mjs, app/lib/error-message.mjs. Imported by app/routes/blog.$slug.tsx, app/routes/preview.$token.tsx.

Source

1import type { getBlogPost, listSeriesParts } from "~/db";
2import { htmlHasMath } from "@drdustinedwards/site-helpers/render/math";
3import { countWords } from "~/lib/content/reading-time.mjs";
4import { errorMessage } from "~/lib/error-message.mjs";
5
6// The public post and the draft preview both render this one projection, so the preview cannot
7// quietly lose a section the public page has.
8
9type Neighbour = { slug: string; title: string } | null;
10
11// Neighbors widened to nullable: `getBlogPost`'s inferred type wrongly says a post always has one.
12type LoadedPost = Omit<
13  NonNullable<Awaited<ReturnType<typeof getBlogPost>>>,
14  "previous" | "next"
15> & { previous: Neighbour; next: Neighbour };
16
17type SeriesParts = Awaited<ReturnType<typeof listSeriesParts>>;
18
19// Counts rendered text, unlike the build's reading time, which counts markdown and must not move.
20function bodyWordCount(html: string | null) {
21  if (!html) return 0;
22  return countWords(html.replace(/<[^>]*>/g, " "));
23}
24
25// The page still renders with the section empty, but the corrupt row is logged by slug and column: the
26// rows are derived, so this is a render bug that `sync_posts` or a re-save repairs, not a reader's fault.
27function parseJson(slug: string, field: string, value: string | null, fallback: unknown) {
28  if (!value) return fallback;
29  try {
30    return JSON.parse(value);
31  } catch (error) {
32    console.error(
33      JSON.stringify({
34        alert: "post-json-unreadable",
35        slug,
36        field,
37        detail: errorMessage(error),
38      }),
39    );
40    return fallback;
41  }
42}
43
44export function blogPostView(post: LoadedPost, seriesParts: SeriesParts) {
45  const toc = parseJson(post.slug, "toc", post.toc, []) as Array<{
46    depth: number;
47    id: string;
48    text: string;
49  }>;
50
51  return {
52    toc,
53    seriesParts,
54    // Top level because root reads it by name through `useRouteLoaderData`, untyped.
55    hasMath: htmlHasMath(post.html),
56    post: {
57      slug: post.slug,
58      title: post.title,
59      description: post.description,
60      html: post.html ?? "",
61      publishAt: post.publishAt,
62      updatedAt: post.updatedAt,
63      coverImage: post.coverImage,
64      coverAlt: post.coverAlt,
65      ogImage: post.ogImage,
66      readingTimeMinutes: post.readingTimeMinutes,
67      wordCount: bodyWordCount(post.html),
68      sourceBlobSha: post.sourceBlobSha,
69      tags: post.tags,
70      previous: post.previous,
71      next: post.next,
72      series: post.series,
73      part: post.part,
74      ogTitle: post.ogTitle,
75      ogDescription: post.ogDescription,
76      backlinks: parseJson(post.slug, "backlinks", post.backlinks, []) as Array<{
77        slug: string;
78        title: string;
79      }>,
80      related: parseJson(post.slug, "related", post.related, []) as Array<{
81        slug: string;
82        title: string;
83        // Optional: rows stored before the field existed have none until the next sync.
84        description?: string | null;
85      }>,
86      furtherReading: parseJson(post.slug, "further_reading", post.furtherReading, []) as Array<{
87        title: string;
88        url: string;
89      }>,
90      writingStatus: post.writingStatus ?? null,
91      assumedAudience: post.assumedAudience ?? null,
92      keyTakeaways: parseJson(post.slug, "key_takeaways", post.keyTakeaways, null) as string[] | null,
93      changelog: parseJson(post.slug, "changelog", post.changelog, null) as Array<{
94        date: string;
95        note: string;
96      }> | null,
97    },
98  };
99}