Spaces:
Runtime error
Runtime error
| 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> | |
| ); | |
| } | |