Visibility phase 4: no-login public viewer pages + robots

Adds the public viewing surface in the UI — shareable, no-login pages backed by the redaction-safe /api/v1/public API: - /p/[treeId]: tree name + searchable people directory (living people show as "Living person"; counts; links to person pages). - /p/[treeId]/persons/[personId]: person detail — events, alternate names, and parents/partners/children as links to other public person pages. - app/p/layout.tsx: slim public header (logo + Sign in), no app sidebar. - robots.ts: allow /p/, disallow the authenticated app sections. - Trees list: a "Public page ↗" link on every non-private tree so the owner can grab the shareable URL. Client-rendered (same-origin fetch via Caddy). Follow-up (needs a frontend SSR→backend base URL + a compose/env deploy step, so not auto-applied by Watchtower): true server-rendering for SEO, a dynamic sitemap of public trees, and per-page noindex for unlisted/site_members. tsc clean; next build passes (both routes dynamic). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
2026-06-09 09:31:56 -04:00
parent 91a7ce1dc2
commit b8405ced07
5 changed files with 339 additions and 0 deletions
@@ -0,0 +1,129 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import type { components } from "@/lib/api/schema";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+type Person = components["schemas"]["PersonRead"];
+type Event = components["schemas"]["EventRead"];
+type Tree = components["schemas"]["PublicTreeRead"];
+
+// Public, no-login view of a tree. Everything here is already redacted by the
+// /api/v1/public surface (living people show as "Living person").
+export default function PublicTreePage() {
+  const { treeId } = useParams<{ treeId: string }>();
+  const [tree, setTree] = useState<Tree | null>(null);
+  const [people, setPeople] = useState<Person[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);
+  const [status, setStatus] = useState<"loading" | "ready" | "notfound">("loading");
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const t = await api.GET("/api/v1/public/trees/{tree_id}", {
+        params: { path: { tree_id: treeId } },
+      });
+      if (cancelled) return;
+      if (!t.data) {
+        setStatus("notfound");
+        return;
+      }
+      const [p, e] = await Promise.all([
+        api.GET("/api/v1/public/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
+        api.GET("/api/v1/public/trees/{tree_id}/events", { params: { path: { tree_id: treeId } } }),
+      ]);
+      if (cancelled) return;
+      setTree(t.data);
+      setPeople(p.data ?? []);
+      setEvents(e.data ?? []);
+      setStatus("ready");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [treeId]);
+
+  const years = useMemo(() => {
+    const m = new Map<string, string>();
+    const yr = (e: Event) => (e.date_start ? e.date_start.slice(0, 4) : e.date_value ?? "");
+    for (const p of people) {
+      const b = events.find((e) => e.person_id === p.id && e.event_type === "birth");
+      const d = events.find((e) => e.person_id === p.id && e.event_type === "death");
+      const parts = [b ? yr(b) : "", d ? yr(d) : ""];
+      if (parts[0] || parts[1]) m.set(p.id, `${parts[0]}–${parts[1]}`.replace(/^–$/, ""));
+    }
+    return m;
+  }, [people, events]);
+
+  const shown = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const sorted = [...people].sort((a, b) =>
+      (a.primary_name ?? "").localeCompare(b.primary_name ?? ""),
+    );
+    return (q ? sorted.filter((p) => (p.primary_name ?? "").toLowerCase().includes(q)) : sorted).slice(
+      0,
+      300,
+    );
+  }, [people, search]);
+
+  if (status === "loading") return <p className="text-[var(--muted)]">Loading…</p>;
+  if (status === "notfound")
+    return (
+      <div className="space-y-2">
+        <h1 className="text-2xl font-semibold">Not available</h1>
+        <p className="text-[var(--muted)]">
+          This tree isn’t public, or the link is wrong.{" "}
+          <Link href="/login" className="text-bronze hover:underline">
+            Sign in
+          </Link>{" "}
+          if it’s yours.
+        </p>
+      </div>
+    );
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="font-serif text-3xl font-semibold">{tree?.name}</h1>
+        {tree?.description && <p className="mt-1 text-[var(--muted)]">{tree.description}</p>}
+        <p className="mt-1 text-sm text-[var(--muted)]">
+          {people.length} {people.length === 1 ? "person" : "people"} · living people are hidden
+        </p>
+      </div>
+
+      <Input
+        className="w-72"
+        placeholder="Search people…"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+
+      <Card className="overflow-hidden">
+        <CardContent className="p-0">
+          {shown.length === 0 ? (
+            <div className="px-4 py-6 text-sm text-[var(--muted)]">No matches.</div>
+          ) : (
+            shown.map((p, i) => (
+              <Link
+                key={p.id}
+                href={`/p/${treeId}/persons/${p.id}`}
+                className={`flex items-center justify-between gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-bronze/[0.05] ${
+                  i > 0 ? "border-t border-[var(--border)]" : ""
+                }`}
+              >
+                <span className="truncate font-medium">{p.primary_name ?? "Unnamed"}</span>
+                <span className="shrink-0 text-xs text-[var(--muted)]">{years.get(p.id) ?? ""}</span>
+              </Link>
+            ))
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,163 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import type { components } from "@/lib/api/schema";
+import { Card, CardContent } from "@/components/ui/card";
+
+type Person = components["schemas"]["PersonRead"];
+type Name = components["schemas"]["NameRead"];
+type Event = components["schemas"]["EventRead"];
+type Relationship = components["schemas"]["RelationshipRead"];
+
+// Public, no-login person view. The /api/v1/public surface returns only what an
+// anonymous viewer may see: deceased people in full, living people redacted.
+export default function PublicPersonPage() {
+  const { treeId, personId } = useParams<{ treeId: string; personId: string }>();
+  const [person, setPerson] = useState<Person | null>(null);
+  const [names, setNames] = useState<Name[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);
+  const [people, setPeople] = useState<Person[]>([]);
+  const [rels, setRels] = useState<Relationship[]>([]);
+  const [status, setStatus] = useState<"loading" | "ready" | "notfound">("loading");
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const pr = await api.GET("/api/v1/public/trees/{tree_id}/persons/{person_id}", {
+        params: { path: { tree_id: treeId, person_id: personId } },
+      });
+      if (cancelled) return;
+      if (!pr.data) {
+        setStatus("notfound");
+        return;
+      }
+      const [nm, ev, ppl, rl] = await Promise.all([
+        api.GET("/api/v1/public/trees/{tree_id}/persons/{person_id}/names", {
+          params: { path: { tree_id: treeId, person_id: personId } },
+        }),
+        api.GET("/api/v1/public/trees/{tree_id}/persons/{person_id}/events", {
+          params: { path: { tree_id: treeId, person_id: personId } },
+        }),
+        api.GET("/api/v1/public/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
+        api.GET("/api/v1/public/trees/{tree_id}/relationships", {
+          params: { path: { tree_id: treeId } },
+        }),
+      ]);
+      if (cancelled) return;
+      setPerson(pr.data);
+      setNames(nm.data ?? []);
+      setEvents(ev.data ?? []);
+      setPeople(ppl.data ?? []);
+      setRels(rl.data ?? []);
+      setStatus("ready");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [treeId, personId]);
+
+  const nameOf = useMemo(
+    () => (id: string) => people.find((p) => p.id === id)?.primary_name ?? "Unknown",
+    [people],
+  );
+
+  const parents = rels.filter((r) => r.type === "parent_child" && r.person_to_id === personId);
+  const children = rels.filter((r) => r.type === "parent_child" && r.person_from_id === personId);
+  const partners = rels.filter(
+    (r) => r.type === "partnership" && (r.person_from_id === personId || r.person_to_id === personId),
+  );
+  const otherEnd = (r: Relationship) =>
+    r.person_from_id === personId ? r.person_to_id : r.person_from_id;
+
+  if (status === "loading") return <p className="text-[var(--muted)]">Loading…</p>;
+  if (status === "notfound")
+    return (
+      <div className="space-y-2">
+        <h1 className="text-2xl font-semibold">Not available</h1>
+        <p className="text-[var(--muted)]">This person isn’t publicly visible.</p>
+        <Link href={`/p/${treeId}`} className="text-sm text-bronze hover:underline">
+          ← Back to the tree
+        </Link>
+      </div>
+    );
+
+  const relGroup = (label: string, items: Relationship[]) =>
+    items.length > 0 && (
+      <div>
+        <h3 className="text-sm font-semibold text-bronze">{label}</h3>
+        <ul className="mt-1 space-y-1">
+          {items.map((r) => (
+            <li key={r.id} className="text-sm">
+              <Link
+                href={`/p/${treeId}/persons/${otherEnd(r)}`}
+                className="hover:underline"
+              >
+                {nameOf(otherEnd(r))}
+                {r.qualifier ? <span className="text-[var(--muted)]"> · {r.qualifier}</span> : null}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+
+  return (
+    <div className="space-y-6">
+      <Link href={`/p/${treeId}`} className="text-sm text-[var(--muted)] hover:underline">
+        ← Back to the tree
+      </Link>
+
+      <h1 className="font-serif text-3xl font-semibold">{person?.primary_name ?? "Unnamed"}</h1>
+
+      <div className="grid gap-5 sm:grid-cols-2">
+        {events.length > 0 && (
+          <Card>
+            <CardContent className="space-y-2 p-5">
+              <h2 className="font-serif text-base font-semibold">Events</h2>
+              <ul className="space-y-1 text-sm">
+                {events.map((e) => (
+                  <li key={e.id} className="flex justify-between gap-3">
+                    <span className="capitalize">{e.event_type}</span>
+                    <span className="text-[var(--muted)]">
+                      {e.date_value ?? e.date_start ?? ""}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+
+        {names.length > 1 && (
+          <Card>
+            <CardContent className="space-y-2 p-5">
+              <h2 className="font-serif text-base font-semibold">Names</h2>
+              <ul className="space-y-1 text-sm">
+                {names.map((n) => (
+                  <li key={n.id} className="flex justify-between gap-3">
+                    <span>{[n.given, n.surname].filter(Boolean).join(" ") || "—"}</span>
+                    <span className="text-[var(--muted)]">{n.name_type}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {(parents.length > 0 || children.length > 0 || partners.length > 0) && (
+        <Card>
+          <CardContent className="grid gap-4 p-5 sm:grid-cols-3">
+            {relGroup("Parents", parents)}
+            {relGroup("Partners", partners)}
+            {relGroup("Children", children)}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+// Public viewing surface — no auth, no app sidebar. A slim header only.
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen">
+      <header className="border-b border-[var(--border)]">
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
+          <Link href="/" aria-label="Provenance — home" className="flex items-center">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/provenance-logo-plain.svg" alt="Provenance" className="h-6 w-auto" />
+          </Link>
+          <Link href="/login" className="text-sm text-bronze hover:underline">
+            Sign in
+          </Link>
+        </div>
+      </header>
+      <main className="mx-auto max-w-5xl px-4 py-8">{children}</main>
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next";
+
+// Allow crawlers on the public surface; keep the authenticated app out of the
+// index. (Per-tree noindex for `unlisted`/`site_members` pages needs server
+// rendering — tracked as a follow-up; those trees aren't linked or listed, so
+// they aren't discoverable by crawl in the meantime.)
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: ["/", "/p/"],
+      disallow: ["/trees", "/settings", "/import", "/login", "/register"],
+    },
+  };
+}
@@ -109,6 +109,17 @@ export default function TreesPage() {
                    <option value="unlisted">Unlisted</option>
                    <option value="public">Public</option>
                  </select>
+                  {tree.visibility && tree.visibility !== "private" && (
+                    <a
+                      href={`/p/${tree.id}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      title="Open the public, no-login view"
+                      className="shrink-0 text-xs text-bronze hover:underline"
+                    >
+                      Public page ↗
+                    </a>
+                  )}
                  <button
                    onClick={() => remove(tree.id)}
                    className="text-[var(--muted)] hover:text-bronze"