app/components/admin/social-previews.tsx

Functions

Imports

It imports app/lib/seo.ts. Imported by app/components/admin/settings-drawer.tsx.

Source

1import {
2  SERP_DESCRIPTION_LIMIT,
3  SERP_TITLE_LIMIT,
4  SITE,
5  postSocial,
6  truncateForSerp,
7} from "~/lib/seo";
8
9// Both read from postSocial, the function the post route's meta() calls, so they cannot drift silently.
10
11export type PreviewPost = {
12  slug: string;
13  title: string;
14  description: string;
15  coverSrc: string;
16  coverAlt: string;
17};
18
19// No ogImage: whether a build:og card exists is a fact about R2 the editor cannot know.
20function fromEditor(post: PreviewPost) {
21  return postSocial({
22    slug: post.slug,
23    title: post.title,
24    description: post.description,
25    coverImage: post.coverSrc || null,
26  });
27}
28
29export function SerpPreview({ post }: { post: PreviewPost }) {
30  const social = fromEditor(post);
31  const title = truncateForSerp(social.pageTitle, SERP_TITLE_LIMIT);
32  const description = truncateForSerp(social.description, SERP_DESCRIPTION_LIMIT);
33
34  return (
35    <div className="serp-preview">
36      <p className="serp-url">
37        {social.canonical.replace(/^https?:\/\//, "").replace(/\//g, " › ")}
38      </p>
39      <p className="serp-title">{title}</p>
40      <p className="serp-description">{description}</p>
41
42      {title !== social.pageTitle || description !== social.description ? (
43        <p className="serp-note">
44          {[
45            title !== social.pageTitle ? "title" : null,
46            description !== social.description ? "description" : null,
47          ]
48            .filter(Boolean)
49            .join(" and ")}{" "}
50          will be truncated. The limits are approximate: search engines cut by
51          pixel width, not by character count.
52        </p>
53      ) : null}
54    </div>
55  );
56}
57
58export function OgPreview({ post }: { post: PreviewPost }) {
59  const social = fromEditor(post);
60
61  return (
62    <div className="og-preview">
63      <div className="og-preview-image">
64        {/* No placeholder when there is no cover: the post gets the site mark, so that is what is shown. */}
65        <img
66          src={social.image}
67          alt={
68            social.usingDefaultImage
69              ? "The site mark, used because this post has no cover"
70              : post.coverAlt || "This post's cover image"
71          }
72          width={1200}
73          height={630}
74        />
75      </div>
76      <div className="og-preview-body">
77        <p className="og-preview-host">
78          {social.canonical.replace(/^https?:\/\//, "").split("/")[0]}
79        </p>
80        <p className="og-preview-title">{social.socialTitle}</p>
81        <p className="og-preview-description">{social.socialDescription}</p>
82      </div>
83
84      {social.usingDefaultImage ? (
85        <p className="og-preview-note">
86          No cover set, so this shares as the {SITE.name} mark. A generated card
87          may still replace it: build:og renders one per post and the editor
88          cannot see whether it exists yet.
89        </p>
90      ) : null}
91    </div>
92  );
93}