app/components/post-rail.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/blog.$slug.tsx.

Source

1import type { Route } from "../routes/+types/blog.$slug";
2
3type LoadedPost = Route.ComponentProps["loaderData"]["post"];
4
5/** Below this, a contents list is furniture rather than a map. */
6const TOC_MIN = 3;
7
8export function ymd(value: Date | string | number) {
9  return new Date(value).toISOString().slice(0, 10);
10}
11
12/** The rail: the machine-readable dates and, past `TOC_MIN` sections, the contents. */
13export function PostRail({
14  post,
15  revisedLabel,
16  sections,
17}: {
18  post: LoadedPost;
19  revisedLabel: string | null;
20  sections: Route.ComponentProps["loaderData"]["toc"];
21}) {
22  /* One authored date: `created_at` is when the sync ran, not when the post was written. */
23  return (
24    <div className="post-rail u-rail">
25      <p className="post-machine">
26        {post.publishAt && (
27          <>
28            <b>
29              <time className="dt-published" dateTime={new Date(post.publishAt).toISOString()}>
30                {ymd(post.publishAt)}
31              </time>
32            </b>
33            first published
34          </>
35        )}
36        {/* Conditional: emitting `updatedAt` regardless would publish a sync timestamp as an edit. */}
37        {revisedLabel && (
38          <>
39            <b>
40              <time className="dt-updated" dateTime={new Date(post.updatedAt!).toISOString()}>
41                {ymd(post.updatedAt!)}
42              </time>
43            </b>
44            Updated
45          </>
46        )}
47      </p>
48
49      {sections.length >= TOC_MIN && (
50        <nav className="post-toc" aria-labelledby="contents-heading">
51          <p id="contents-heading">Contents</p>
52          <ol>
53            {sections.map((entry) => (
54              <li key={entry.id}>
55                <a href={`#${entry.id}`}>{entry.text}</a>
56              </li>
57            ))}
58          </ol>
59        </nav>
60      )}
61    </div>
62  );
63}