RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Complete homepage redesign - no longer defaults to ESV version

Browse Source 
- Page title updated to 'The Bible' instead of 'ESV Bible'
- Homepage now shows version selection cards (ESV/NKJV) instead of book list
- Version dropdown shows 'Choose version' on homepage
- Users must select version before seeing books
- Maintains URL parameter support and all existing functionality
- Clean separation between version selection and Bible browsing

Now users start with version selection, preventing defaulting to one translation.
This commit is contained in:
Ryderjj89
2025-09-28 13:58:25 -04:00
parent 213c8394c3
commit b4952a4013
2 changed files with 38 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/public/index.html
View File

@@ -3,9 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="ESV Bible - Read and study the English Standard Version Bible online" /> <meta name="description" content="The Bible - Read and study ESV and NKJV Bible translations online" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/></svg>" /> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/></svg>" />
<title>ESV Bible</title> <title>The Bible</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

51
frontend/src/App.tsx
View File

@@ -6,6 +6,7 @@ import ChapterSelector from './components/ChapterSelector';
import BibleReader from './components/BibleReader'; import BibleReader from './components/BibleReader';
import FavoritesMenu from './components/FavoritesMenu'; import FavoritesMenu from './components/FavoritesMenu';
import SearchComponent from './components/SearchComponent'; import SearchComponent from './components/SearchComponent';
import VersionSelector from './components/VersionSelector';
import { getBooks } from './services/api'; import { getBooks } from './services/api';
interface BookData { interface BookData {
@@ -24,7 +25,8 @@ function App() {
}); });
const [error, setError] = useState<string>(''); const [error, setError] = useState<string>('');
const [showSearch, setShowSearch] = useState(false); const [showSearch, setShowSearch] = useState(false);
const [selectedVersion, setSelectedVersion] = useState('esv'); // Default to ESV const [selectedVersion, setSelectedVersion] = useState<string>(''); // Empty means no version selected yet
const [versionSelected, setVersionSelected] = useState(false); // Track if version has been chosen
const [availableVersions, setAvailableVersions] = useState<any[]>([]); const [availableVersions, setAvailableVersions] = useState<any[]>([]);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -260,6 +262,11 @@ function App() {
// Component for the home page // Component for the home page
const HomePage = () => { const HomePage = () => {
const handleVersionSelect = (version: 'esv' | 'nkjv') => {
setSelectedVersion(version);
setVersionSelected(true);
};
const handleBookSelect = (book: string) => { const handleBookSelect = (book: string) => {
const urlName = getBookUrlName(book); const urlName = getBookUrlName(book);
navigate(`/book/${urlName}`); navigate(`/book/${urlName}`);
@@ -270,10 +277,18 @@ function App() {
setUser((prev: any) => ({ ...prev })); setUser((prev: any) => ({ ...prev }));
}; };
// Show version selector if no version is selected
if (!selectedVersion) {
return (
<VersionSelector onVersionSelect={handleVersionSelect} />
);
}
// Show book selector once version is selected
return ( return (
<BookSelector <BookSelector
books={books} books={books}
onBookSelect={handleBookSelect} onBookSelect={handleBookSelect}
formatBookName={formatBookName} formatBookName={formatBookName}
user={user} user={user}
onFavoriteChange={handleFavoriteChange} onFavoriteChange={handleFavoriteChange}
@@ -373,17 +388,23 @@ function App() {
The Bible The Bible
</button> </button>
{/* Version Selector */} {/* Version Selector */}
<select {selectedVersion ? (
value={selectedVersion} <select
onChange={(e) => setSelectedVersion(e.target.value)} value={selectedVersion}
className="text-xs text-gray-600 dark:text-gray-400 bg-transparent border-none focus:outline-none cursor-pointer hover:text-blue-600 dark:hover:text-blue-400" onChange={(e) => setSelectedVersion(e.target.value)}
> className="text-xs text-gray-600 dark:text-gray-400 bg-transparent border-none focus:outline-none cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
{availableVersions.map((version) => ( >
<option key={version.id} value={version.id}> {availableVersions.map((version) => (
{version.name} <option key={version.id} value={version.id}>
</option> {version.name}
))} </option>
</select> ))}
</select>
) : (
<span className="text-xs text-gray-500 dark:text-gray-500 italic">
Choose version
</span>
)}
</div> </div>
</div> </div>