Spaces:
Runtime error
Runtime error
File size: 3,415 Bytes
34b0226 b612dd5 34b0226 b612dd5 34b0226 b612dd5 ba40d17 b612dd5 ba40d17 b612dd5 ba40d17 b612dd5 34b0226 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import { useEffect, useRef, useState } from "react";
import { docsApi } from "../api/endpoints";
import type { DocDetail } from "../api/types";
import { useUpgrade } from "../hooks/useUpgrade";
import { Drawer, formatDate, Loading } from "./ui";
/** Reads a post from the corpus with the exact line numbers citations point at. */
export function Reader({
documentId,
highlight,
onClose,
}: {
documentId: string;
highlight?: { start: number; end: number };
onClose: () => void;
}) {
const [doc, setDoc] = useState<DocDetail | null>(null);
const [error, setError] = useState<string | null>(null);
const first = useRef<HTMLDivElement>(null);
const { openUpgrade } = useUpgrade();
useEffect(() => {
setDoc(null);
docsApi.get(documentId).then(setDoc, () => setError("Could not open this post."));
}, [documentId]);
useEffect(() => {
first.current?.scrollIntoView({ block: "center" });
}, [doc, highlight]);
// Skip the front matter block for display, but keep real line numbers.
let bodyStart = 0;
if (doc?.lines[0] === "---") {
const close = doc.lines.indexOf("---", 1);
bodyStart = close > 0 ? close + 1 : 0;
}
return (
<Drawer onClose={onClose} label="Post reader">
{!doc && !error && <Loading label="Opening post" />}
{error && <p className="error-text">{error}</p>}
{doc && (
<article className="reader">
<p className="eyebrow">{doc.source_title ?? "Post"}</p>
<p className="mono muted">
{formatDate(doc.published_at)} · {doc.words} words
{doc.url.startsWith("http") && (
<>
{" · "}
<a href={doc.url} target="_blank" rel="noreferrer">
Open original
</a>
</>
)}
</p>
<div className="reader-lines">
{doc.lines.slice(bodyStart).map((line, i) => {
const n = i + bodyStart + 1;
const hit = highlight && n >= highlight.start && n <= highlight.end;
if (!line.trim() && !hit) return <div key={n} className="reader-gap" />;
const heading = line.match(/^(#{1,3})\s+(.*)/);
return (
<div key={n} ref={hit && n === highlight?.start ? first : undefined} className={`reader-line${hit ? " hit" : ""}`}>
<span className="reader-n mono">{n}</span>
{heading ? (
<span className={`reader-h h${heading[1].length}`}>{heading[2]}</span>
) : (
<span>{line}</span>
)}
</div>
);
})}
</div>
{doc.preview && (
<div className="welcome-cap locked-cap">
<div>
<strong>This post is not indexed</strong>
<p className="muted small">
Your plan indexes your latest {doc.limit ?? 5} posts. Upgrade to index this one and the rest of your
archive, so you can ask about it and turn it into audio, video and Launch Kits.
</p>
</div>
<button type="button" className="btn btn-small btn-primary" onClick={() => openUpgrade("indexed_posts")}>
Upgrade to index it
</button>
</div>
)}
</article>
)}
</Drawer>
);
}
|