app/components/post-mentions.tsx

Functions

Imports

It imports app/lib/long-date.mjs, app/lib/webmention/urls.mjs. Imported by app/routes/blog.$slug.tsx.

Source

1import { longDateUTC } from "~/lib/long-date.mjs";
2import { safeHttpHref } from "~/lib/webmention/urls.mjs";
3
4import type { Route } from "../routes/+types/blog.$slug";
5
6/**
7 * Mention text is third party: rendered as escaped React children, never `dangerouslySetInnerHTML`,
8 * and the one `href` is re-parsed by `safeHttpHref`.
9 */
10function Mention({
11  mention,
12}: {
13  mention: Route.ComponentProps["loaderData"]["mentions"][number];
14}) {
15  /* A row whose URLs both fail still renders as text: dropping it would hide something the admin approved. */
16  const href = safeHttpHref(mention.authorUrl) ?? safeHttpHref(mention.sourceUrl);
17
18  /* Falls back to the source URL, a fact, never an invented name attributed to a real person. */
19  const name = mention.authorName ?? mention.sourceUrl;
20  const decided = longDateUTC(mention.decidedAt);
21
22  return (
23    <li>
24      {href ? (
25        <a href={href} rel="nofollow ugc noopener noreferrer">
26          {name}
27        </a>
28      ) : (
29        <span>{name}</span>
30      )}
31      {mention.excerpt ? <p className="post-mention-excerpt">{mention.excerpt}</p> : null}
32      {decided ? (
33        <time className="post-mention-date" dateTime={new Date(mention.decidedAt!).toISOString()}>
34          {decided}
35        </time>
36      ) : null}
37    </li>
38  );
39}
40
41/** Approved webmentions, each a `Mention`. */
42export function PostMentions({
43  mentions,
44}: {
45  mentions: Route.ComponentProps["loaderData"]["mentions"];
46}) {
47  return (
48    <section className="post-mentions" aria-labelledby="mentions-heading">
49      <h2 id="mentions-heading">Mentions</h2>
50      <ul>
51        {mentions.map((mention) => (
52          <Mention key={mention.id} mention={mention} />
53        ))}
54      </ul>
55    </section>
56  );
57}