app/components/editor/search-sharing.tsx

Functions

Imports

It imports app/lib/seo-checks.ts. Imported by app/routes/ai-draft.tsx, app/routes/editor.tsx.

Source

1// The search and sharing checks on a post, with the search result and the link card it will make
2// (app/lib/seo-checks.ts), in the editor and on an AI draft's page. The checks flag; the writer decides.
3// The previews are Capsomer's share preview, given the text already cut.
4
5import { Empty } from "capsomer/react/empty";
6import { Panel } from "capsomer/react/panel";
7import { OgCardPreview, SerpPreview } from "capsomer/react/share-preview";
8import { Status } from "capsomer/react/status";
9
10import type { SeoCheck } from "~/lib/seo-checks";
11
12export function SearchSharingPanel({ check }: { check: SeoCheck }) {
13  const { findings, preview } = check;
14  const host = preview.host ?? "the site";
15  const address = preview.url ? preview.url.replace(/^https?:\/\//, "") : host;
16  return (
17    <Panel title="Search and sharing" id="seo" count={findings.length} src="As a search result and a shared link">
18      <div className="app-stack">
19        {findings.length === 0 ? (
20          <Empty kind="all-clear" flush title="Nothing flagged">
21            The title and description fit a search result, every image has alt text, and the post has a card image.
22          </Empty>
23        ) : (
24          <ul className="app-flags" aria-label="Search and sharing checks">
25            {findings.map((f, i) => (
26              <li key={i}>
27                <Status tone="warn">{f.line ? `Line ${f.line}` : "Flag"}</Status>
28                <span>
29                  {f.message}
30                  {f.excerpt ? (
31                    <>
32                      {" "}
33                      <q className="cap-muted">{f.excerpt}</q>
34                    </>
35                  ) : null}
36                </span>
37              </li>
38            ))}
39          </ul>
40        )}
41        <div className="app-share-previews">
42          <SerpPreview
43            url={address.replace(/\//g, " › ")}
44            title={preview.search.title || "No title"}
45            description={preview.search.description || "No description"}
46            note={preview.url ? undefined : "The address is the site's to give when it publishes the post."}
47          />
48          <OgCardPreview
49            image={
50              preview.card.image ? (
51                <img src={preview.card.image} alt="This post's card image" width={1200} height={630} />
52              ) : (
53                <span className="app-share-noimage">No card image</span>
54              )
55            }
56            host={host}
57            title={preview.card.title || "No title"}
58            description={preview.card.description}
59            note={preview.card.image ? undefined : "With no card image of its own, the post shares with the site's default image, or with none."}
60          />
61          <dl className="app-facts">
62            <dt>Canonical URL</dt>
63            <dd className="cap-mono">{preview.url ?? "Not yet: set when the site publishes it"}</dd>
64            <dt>Image URL</dt>
65            <dd className="cap-mono">{preview.card.image ?? "None"}</dd>
66          </dl>
67        </div>
68      </div>
69    </Panel>
70  );
71}