Post Detail

1// Post detail — thin view over usePostDetail (all logic lives in the hook). Renders the cover, meta,
2// category/tag chips, and the plain-text body as paragraphs. For a faithful render of embeds/images/
3// formatting, render `d.post.richContent` with a Ricos renderer (see INSTRUCTIONS "Extending").
4// Styled with base44 design tokens (shadcn Tailwind classes).
5import { useParams } from "react-router-dom";
6import { usePostDetail } from "@/hooks/usePostDetail";
7import PostChips from "@/components/PostChips";
8
9function coverImage(post) {
10  const url = post?.media?.wixMedia?.image?.url;
11  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
12}
13
14function formatDate(iso) {
15  if (!iso) return null;
16  try { return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); }
17  catch { return null; }
18}
19
20export default function PostDetail() {
21  const { slug } = useParams();
22  const d = usePostDetail(slug);
23
24  if (d.notFound) return <Centered>Post not found.</Centered>;
25  if (!d.post) return <Centered>Loading…</Centered>;
26
27  const image = coverImage(d.post);
28  const date = formatDate(d.post.firstPublishedDate);
29
30  return (
31    <main className="max-w-[1100px] mx-auto p-4">
32      <article className="max-w-[72ch] mx-auto">
33        <h1 className="font-display m-0 mb-2 leading-[1.2]">{d.post.title}</h1>
34        <div className="flex gap-2 items-center text-muted-foreground text-[13px] mb-4">
35          {date && <span>{date}</span>}
36          {date && d.post.minutesToRead ? <span aria-hidden="true">·</span> : null}
37          {d.post.minutesToRead ? <span>{d.post.minutesToRead} min read</span> : null}
38        </div>
39
40        {image && (
41          <div className="rounded-lg overflow-hidden mb-6">
42            <img src={image} alt={d.post.media?.wixMedia?.image?.altText || d.post.title}
43              className="w-full h-auto block" />
44          </div>
45        )}
46
47        <div className="text-foreground leading-[1.7] text-[17px]">
48          {d.paragraphs.map((para, i) => (
49            <p key={i} className="m-0 mb-4">{para}</p>
50          ))}
51        </div>
52
53        {(d.cats.length || d.tags.length) ? (
54          <div className="mt-8 pt-4 border-t border-border">
55            <PostChips post={d.post} />
56          </div>
57        ) : null}
58      </article>
59    </main>
60  );
61}
62
63function Centered({ children }) {
64  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
65}