nate/study-bible-project
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add NLT, CSB and NASB via api.bible proxy; new app logo and icons
Build and Push Docker Image / build-and-push (push) Failing after 21s
Details

Browse Source 
Reader and Reading Plans get a translation picker. Licensed translations are
fetched through a server-side api.bible proxy so the key stays off the client.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-09-29 08:37:48 -04:00
1 parent 986d2e9331
commit 22c80d2bc3
13 files changed
+209 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/hooks/useBibleReader.js
+48 -9
View File
@@ -2,14 +2,31 @@
// Audio playback stays in App because the study page's book player shares
// the same <audio> element.
import { useCallback, useEffect, useRef, useState } from 'react';
import { bookOptions, parseBibleChapter } from '../utils/bibleUtils.jsx';
import { bookOptions, CHAPTER_COUNTS, parseBibleChapter } from '../utils/bibleUtils.jsx';
import { BIBLE_IDB_TTL, getBibleIndexFromIDB, saveBibleIndexToIDB } from '../utils/bibleIndexCache.js';
export const READER_TRANSLATIONS = [
{ id: 'BSB', name: 'Berean Standard Bible' },
{ id: 'NLT', name: 'New Living Translation', licensed: true,
notice: 'Holy Bible, New Living Translation, Copyright © 2014, Tyndale House Publishers. All rights reserved. tyndale.com' },
{ id: 'CSB', name: 'Christian Standard Bible', licensed: true,
notice: 'Christian Standard Bible® and CSB® are federally registered trademarks of Holman Bible Publishers. All rights reserved. bhpublishinggroup.com' },
{ id: 'NASB', name: 'New American Standard Bible', licensed: true,
notice: 'New American Standard Bible®, Copyright © 1995, The Lockman Foundation. All rights reserved. lockman.org' },
];
const BOOKMARK_COLORS = ['#fef08a', '#bbf7d0', '#bfdbfe', '#fecaca', '#e9d5ff'];
export function useBibleReader(currentPage) {
const [readerBookAbbrev, setReaderBookAbbrev] = useState(bookOptions[0].abbrev);
const [readerChapter, setReaderChapter] = useState(1);
const [readerTranslation, setReaderTranslationState] = useState(() => {
try {
const saved = localStorage.getItem('reader-translation');
return READER_TRANSLATIONS.some((t) => t.id === saved) ? saved : 'BSB';
} catch { return 'BSB'; }
});
const [readerCopyright, setReaderCopyright] = useState('');
const [readerVerses, setReaderVerses] = useState([]);
const [readerTotalChapters, setReaderTotalChapters] = useState(1);
const [readerLoading, setReaderLoading] = useState(false);
@@ -89,19 +106,39 @@ export function useBibleReader(currentPage) {
}
};
const loadReaderChapter = async (bookAbbrev, chapterNumber) => {
const setReaderTranslation = (id) => {
setReaderTranslationState(id);
try { localStorage.setItem('reader-translation', id); } catch {}
};
// BSB comes straight from HelloAO; licensed translations (NLT/CSB/NASB) go
// through the server's api.bible proxy so the API key never reaches the browser.
const loadReaderChapter = async (bookAbbrev, chapterNumber, translation = readerTranslation) => {
setReaderLoading(true);
setReaderError('');
try {
const res = await fetch(`https://bible.helloao.org/api/BSB/${bookAbbrev}/${chapterNumber}.json`);
if (!res.ok) throw new Error('Unable to load chapter.');
const data = await res.json();
const verses = parseBibleChapter(data);
let verses;
let copyright = '';
let totalChapters = CHAPTER_COUNTS[bookAbbrev] ?? chapterNumber;
if (translation === 'BSB') {
const res = await fetch(`https://bible.helloao.org/api/BSB/${bookAbbrev}/${chapterNumber}.json`);
if (!res.ok) throw new Error('Unable to load chapter.');
const data = await res.json();
verses = parseBibleChapter(data);
totalChapters = data.book?.numberOfChapters ?? totalChapters;
} else {
const res = await fetch(`/api/bible/${translation}/${bookAbbrev}/${chapterNumber}`, { credentials: 'include' });
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data.error || `Unable to load ${translation}.`);
verses = data.verses;
copyright = data.copyright ?? '';
}
if (!Array.isArray(verses) || verses.length === 0) {
throw new Error('Invalid Bible data returned.');
}
setReaderVerses(verses);
setReaderTotalChapters(data.book?.numberOfChapters ?? chapterNumber);
setReaderCopyright(copyright);
setReaderTotalChapters(totalChapters);
} catch (err) {
setReaderError(err.message || 'Failed to load chapter.');
setReaderVerses([]);
@@ -112,8 +149,8 @@ export function useBibleReader(currentPage) {
useEffect(() => {
if (currentPage !== 'reader') return;
loadReaderChapter(readerBookAbbrev, readerChapter);
}, [currentPage, readerBookAbbrev, readerChapter]);
loadReaderChapter(readerBookAbbrev, readerChapter, readerTranslation);
}, [currentPage, readerBookAbbrev, readerChapter, readerTranslation]);
// After navigating to a verse (from the bookmarks panel or a whole-Bible search
// result), scroll to it and briefly flash its background so it's easy to spot.
@@ -294,6 +331,8 @@ export function useBibleReader(currentPage) {
return {
readerBookAbbrev, setReaderBookAbbrev,
readerChapter, setReaderChapter,
readerTranslation, setReaderTranslation,
readerCopyright,
readerVerses,
readerTotalChapters,
readerLoading,
src/pages/ReaderPage.jsx
+25 -10
View File
@@ -6,18 +6,20 @@ import AudioPlayer from '../components/AudioPlayer.jsx';
import { bookOptions, BookmarkIcon, CopyIcon } from '../utils/bibleUtils.jsx';
import { getPlan, getPlanSchedule, findDayIndexForRef } from '../utils/readingPlans.js';
import DrawCanvas from './DrawCanvas.jsx';
import { READER_TRANSLATIONS } from '../hooks/useBibleReader.js';
const NO_STROKES = []; // stable fallback so DrawCanvas doesn't redraw every render
// Copies "Book 3:16 BSB — text" to the clipboard.
const copyVerse = (bookName, chapterNum, verseNum, text) => {
navigator.clipboard?.writeText(`${bookName} ${chapterNum}:${verseNum} BSB — ${text}`);
// Copies "Book 3:16 NLT — text" to the clipboard.
const copyVerse = (bookName, chapterNum, verseNum, text, translation) => {
navigator.clipboard?.writeText(`${bookName} ${chapterNum}:${verseNum} ${translation} — ${text}`);
};
export default function ReaderPage() {
const {
goHome,
readerBookAbbrev,
readerTranslation, setReaderTranslation,
readerChapter, setReaderChapter,
readerVerses,
readerTotalChapters,
@@ -63,6 +65,7 @@ export default function ReaderPage() {
} = useApp();
const readerBook = bookOptions.find((b) => b.abbrev === readerBookAbbrev);
const readerNotice = READER_TRANSLATIONS.find((t) => t.id === readerTranslation)?.notice ?? '';
// Active reading plans whose schedule includes the chapter currently on screen.
const planMatches = useMemo(() => {
@@ -300,7 +303,7 @@ export default function ReaderPage() {
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
<div>
<p className="text-sm uppercase tracking-[0.24em] text-slate-300">Bible Study Project</p>
<h1 className="mt-2 text-2xl font-semibold">Read the Bible (BSB)</h1>
<h1 className="mt-2 text-2xl font-semibold">Read the Bible ({readerTranslation})</h1>
</div>
<div className="flex items-center gap-3">
<button
@@ -324,6 +327,16 @@ export default function ReaderPage() {
{/* Navigation + tools bar */}
<div className="mb-4 flex flex-wrap items-center gap-3 rounded-3xl border border-slate-200 bg-white p-4 shadow-panel">
<label className="text-sm text-slate-600">
Translation{' '}
<select
value={readerTranslation}
onChange={(e) => setReaderTranslation(e.target.value)}
className="rounded-xl border border-slate-300 px-2 py-1 text-sm"
>
{READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id}</option>)}
</select>
</label>
<label className="text-sm text-slate-600">
Book{' '}
<select
@@ -442,7 +455,7 @@ export default function ReaderPage() {
<button type="button"
onClick={() => { setReaderSearchScope('bible'); if (bibleIndexStatus === 'idle') loadBibleIndex(); }}
className={`px-2 py-1 text-xs font-semibold transition ${readerSearchScope === 'bible' ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 hover:bg-slate-50'}`}>
Whole Bible
Whole Bible (BSB)
</button>
</div>
<input
@@ -577,8 +590,9 @@ export default function ReaderPage() {
{!readerDrawMode && !readerPageMode && (
<div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-panel">
<h2 className="mb-1 text-xl font-semibold text-slate-900">
{readerBook?.name} {readerChapter} <span className="text-sm font-normal text-slate-500">(BSB)</span>
{readerBook?.name} {readerChapter} <span className="text-sm font-normal text-slate-500">({readerTranslation})</span>
</h2>
{readerNotice && <p className="mb-2 text-[11px] leading-snug text-slate-400">{readerNotice}</p>}
{readerInterlinear && (
<p className="mb-4 text-xs text-slate-400">Click a verse number to see original words &amp; pronunciation · bookmark icon to save · copy icon to copy</p>
)}
@@ -639,7 +653,7 @@ export default function ReaderPage() {
</button>
)}
<button type="button"
onClick={() => copyVerse(readerBook?.name, readerChapter, verse.number, verse.text)}
onClick={() => copyVerse(readerBook?.name, readerChapter, verse.number, verse.text, readerTranslation)}
className="rounded p-1 leading-none text-slate-400 hover:bg-slate-100 hover:text-slate-700"
title="Copy verse">
<CopyIcon />
@@ -727,8 +741,9 @@ export default function ReaderPage() {
onPointerUp={handleSelectionEnd}>
<div className="px-6 pt-6 pb-3 break-inside-avoid">
<h2 className="mb-1 text-xl font-semibold text-slate-900">
{readerBook?.name} {readerChapter} <span className="text-sm font-normal text-slate-500">(BSB)</span>
{readerBook?.name} {readerChapter} <span className="text-sm font-normal text-slate-500">({readerTranslation})</span>
</h2>
{readerNotice && <p className="mb-2 text-[11px] leading-snug text-slate-400">{readerNotice}</p>}
{readerInterlinear
? <p className="text-xs text-slate-400">Click a verse number to see original words &amp; pronunciation</p>
: <p className="text-xs text-slate-400">Hover a verse for actions</p>
@@ -774,7 +789,7 @@ export default function ReaderPage() {
</button>
)}
<button type="button"
onClick={() => copyVerse(readerBook?.name, readerChapter, verse.number, verse.text)}
onClick={() => copyVerse(readerBook?.name, readerChapter, verse.number, verse.text, readerTranslation)}
className="rounded p-1 leading-none text-slate-400 hover:bg-slate-100 hover:text-slate-700"
title="Copy verse">
<CopyIcon />
@@ -859,7 +874,7 @@ export default function ReaderPage() {
onPointerUp={handleSelectionEnd}>
<div className="mb-3">
<span className="font-semibold text-slate-900">{readerBook?.name} {readerChapter}</span>
<span className="ml-2 text-xs text-slate-400">BSB</span>
<span className="ml-2 text-xs text-slate-400">{readerTranslation}</span>
<p className="mt-1 text-xs text-slate-400 font-sans">Select text to highlight</p>
</div>
{!readerLoading && readerVerses.map((v) => (
src/pages/ReadingPlansPage.jsx
+12
View File
@@ -1,5 +1,6 @@
import { useRef, useState } from 'react';
import { useApp } from '../context/AppContext.js';
import { READER_TRANSLATIONS } from '../hooks/useBibleReader.js';
import AuthStatus from '../components/AuthStatus.jsx';
import { bookOptions, CHAPTER_COUNTS, formatRelativeDate } from '../utils/bibleUtils.jsx';
import {
@@ -42,6 +43,7 @@ export default function ReadingPlansPage() {
readingPlanSyncStatus,
readingPlanSyncError,
retryReadingPlanSync,
readerTranslation, setReaderTranslation,
} = useApp();
const [builderMode, setBuilderMode] = useState(null); // null | 'new' | a custom plan id to edit
@@ -70,6 +72,16 @@ export default function ReadingPlansPage() {
)}
</div>
<div className="flex items-center gap-3">
<label className="text-sm text-slate-300">
Read in{' '}
<select
value={readerTranslation}
onChange={(e) => setReaderTranslation(e.target.value)}
className="rounded-xl border border-slate-500 bg-slate-800 px-2 py-1.5 text-sm text-white"
>
{READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id}</option>)}
</select>
</label>
<button
type="button"
onClick={goHome}