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>
<meta charset="utf-8" />
<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>" />
<title>ESV Bible</title>
<title>The Bible</title>
</head>
<body>
<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 FavoritesMenu from './components/FavoritesMenu';
import SearchComponent from './components/SearchComponent';
import VersionSelector from './components/VersionSelector';
import { getBooks } from './services/api';
interface BookData {
@@ -24,7 +25,8 @@ function App() {
});
const [error, setError] = useState<string>('');
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 location = useLocation();
const navigate = useNavigate();
@@ -260,6 +262,11 @@ function App() {
// Component for the home page
const HomePage = () => {
const handleVersionSelect = (version: 'esv' | 'nkjv') => {
setSelectedVersion(version);
setVersionSelected(true);
};
const handleBookSelect = (book: string) => {
const urlName = getBookUrlName(book);
navigate(`/book/${urlName}`);
@@ -270,10 +277,18 @@ function App() {
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 (
<BookSelector
books={books}
onBookSelect={handleBookSelect}
<BookSelector
books={books}
onBookSelect={handleBookSelect}
formatBookName={formatBookName}
user={user}
onFavoriteChange={handleFavoriteChange}
@@ -373,17 +388,23 @@ function App() {
The Bible
</button>
{/* Version Selector */}
<select
value={selectedVersion}
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}>
{version.name}
</option>
))}
</select>
{selectedVersion ? (
<select
value={selectedVersion}
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}>
{version.name}
</option>
))}
</select>
) : (
<span className="text-xs text-gray-500 dark:text-gray-500 italic">
Choose version
</span>
)}
</div>
</div>