app/components/post-row.tsx

Functions

Imports

It imports app/lib/long-date.mjs, app/lib/tag-path.mjs. Imported by app/components/taxonomy-listing.tsx, app/routes/blog._index.tsx.

Source

1import { Link } from "react-router";
2
3import { longDateUTC } from "~/lib/long-date.mjs";
4import { tagPath } from "~/lib/tag-path.mjs";
5
6type RowPost = {
7  slug: string;
8  title: string;
9  description: string | null;
10  publishAt: Date | string | null;
11  readingTimeMinutes: number | null;
12  series: string | null;
13  part: number | null;
14  tags: string[];
15};
16
17export function PostRow({ post, mark }: { post: RowPost; mark?: string }) {
18  return (
19    // No `e-content`: this is a summary entry, and content here would be handed to consumers as the article.
20    <li className="entry h-entry">
21      <p className="entry-when">
22        {post.publishAt && (
23          <time className="dt-published" dateTime={new Date(post.publishAt).toISOString()}>
24            {longDateUTC(post.publishAt)}
25          </time>
26        )}
27        {post.readingTimeMinutes ? (
28          <span className="entry-minutes">{post.readingTimeMinutes} min</span>
29        ) : null}
30        {mark ? <span className="entry-mark">{mark}</span> : null}
31      </p>
32      <div className="entry-body">
33        <h2 className="entry-title p-name">
34          <Link className="u-url" to={`/writing/${post.slug}`}>
35            {post.title}
36          </Link>
37        </h2>
38        {post.series && (
39          <p className="entry-series">
40            {post.series}, part {post.part}
41          </p>
42        )}
43        {post.description && <p className="entry-summary p-summary">{post.description}</p>}
44        {post.tags.length > 0 && (
45          <p className="entry-tags">
46            {post.tags.map((tag) => (
47              <Link key={tag} to={tagPath(tag)}>
48                {tag}
49              </Link>
50            ))}
51          </p>
52        )}
53      </div>
54    </li>
55  );
56}
57
58export function Pager({
59  page,
60  pageCount,
61  hrefFor,
62}: {
63  page: number;
64  pageCount: number;
65  hrefFor: (page: number) => string;
66}) {
67  if (pageCount <= 1) return null;
68  return (
69    <nav className="pager" aria-label="Pagination">
70      {page > 1 && <Link to={hrefFor(page - 1)}>Newer</Link>}
71      <span className="pager-where">
72        Page {page} of {pageCount}
73      </span>
74      {page < pageCount && <Link to={hrefFor(page + 1)}>Older</Link>}
75    </nav>
76  );
77}