Reader: verse study panel (commentaries, people & places) and NET Bible
Build and Push Docker Image / build-and-push (push) Failing after 20s
Build and Push Docker Image / build-and-push (push) Failing after 20s
Adds a per-verse panel with seven HelloAO commentaries and Theographic people/places/events, and NET as a fifth Reader translation. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed
1 parent
84a5bb8838
commit
9e8420a1ae
4 files changed
+261
-2
No files matched your search
@@ -0,0 +1,159 @@
|
||||
// Inline study panel shown under a verse in the Reader: commentary from several
|
||||
// public-domain / open sources, plus the people, places and events tied to the verse.
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
COMMENTARIES, loadCommentary, loadTheographic, loadPerson, pickCommentaryEntry, useAsync,
|
||||
} from '../hooks/useVerseStudy.js';
|
||||
|
||||
function CommentaryTab({ book, chapter, verse }) {
|
||||
const [sourceId, setSourceId] = useState(() => {
|
||||
try { return localStorage.getItem('reader-commentary') || COMMENTARIES[0].id; } catch { return COMMENTARIES[0].id; }
|
||||
});
|
||||
const source = COMMENTARIES.find((c) => c.id === sourceId) ?? COMMENTARIES[0];
|
||||
const { status, data } = useAsync(() => loadCommentary(source.id, book, chapter), [source.id, book, chapter]);
|
||||
const entry = pickCommentaryEntry(data, verse);
|
||||
|
||||
const changeSource = (id) => {
|
||||
setSourceId(id);
|
||||
try { localStorage.setItem('reader-commentary', id); } catch {}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="text-xs text-slate-600">
|
||||
Commentary{' '}
|
||||
<select value={source.id} onChange={(e) => changeSource(e.target.value)}
|
||||
className="rounded-lg border border-slate-300 bg-white px-2 py-1 text-xs">
|
||||
{COMMENTARIES.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<div className="mt-2">
|
||||
{status === 'loading' && <p className="text-xs text-slate-500">Loading…</p>}
|
||||
{status === 'empty' && <p className="text-xs text-slate-500">{source.name} has no notes for this chapter.</p>}
|
||||
{status === 'ready' && !entry && <p className="text-xs text-slate-500">No notes at or before this verse in {source.name}.</p>}
|
||||
{status === 'ready' && entry && (
|
||||
<>
|
||||
{entry.number !== verse && (
|
||||
<p className="mb-1 text-[11px] text-slate-500">Notes on the passage starting at verse {entry.number}.</p>
|
||||
)}
|
||||
<div className="max-h-96 overflow-y-auto whitespace-pre-line rounded-xl bg-white p-3 text-[13px] leading-relaxed text-slate-700">
|
||||
{entry.text}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-[10px] text-slate-400">{source.credit}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonDetails({ id }) {
|
||||
const { status, data } = useAsync(() => loadPerson(id), [id]);
|
||||
if (status === 'loading') return <p className="mt-1 text-xs text-slate-500">Loading…</p>;
|
||||
if (status === 'empty') return <p className="mt-1 text-xs text-slate-500">No details available.</p>;
|
||||
const era = (y) => `${Math.abs(y)}${y < 0 ? ' BC' : ' AD'}`;
|
||||
return (
|
||||
<div className="mt-1 space-y-1 text-xs leading-relaxed text-slate-600">
|
||||
{(data.description ?? []).map((d, i) => <p key={i}>{d}</p>)}
|
||||
{!data.description?.length && <p>No description available.</p>}
|
||||
{data.minYear != null && (
|
||||
<p className="text-slate-400">
|
||||
Lived approx. {era(data.minYear)}{data.maxYear != null && data.maxYear !== data.minYear ? ` – ${era(data.maxYear)}` : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonCard({ person }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<li className="rounded-xl bg-white px-3 py-2">
|
||||
<button type="button" onClick={() => setOpen((o) => !o)} className="w-full text-left text-sm font-semibold text-slate-800">
|
||||
{person.name} <span className="text-xs font-normal text-slate-400">{open ? '▾' : '▸'}</span>
|
||||
</button>
|
||||
{open && <PersonDetails id={person.id} />}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function PeoplePlacesTab({ book, chapter, verse }) {
|
||||
const { status, data } = useAsync(() => loadTheographic(book, chapter), [book, chapter]);
|
||||
if (status === 'loading') return <p className="text-xs text-slate-500">Loading…</p>;
|
||||
if (status === 'empty') return <p className="text-xs text-slate-500">No people or places data for this chapter.</p>;
|
||||
const here = (list) => list.filter((x) => x.verses?.includes(verse));
|
||||
// Theographic lists some places twice (variant spellings) — collapse by name.
|
||||
const places = [...new Map(here(data.places).map((p) => [p.name, p])).values()];
|
||||
const people = here(data.people);
|
||||
const events = here(data.events);
|
||||
if (!people.length && !places.length && !events.length) {
|
||||
return <p className="text-xs text-slate-500">Nothing tagged on verse {verse}.</p>;
|
||||
}
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{people.length > 0 && (
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500">People</p>
|
||||
<ul className="space-y-1">{people.map((p) => <PersonCard key={p.id} person={p} />)}</ul>
|
||||
</div>
|
||||
)}
|
||||
{places.length > 0 && (
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Places</p>
|
||||
<ul className="space-y-1">
|
||||
{places.map((p) => (
|
||||
<li key={p.id} className="flex items-center justify-between gap-2 rounded-xl bg-white px-3 py-2 text-sm text-slate-800">
|
||||
<span>{p.name}{p.featureType && <span className="ml-1 text-xs text-slate-400">{p.featureType}</span>}</span>
|
||||
{p.latitude != null && p.longitude != null && (
|
||||
<a href={`https://www.openstreetmap.org/?mlat=${p.latitude}&mlon=${p.longitude}#map=8/${p.latitude}/${p.longitude}`}
|
||||
target="_blank" rel="noopener noreferrer" className="text-xs font-semibold text-sky-600 hover:underline">
|
||||
Map ↗
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{events.length > 0 && (
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Events</p>
|
||||
<ul className="space-y-1">
|
||||
{events.map((e) => (
|
||||
<li key={e.id} className="rounded-xl bg-white px-3 py-2 text-sm text-slate-800">
|
||||
{e.name}{e.startDate && <span className="ml-1 text-xs text-slate-400">approx. AD {e.startDate}</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-[10px] text-slate-400">
|
||||
People, places and events: Theographic Bible Metadata, licensed CC BY-SA 4.0.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function StudyPanel({ book, chapter, verse, onClose }) {
|
||||
const [tab, setTab] = useState('commentary');
|
||||
const tabBtn = (id, label) => (
|
||||
<button type="button" onClick={() => setTab(id)}
|
||||
className={`rounded-lg px-3 py-1 text-xs font-semibold ${tab === id ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 hover:bg-slate-100'}`}>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<div className="mt-2 mb-1 ml-6 rounded-2xl border border-indigo-100 bg-indigo-50 p-3">
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<div className="flex gap-1">
|
||||
{tabBtn('commentary', 'Commentary')}
|
||||
{tabBtn('people', 'People & Places')}
|
||||
</div>
|
||||
<button type="button" onClick={onClose} className="rounded p-1 text-xs text-slate-500 hover:bg-white" title="Close">✕</button>
|
||||
</div>
|
||||
{tab === 'commentary'
|
||||
? <CommentaryTab book={book} chapter={chapter} verse={verse} />
|
||||
: <PeoplePlacesTab book={book} chapter={chapter} verse={verse} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user