mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-19 14:10:56 +00:00
kennethreitz
1b07aac579
MiniJinja's finalizer workaround (needed for Jinja2-compatible escaping) added 3x overhead per variable, negating the Rust speed advantage. Back to Jinja2 with the 17x faster single-regex link_names filter. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
364 lines
10 KiB
HTML
364 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ page_title }} - KJV Study{% endblock %}
|
|
{% block description %}{{ page_description }}{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.resource-section {
|
|
margin: 1.5rem 0;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.resource-section:not(:first-of-type) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.resource-entry {
|
|
margin: 1.5rem 0 2rem 0;
|
|
}
|
|
|
|
.resource-name {
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.resource-name a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.resource-name a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom: 1px solid var(--link-hover);
|
|
}
|
|
|
|
.resource-item-title {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.resource-entry-actions {
|
|
margin: 0.75rem 0 1.25rem 0;
|
|
}
|
|
|
|
.resource-download-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.resource-download-btn:hover {
|
|
background: var(--bg-color);
|
|
border-color: var(--link-color);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.resource-download-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.resource-item-description {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.resource-index-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin: 1rem 0 1.5rem;
|
|
}
|
|
|
|
.action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--bg-color);
|
|
border-color: var(--link-color);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.verse-list {
|
|
margin: 1.5rem 0 0 0;
|
|
}
|
|
|
|
.verse-item {
|
|
margin: 1.2rem 0;
|
|
padding-left: 1.5rem;
|
|
border-left: 2px solid var(--border-color-darker);
|
|
}
|
|
|
|
.verse-ref {
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.verse-ref a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--border-color-dark);
|
|
}
|
|
|
|
.verse-ref a:hover {
|
|
border-bottom-color: var(--link-hover);
|
|
}
|
|
|
|
.verse-text {
|
|
max-width: 60%;
|
|
font-style: italic;
|
|
color: var(--text-secondary);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.intro-text {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.toc {
|
|
max-width: 55%;
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
border-left: 3px solid var(--border-color-darker);
|
|
}
|
|
|
|
.toc h2 {
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.toc ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.toc li {
|
|
margin: 0.5rem 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.toc a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.toc a:hover {
|
|
color: var(--link-color);
|
|
border-bottom-color: var(--link-color);
|
|
}
|
|
|
|
.toc li.toc-h3 {
|
|
padding-left: 1.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.resource-item-description,
|
|
.verse-text,
|
|
.intro-text,
|
|
.toc {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.resource-index-actions,
|
|
.resource-entry-actions,
|
|
.toc {
|
|
display: none !important;
|
|
}
|
|
|
|
.resource-item-description,
|
|
.verse-text,
|
|
.intro-text {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.resource-entry {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.sidenote,
|
|
.marginnote {
|
|
display: block;
|
|
float: none;
|
|
width: 100%;
|
|
margin: 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<script>
|
|
document.body.dataset.resourceReader = 'true';
|
|
</script>
|
|
<h1>{{ page_title }}</h1>
|
|
<p class="subtitle">{{ page_subtitle }}</p>
|
|
|
|
<div class="resource-index-actions">
|
|
<button class="action-btn" id="listen-btn" aria-label="Listen to {{ page_title }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
|
|
</svg>
|
|
Listen
|
|
</button>
|
|
{% if pdf_available %}
|
|
<a class="action-btn" href="{{ base_url }}/pdf" aria-label="Download all {{ page_title }} as PDF">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<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 PDF
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if page_description %}
|
|
<section aria-label="Introduction">
|
|
<p class="intro-text">{{ page_description | mdi | link_verses | link_names | safe }}</p>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<nav class="toc" id="toc" aria-label="Table of contents">
|
|
<h2>Contents</h2>
|
|
<ul id="toc-list"></ul>
|
|
</nav>
|
|
|
|
{% if intro_sidenotes %}
|
|
<section aria-label="Additional notes">
|
|
{% for intro in intro_sidenotes %}
|
|
<p class="intro-text">{{ intro.text | mdi | link_verses | link_names | safe }}</p>
|
|
{% endfor %}
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% for category, items in resource_data.items() %}
|
|
<section class="resource-section" aria-labelledby="section-{{ category|slugify }}">
|
|
<h2 id="section-{{ category|slugify }}">{{ category }}</h2>
|
|
|
|
{% for item_name, item in items.items() %}
|
|
<article class="resource-entry" aria-labelledby="resource-{{ item_name|slugify }}">
|
|
<h3 class="resource-name" id="resource-{{ item_name|slugify }}"><a href="{{ base_url }}/{{ item_name|slugify }}">{{ item_name }}</a></h3>
|
|
<p class="resource-item-title">{{ item.title }}</p>
|
|
|
|
<div class="resource-item-description">
|
|
<p>{{ item.description | mdi | link_verses | link_names | safe }}</p>
|
|
</div>
|
|
|
|
{% if item.verses %}
|
|
<div class="verse-list" role="list" aria-label="Key verses for {{ item_name }}">
|
|
{% for verse in item.verses %}
|
|
<div class="verse-item" role="listitem">
|
|
<div class="verse-ref">
|
|
{% set ref_parts = verse.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].split('-')[0] %}
|
|
<a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}" aria-label="{{ verse.reference }}">{{ verse.reference }}</a>
|
|
{% else %}
|
|
{{ verse.reference }}
|
|
{% endif %}
|
|
{% else %}
|
|
{{ verse.reference }}
|
|
{% endif %}
|
|
</div>
|
|
<div class="verse-text">{{ verse.text | link_names | safe }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</article>
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Listen button handler
|
|
var listenBtn = document.getElementById('listen-btn');
|
|
var isListening = false;
|
|
if (listenBtn) {
|
|
listenBtn.addEventListener('click', function() {
|
|
if (isListening) {
|
|
if (window.KJVSpeech) window.KJVSpeech.stop();
|
|
listenBtn.innerHTML = '<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="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
|
|
isListening = false;
|
|
return;
|
|
}
|
|
var paragraphs = document.querySelectorAll('.intro-text, .resource-item-description p, .verse-text');
|
|
var text = Array.from(paragraphs).map(function(p) {
|
|
return p.textContent.trim();
|
|
}).join(' ');
|
|
if (window.KJVSpeech && text) {
|
|
window.KJVSpeech.speak(text);
|
|
listenBtn.innerHTML = '<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="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
|
|
isListening = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Generate TOC from h2 and h3 headings
|
|
const tocList = document.getElementById('toc-list');
|
|
const headings = document.querySelectorAll('section h2, section h3, section article h3');
|
|
|
|
headings.forEach((heading) => {
|
|
if (!heading.id) {
|
|
heading.id = 'section-' + heading.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-');
|
|
}
|
|
const li = document.createElement('li');
|
|
if (heading.tagName === 'H3') li.classList.add('toc-h3');
|
|
const a = document.createElement('a');
|
|
a.href = '#' + heading.id;
|
|
a.textContent = heading.textContent;
|
|
li.appendChild(a);
|
|
tocList.appendChild(li);
|
|
});
|
|
|
|
// Simple keyboard navigation
|
|
KJVNav.initSimpleNav('.action-btn, .intro-text, .resource-name, .resource-item-description > p, .verse-item, .resource-card');
|
|
});
|
|
</script>
|
|
{% endblock %}
|