mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
3336863a4d
- Add KJVNav.initGridNav for standardized 2D grid navigation - Migrate books.html, topics.html, resources.html to use initGridNav - Add sidebarActive check to all templates with custom keyboard handlers - Add [ and ] shortcuts for prev/next chapter on chapter pages - Add [ and ] shortcuts for prev/next book on book pages - Update accessibility page with comprehensive keyboard shortcut docs - Add honest note about keyboard navigation complexity - Fix sidebar nav conflicting with main content selection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
280 lines
9.4 KiB
HTML
280 lines
9.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ topic_name }} - Topical Index - KJV Study{% endblock %}
|
|
{% block description %}{{ topic.description }}{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.topic-overview {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.subtopics-container {
|
|
max-width: 70%;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.subtopic-section {
|
|
margin: 2.5rem 0;
|
|
}
|
|
|
|
.topic-actions {
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
.print-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.45rem 0.9rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.print-btn:hover {
|
|
background: var(--bg-color);
|
|
border-color: var(--link-color);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.print-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
@media print {
|
|
.topic-actions,
|
|
.print-btn {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.subtopic-header {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--link-color);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtopic-description {
|
|
font-style: italic;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.verses-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.verse-item {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
border-left: 2px solid var(--border-color);
|
|
}
|
|
|
|
.verse-ref {
|
|
font-weight: 600;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.verse-ref a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.verse-ref a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom: 1px solid var(--link-hover);
|
|
}
|
|
|
|
.verse-note {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.intro-text {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1rem 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>{{ topic_name }}</h1>
|
|
<script>document.body.dataset.resourceReader = "true";</script>
|
|
<p class="subtitle">{{ topic.description }}</p>
|
|
|
|
{% if pdf_available and pdf_url %}
|
|
<div class="topic-actions">
|
|
<a href="{{ pdf_url }}" class="print-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Download Topic PDF
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div>
|
|
<h2>Overview</h2>
|
|
{% if topic.overview %}
|
|
{{ topic.overview | safe }}
|
|
{% else %}
|
|
<div class="topic-overview">
|
|
This topical index organizes key Scripture passages related to {{ topic_name|lower }}. Each subtopic below addresses a specific aspect of this theme, with carefully selected verses that establish biblical teaching on the subject.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Subtopics</h2>
|
|
|
|
<div class="subtopics-container">
|
|
{% for subtopic_name, subtopic_data in topic.subtopics.items() %}
|
|
<div class="subtopic-section">
|
|
<h3 class="subtopic-header">{{ subtopic_name }}</h3>
|
|
<p class="subtopic-description">{{ subtopic_data.description }}</p>
|
|
|
|
<ul class="verses-list">
|
|
{% for verse in subtopic_data.verses %}
|
|
<li class="verse-item">
|
|
<span class="verse-ref">
|
|
{% set reference = verse.reference if verse.reference is defined else (verse.ref if verse.ref is defined else verse) %}
|
|
{% if reference is not string %}
|
|
{% set reference = reference|string %}
|
|
{% endif %}
|
|
{% set reference = reference.strip() %}
|
|
{% if reference %}
|
|
{% set ref_parts = reference.rsplit(' ', 1) %}
|
|
{% if ref_parts|length == 2 %}
|
|
{% set book_name = ref_parts[0] %}
|
|
{% set chapter_verse = ref_parts[1] %}
|
|
{% if ':' in chapter_verse %}
|
|
{% set ch = chapter_verse.split(':')[0] %}
|
|
{% set v = chapter_verse.split(':')[1] %}
|
|
{% if '-' not in v %}
|
|
{# Single verse - make it a link #}
|
|
<a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}">{{ reference }}</a>
|
|
{% else %}
|
|
{# Verse range - link to chapter with anchor #}
|
|
{% set v_start = v.split('-')[0] %}
|
|
{% set v_end = v.split('-')[1] %}
|
|
<a href="/book/{{ book_name }}/chapter/{{ ch }}#verse-{{ v_start }}-{{ v_end }}">{{ reference }}</a>
|
|
{% endif %}
|
|
{% else %}
|
|
{# No colon, just display text #}
|
|
{{ reference }}
|
|
{% endif %}
|
|
{% else %}
|
|
{{ reference }}
|
|
{% endif %}
|
|
{% endif %}
|
|
</span>
|
|
{% if verse.note is defined and verse.note %}
|
|
<span class="verse-note">— {{ verse.note }}</span>
|
|
{% endif %}
|
|
{% if verse.text is defined and verse.text %}
|
|
<div style="margin-top: 0.4rem; color: var(--text-secondary); line-height: 1.6;">
|
|
{{ verse.text }}
|
|
</div>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Study Guidance</h2>
|
|
<p class="intro-text"><span class="newthought">Topical study benefits</span> from reading verses in their broader context. Click any reference above to view the complete passage and surrounding verses. Consider comparing how different biblical authors address the same theme across various contexts and time periods.</p>
|
|
|
|
<p class="intro-text">Cross-reference study deepens understanding. Many verses listed here connect to other passages—use the cross-references provided on individual verse pages to trace theological themes throughout Scripture.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p><a href="/topics">← Back to all topics</a></p>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// Include overview, intro paragraphs, verse items, and PDF button
|
|
const elements = Array.from(document.querySelectorAll('.topic-overview, .intro-text, .verse-item, .print-btn'));
|
|
if (elements.length === 0) return;
|
|
|
|
let selectedIndex = -1;
|
|
|
|
function selectElement(index) {
|
|
if (selectedIndex >= 0 && selectedIndex < elements.length) {
|
|
elements[selectedIndex].style.outline = '';
|
|
elements[selectedIndex].style.outlineOffset = '';
|
|
elements[selectedIndex].classList.remove('selected');
|
|
}
|
|
selectedIndex = Math.max(0, Math.min(index, elements.length - 1));
|
|
elements[selectedIndex].style.outline = '2px solid #4a7c59';
|
|
elements[selectedIndex].style.outlineOffset = '8px';
|
|
elements[selectedIndex].classList.add('selected');
|
|
elements[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|
if (KJVNav.sidebarActive) return;
|
|
|
|
if (e.key === 'ArrowDown' || e.key === 'j') {
|
|
e.preventDefault();
|
|
if (KJVNav.isSelectionOffScreen(elements, selectedIndex)) {
|
|
selectElement(KJVNav.findFirstVisibleIndex(elements));
|
|
} else {
|
|
selectElement(selectedIndex < 0 ? 0 : selectedIndex + 1);
|
|
}
|
|
} else if (e.key === 'ArrowUp' || e.key === 'k') {
|
|
e.preventDefault();
|
|
if (KJVNav.isSelectionOffScreen(elements, selectedIndex)) {
|
|
selectElement(KJVNav.findFirstVisibleIndex(elements));
|
|
} else if (selectedIndex <= 0) {
|
|
selectElement(0);
|
|
} else {
|
|
selectElement(selectedIndex - 1);
|
|
}
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
|
|
e.preventDefault();
|
|
history.back();
|
|
} else if (e.key === 'Enter' && selectedIndex >= 0) {
|
|
e.preventDefault();
|
|
var el = elements[selectedIndex];
|
|
if (el.tagName === 'A' && el.href) {
|
|
window.location.href = el.href;
|
|
} else {
|
|
var link = el.querySelector('.verse-ref a') || el.querySelector('a');
|
|
if (link) window.location.href = link.href;
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
if (selectedIndex >= 0 && selectedIndex < elements.length) {
|
|
elements[selectedIndex].style.outline = '';
|
|
elements[selectedIndex].style.outlineOffset = '';
|
|
elements[selectedIndex].classList.remove('selected');
|
|
}
|
|
selectedIndex = -1;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|