Add AI commentary to Bible study application

This commit is contained in:
2025-05-26 14:05:05 -04:00
parent 5a90f7f9d0
commit 59cb5df09e
4 changed files with 1244 additions and 31 deletions
+327 -5
View File
@@ -107,15 +107,23 @@ def read_chapter(request: Request, book: str, chapter: int):
# Check if the book exists first
if not chapters:
raise HTTPException(
status_code=404,
status_code=404,
detail=f"The book '{book}' was not found. Please check the spelling or browse all available books."
)
else:
raise HTTPException(
status_code=404,
status_code=404,
detail=f"Chapter {chapter} of {book} was not found. This book has {len(chapters)} chapters."
)
# Generate AI commentary for the chapter
commentaries = {}
for verse in verses:
commentaries[verse.verse] = generate_commentary(book, chapter, verse)
# Generate chapter overview
chapter_overview = generate_chapter_overview(book, chapter, verses)
return templates.TemplateResponse(
"chapter.html",
{
@@ -125,6 +133,8 @@ def read_chapter(request: Request, book: str, chapter: int):
"verses": verses,
"books": books,
"chapters": chapters,
"commentaries": commentaries,
"chapter_overview": chapter_overview
},
)
@@ -1524,10 +1534,322 @@ def generate_book_tags(book, genre):
"Zephaniah": ["Day of the LORD", "Judgment", "Remnant", "Restoration"],
"Haggai": ["Temple", "Priorities", "Restoration", "Blessing"],
"Zechariah": ["Messiah", "Vision", "Restoration", "Future"],
"jv-study"}
"Malachi": ["Covenant", "Faithfulness", "Offering", "Messenger"],
"Matthew": ["Kingdom", "Messiah", "Fulfillment", "Teaching"],
"Mark": ["Servant", "Action", "Suffering", "Discipleship"],
"Luke": ["Savior", "Universal", "Social Justice", "Holy Spirit"],
"John": ["Belief", "Life", "Word", "Signs"],
"Acts": ["Church", "Holy Spirit", "Mission", "Growth"],
"Romans": ["Righteousness", "Faith", "Grace", "Salvation"],
"1 Corinthians": ["Unity", "Wisdom", "Gifts", "Love"],
"2 Corinthians": ["Ministry", "Reconciliation", "Generosity", "Weakness"],
"Galatians": ["Freedom", "Grace", "Faith", "Law"],
"Ephesians": ["Unity", "Church", "Grace", "Spiritual Warfare"],
"Philippians": ["Joy", "Humility", "Unity", "Contentment"],
"Colossians": ["Supremacy", "Completeness", "Wisdom", "Freedom"],
"1 Thessalonians": ["Encouragement", "Hope", "Faith", "Return"],
"2 Thessalonians": ["Judgment", "Work", "Hope", "Perseverance"],
"1 Timothy": ["Leadership", "Church Order", "Sound Doctrine", "Godliness"],
"2 Timothy": ["Endurance", "Scripture", "Faithfulness", "Legacy"],
"Titus": ["Good Works", "Leadership", "Sound Doctrine", "Grace"],
"Philemon": ["Reconciliation", "Forgiveness", "Brotherhood", "Transformation"],
"Hebrews": ["Superiority", "Faith", "Perseverance", "Covenant"],
"James": ["Works", "Faith", "Wisdom", "Speech"],
"1 Peter": ["Suffering", "Holiness", "Hope", "Identity"],
"2 Peter": ["Knowledge", "False Teaching", "Day of the Lord", "Growth"],
"1 John": ["Love", "Truth", "Fellowship", "Assurance"],
"2 John": ["Truth", "Love", "Discernment", "Hospitality"],
"3 John": ["Hospitality", "Truth", "Example", "Leadership"],
"Jude": ["Contending", "Faith", "False Teaching", "Judgment"],
"Revelation": ["Victory", "Judgment", "Worship", "New Creation"]
}
# Combine tags
tags = []
# Add genre tags
for key in genre_tags.keys():
if key in genre.lower():
tags.extend(genre_tags[key])
break
# Add book-specific tags
if book in book_specific_tags:
tags.extend(book_specific_tags[book])
# Return unique tags
return list(set(tags))
if __name__ == "__main__":
def get_book_genre(book):
"""Return the literary genre of a book"""
genres = {
# Torah
"Genesis": "Narrative with genealogy",
"Exodus": "Narrative with law",
"Leviticus": "Law and ritual instruction",
"Numbers": "Narrative with law and census",
"Deuteronomy": "Sermonic law",
# Historical books
"Joshua": "Historical narrative",
"Judges": "Cyclical historical narrative",
"Ruth": "Historical narrative",
"1 Samuel": "Historical narrative",
"2 Samuel": "Historical narrative",
"1 Kings": "Historical narrative",
"2 Kings": "Historical narrative",
"1 Chronicles": "Historical narrative with genealogy",
"2 Chronicles": "Historical narrative",
"Ezra": "Historical narrative",
"Nehemiah": "Historical narrative with memoir",
"Esther": "Historical narrative",
# Wisdom literature
"Job": "Wisdom literature with poetic dialogue",
"Psalms": "Poetry and liturgy",
"Proverbs": "Wisdom literature",
"Ecclesiastes": "Wisdom literature with philosophical reflection",
"Song of Solomon": "Poetry and love song",
# Major Prophets
"Isaiah": "Prophetic literature with poetry",
"Jeremiah": "Prophetic literature with biography",
"Lamentations": "Poetic lament",
"Ezekiel": "Prophetic literature with apocalyptic elements",
"Daniel": "Narrative with apocalyptic visions",
# Minor Prophets
"Hosea": "Prophetic literature",
"Joel": "Prophetic literature",
"Amos": "Prophetic literature",
"Obadiah": "Prophetic literature",
"Jonah": "Prophetic narrative",
"Micah": "Prophetic literature",
"Nahum": "Prophetic literature",
"Habakkuk": "Prophetic literature with dialogue",
"Zephaniah": "Prophetic literature",
"Haggai": "Prophetic literature",
"Zechariah": "Prophetic literature with apocalyptic visions",
"Malachi": "Prophetic literature with disputation",
# Gospels
"Matthew": "Gospel narrative",
"Mark": "Gospel narrative",
"Luke": "Gospel narrative with historiography",
"John": "Gospel narrative with theology",
# Acts
"Acts": "Historical narrative",
# Pauline Epistles
"Romans": "Epistle with systematic theology",
"1 Corinthians": "Epistle",
"2 Corinthians": "Epistle",
"Galatians": "Epistle",
"Ephesians": "Epistle",
"Philippians": "Epistle",
"Colossians": "Epistle",
"1 Thessalonians": "Epistle",
"2 Thessalonians": "Epistle",
"1 Timothy": "Pastoral epistle",
"2 Timothy": "Pastoral epistle",
"Titus": "Pastoral epistle",
"Philemon": "Personal epistle",
"Hebrews": "Epistle with sermonic elements",
# General Epistles
"James": "Epistle with wisdom elements",
"1 Peter": "Epistle",
"2 Peter": "Epistle",
"1 John": "Epistle with theological discourse",
"2 John": "Brief epistle",
"3 John": "Brief epistle",
"Jude": "Epistle",
# Apocalyptic
"Revelation": "Apocalyptic literature with epistle elements"
}
return genres.get(book, "Biblical literature")
def generate_book_introduction(book):
"""Generate introduction for a book"""
# You would implement detailed logic here based on the book
# This is a simplified version that would be expanded
introductions = {
"Genesis": """
<p>Genesis, the first book of the Bible, serves as the foundation for the entire biblical narrative. Its name comes from the Greek word meaning "origin" or "beginning," and it appropriately records the beginnings of the universe, humanity, sin, salvation, and the nation of Israel. Written by Moses according to traditional attribution, Genesis spans from creation to Israel's migration to Egypt, covering more time than any other book in Scripture.</p>
<p>As the cornerstone of the Pentateuch (the first five books of the Bible), Genesis establishes the theological framework for understanding God's relationship with humanity and His covenant promises. It introduces key themes that resonate throughout Scripture: creation, fall, judgment, grace, covenant, promise, and redemption.</p>
<p>The book divides naturally into two major sections: primeval history (chapters 1-11) and patriarchal narratives (chapters 12-50). The primeval history addresses universal concerns through the stories of creation, the fall, the flood, and the Tower of Babel. The patriarchal narratives focus on God's covenant relationship with Abraham, Isaac, Jacob, and Joseph, establishing the foundation for Israel's national identity.</p>
<p>Throughout Genesis, God is portrayed as the sovereign Creator who brings order out of chaos, makes covenants with His chosen people, and works providentially to fulfill His purposes despite human failings. The book's theological significance extends far beyond its historical narrative, providing the essential backdrop for understanding God's redemptive plan that culminates in Christ.</p>
""",
"Revelation": """
<p>Revelation, the final book of the Bible, stands as a triumphant conclusion to God's written word. Also known as the Apocalypse (from the Greek word meaning "unveiling" or "disclosure"), it reveals the culmination of God's redemptive plan through symbolic visions and prophetic declarations. Written by John the Apostle during his exile on the island of Patmos around 95 CE, Revelation addresses seven churches in Asia Minor while providing a cosmic perspective on spiritual realities and future events.</p>
<p>As the Bible's primary apocalyptic book, Revelation employs rich symbolism, vivid imagery, and numerological patterns to communicate its message. It draws heavily from Old Testament prophetic literature, particularly Daniel, Ezekiel, and Zechariah, creating a tapestry of allusions that connect it to the broader biblical narrative.</p>
<p>The book presents itself as a prophecy, an apocalypse, and an epistle simultaneously. It offers both encouragement to persecuted believers and warnings to compromising churches. Throughout its twenty-two chapters, Revelation contrasts the sovereignty of God against human and demonic powers, ultimately depicting the complete victory of Christ over all evil forces.</p>
<p>Central themes include Christ's identity as the slain but victorious Lamb, divine judgment on wickedness, the cosmic conflict between God and Satan, and the glorious hope of a new heaven and new earth. While interpretations of its prophetic timeline vary among scholars, Revelation's core message remains clear: God remains sovereign over history, Christ will return in triumph, and those who remain faithful will participate in His eternal kingdom.</p>
"""
}
# Get a template introduction based on genre if specific introduction isn't available
if book not in introductions:
testament = get_testament_for_book(book)
genre = get_book_genre(book)
# Generate a generic introduction based on testament and genre
if "narrative" in genre.lower():
intro = f"""
<p>{book} is a narrative book in the {testament} that recounts key historical events and developments in Israel's history. The book contains important stories, characters, and events that contribute to the broader biblical narrative and redemptive history.</p>
<p>As with other biblical narratives, {book} combines historical reporting with theological interpretation, showing how God works through historical circumstances and human actions to accomplish His purposes. The narrative demonstrates divine providence, human responsibility, and the consequences of both obedience and disobedience.</p>
<p>Throughout {book}, readers can observe God's faithfulness to His covenant promises despite human failings and opposition. The book's events establish important precedents and patterns that inform biblical theology and provide context for understanding later Scriptural developments.</p>
"""
elif "epistle" in genre.lower():
intro = f"""
<p>{book} is an epistle (letter) in the {testament} written to address specific circumstances, challenges, and questions in the early Christian church. The letter combines theological instruction with practical exhortation, demonstrating the connection between Christian doctrine and everyday living.</p>
<p>Like other New Testament epistles, {book} addresses particular situations while establishing principles with broader application. The letter reflects the apostolic authority of its author and the normative teaching of the early church, contributing to the development of Christian theology and practice.</p>
<p>Throughout {book}, readers can observe the practical outworking of the gospel in community life, personal ethics, and spiritual development. The letter demonstrates how Christ's finished work transforms individual believers and reshapes their relationships and priorities.</p>
"""
elif "prophetic" in genre.lower() or "prophecy" in genre.lower():
intro = f"""
<p>{book} is a prophetic book in the {testament} that communicates divine messages of warning, judgment, and hope to God's people. The prophecies combine historical relevance to their original audience with enduring theological significance and, in some cases, messianic predictions.</p>
<p>Like other biblical prophetic literature, {book} addresses covenant violations, calls for repentance, and proclaims both divine judgment and promised restoration. The prophecies demonstrate God's righteousness, sovereignty over history, and faithful commitment to His covenant purposes.</p>
<p>Throughout {book}, readers encounter powerful imagery, poetic language, and symbolic actions that reinforce the prophetic message. The book reveals God's perspective on historical events and human affairs, often challenging conventional wisdom and cultural assumptions.</p>
"""
elif "wisdom" in genre.lower():
intro = f"""
<p>{book} is a wisdom book in the {testament} that addresses life's fundamental questions and provides guidance for righteous living. The book explores themes of divine order, human experience, and practical ethics, offering insights for navigating the complexities of human existence.</p>
<p>Like other biblical wisdom literature, {book} emphasizes the fear of the Lord as the foundation of true wisdom and contrasts the paths of wisdom and folly. The book demonstrates how reverence for God leads to discernment, virtue, and ultimately flourishing.</p>
<p>Throughout {book}, readers encounter profound reflections on creation's order, human limitations, moral principles, and life's meaning. The book bridges theological truth and practical living, showing how divine wisdom applies to everyday decisions and relationships.</p>
"""
elif "gospel" in genre.lower():
intro = f"""
<p>{book} is a gospel account in the {testament} that presents the life, ministry, death, and resurrection of Jesus Christ. The book combines historical reporting with theological interpretation, portraying Jesus as the fulfillment of Old Testament promises and the inaugurator of God's kingdom.</p>
<p>Like other canonical gospels, {book} selectively records Jesus' words and deeds to communicate His identity and significance. The narrative demonstrates Jesus' divine authority, redemptive mission, and transformative teaching, inviting readers to respond in faith.</p>
<p>Throughout {book}, readers encounter Jesus' interactions with various individuals and groups, His powerful parables and discourses, and the climactic events of His passion and resurrection. The book establishes the historical foundation for Christian faith while interpreting Jesus' significance for all humanity.</p>
"""
elif "apocalyptic" in genre.lower():
intro = f"""
<p>{book} is an apocalyptic book in the {testament} that unveils spiritual realities and future events through symbolic visions and prophetic declarations. The book employs rich imagery and symbolic language to communicate divine perspective on history, cosmic conflict, and ultimate outcomes.</p>
<p>Like other biblical apocalyptic literature, {book} addresses contexts of suffering and persecution, offering hope through the assurance of God's sovereignty and eventual triumph. The visions demonstrate the temporary nature of evil powers and the certainty of divine judgment and redemption.</p>
<p>Throughout {book}, readers encounter dramatic portrayals of spiritual warfare, divine intervention, and eschatological consummation. The book provides a cosmic framework for understanding present trials and maintaining faithful endurance through the assurance of God's ultimate victory.</p>
"""
else:
intro = f"""
<p>{book} is an important book in the {testament} that contributes significantly to the biblical canon. The book addresses themes and concerns relevant to its original audience while establishing principles and patterns with enduring theological significance.</p>
<p>As with other biblical literature, {book} combines historical awareness with divine inspiration, communicating God's truth through human language and cultural forms. The book demonstrates the progressive nature of divine revelation and its adaptation to specific historical contexts.</p>
<p>Throughout {book}, readers can trace important developments in the biblical narrative and theological understanding. The book provides essential insights for comprehending God's character, purposes, and relationship with humanity.</p>
"""
return intro
return introductions[book]
def generate_historical_context(book):
"""Generate historical context for a book"""
# This would be expanded with more detailed content
historical_contexts = {
"Genesis": """
<p>Genesis was compiled and written by Moses around 1440-1400 BCE, according to traditional attribution. The events it records span from creation to approximately 1800 BCE, covering the primeval period and the age of the patriarchs. The book was composed for the Israelites after their exodus from Egypt as they prepared to enter the Promised Land.</p>
<h3>Ancient Near Eastern Context</h3>
<p>The world of Genesis was dominated by great civilizations in Mesopotamia and Egypt. Urban centers had developed along the Tigris, Euphrates, and Nile rivers, with advanced writing systems, monumental architecture, and complex religious practices. Polytheism was the norm, with elaborate mythologies explaining creation and natural phenomena.</p>
<p>Several ancient Near Eastern texts share similarities with Genesis narratives, including the Enuma Elish (Babylonian creation myth), the Epic of Gilgamesh (which includes a flood account), and the Atrahasis Epic. However, Genesis presents a distinctly monotheistic worldview that contrasts sharply with these contemporaneous myths.</p>
<h3>Cultural Background</h3>
<p>The patriarchs (Abraham, Isaac, and Jacob) lived as semi-nomadic herdsmen, moving between established city-states in Canaan. Their lifestyle involved seasonal migration with flocks and herds, establishing temporary settlements, and digging wells. Kinship ties were paramount, with extended family groups (clans) forming the basic social unit.</p>
<p>Marriage customs included bride prices, arranged marriages, and occasionally polygamy, especially when a first wife was barren. Inheritance typically passed to the firstborn son, though Genesis records several instances where this pattern was divinely overturned.</p>
<h3>Archaeological Insights</h3>
<p>Archaeological discoveries have illuminated many aspects of the Genesis narratives. Excavations at sites like Ur (Abraham's birthplace) reveal a sophisticated urban center. Tablets from Mari and Nuzi document social customs similar to those practiced by the patriarchs, including adoption agreements, surrogacy arrangements, and covenant ceremonies.</p>
<p>Egypt's Middle Kingdom period (2040-1782 BCE) provides the likely background for Joseph's rise to prominence. Historical records show that Semitic people did indeed achieve high positions in Egyptian administration, and periods of famine are documented in Egyptian history.</p>
""",
"Revelation": """
<p>Revelation was written during the reign of Emperor Domitian (81-96 CE), according to early church tradition as recorded by Irenaeus. The author, John, was exiled to the island of Patmos "because of the word of God and the testimony of Jesus" (1:9), indicating persecution for his Christian witness. The book addresses seven actual churches in the Roman province of Asia (western Turkey).</p>
<h3>Roman Imperial Context</h3>
<p>The late first century was marked by increasing imperial persecution of Christians. Domitian intensified emperor worship throughout the Roman Empire, demanding to be addressed as "Lord and God" (<em>dominus et deus noster</em>). He established an imperial cult with temples and statues dedicated to his worship. Christians who refused to participate in emperor worship faced economic sanctions, social ostracism, and sometimes execution.</p>
<p>The province of Asia, where the seven churches were located, was particularly zealous in emperor worship. Ephesus, Smyrna, and Pergamum all had temples dedicated to the imperial cult. Pergamum is specifically mentioned as the place "where Satan's throne is" (2:13), likely referring to its prominence in emperor worship or its massive altar to Zeus.</p>
<h3>Church Situation</h3>
<p>The seven churches addressed in Revelation faced varying challenges. Some endured direct persecution (Smyrna, Philadelphia), while others struggled with false teaching (Ephesus, Pergamum, Thyatira), spiritual apathy (Sardis), or lukewarm commitment (Laodicea). Economic pressures pushed some believers toward compromise, as participation in trade guilds often required involvement in pagan rituals.</p>
<p>Jewish communities in these cities sometimes opposed Christian groups, as mentioned regarding Smyrna and Philadelphia (2:9, 3:9). This created additional social pressure for Jewish Christians caught between their ethnic heritage and new faith.</p>
<h3>Archaeological Evidence</h3>
<p>Archaeological excavations have confirmed details about the seven cities addressed in Revelation. Laodicea's lukewarm water came from aqueducts carrying water from hot springs that cooled during transit. The city was indeed wealthy, with a banking industry and medical school known for eye salve. Philadelphia was subject to frequent earthquakes, as alluded to in the promise of a pillar that would never be shaken (3:12).</p>
<p>Ephesus was home to the Temple of Artemis (Diana), one of the Seven Wonders of the ancient world. Excavations have uncovered a massive theater (Acts 19) and evidence of the city's prominence and wealth. Sardis' reputation as a city that appeared alive but was actually in decline is confirmed by archaeological evidence of its diminishing importance in the late first century.</p>
"""
}
# Generate a generic historical context if specific context isn't available
if book not in historical_contexts:
testament = get_testament_for_book(book)
if testament == "Old Testament":
# Determine approximate time period
period = "pre-exilic" # Default
if book in ["Ezra", "Nehemiah", "Esther", "Haggai", "Zechariah", "Malachi"]:
period = "post-exilic"
elif book in ["Jeremiah", "Lamentations", "Ezekiel", "Daniel"]:
period = "exilic"
context = f"""
<p>{book} was composed during the {period} period of Israel's history. The book reflects the historical circumstances, cultural influences, and theological concerns of its time.</p>
<h3>Historical Setting</h3>
<p>The book emerges from a context where Israel's covenant relationship with God shaped its national identity and religious practices. The surrounding nations, with their polytheistic worship and imperial ambitions, provided both cultural pressure and political threats that influenced Israel's historical experience.</p>
<p>The religious life of Israel centered around the covenant, Law, and (depending on the period) the temple, with prophets calling the people back to covenant faithfulness and warning of judgment for persistent disobedience.</p>
<h3>Cultural Background</h3>
<p>The cultural world of {book} involved agricultural societies organized around tribal and kinship relationships, with increasing urbanization and social stratification over time. Religious practices permeated daily life, and interaction with surrounding cultures created ongoing tension between assimilation and distinctive identity.</p>
<p>Archaeological discoveries have illuminated many aspects of daily life, religious practices, and historical events mentioned in {book}, providing background context for understanding its narratives and teachings.</p>
"""
else: # New Testament
context = f"""
<p>{book} was written during the first century CE, within the context of the early Christian church developing under Roman imperial rule. The book reflects the historical circumstances, cultural influences, and theological concerns of this formative period.</p>
<h3>Roman Imperial Context</h3>
<p>The Roman Empire provided the overarching political structure for the New Testament world, with its system of provinces, client kingdoms, and military presence. The Pax Romana (Roman Peace) enabled travel and communication throughout the Mediterranean world, facilitating the spread of Christianity while also presenting challenges through imperial ideology and occasional persecution.</p>
<h3>Religious Environment</h3>
<p>The religious landscape included Judaism with its various sects (Pharisees, Sadducees, Essenes), Greco-Roman polytheism, mystery religions, and philosophical schools. Early Christianity emerged within this complex environment, defining its identity in relation to Judaism while addressing Gentile converts from pagan backgrounds.</p>
<p>Archaeological discoveries, historical documents, and cultural studies have illuminated many aspects of daily life, religious practices, and social structures in the first-century world, providing valuable context for understanding {book}.</p>
"""
import uvicorn
uvicorn.run(
+14 -1
View File
@@ -44,6 +44,9 @@
<p style="font-size: 1rem; color: var(--text-secondary);">
Select a chapter to begin reading {{ book }} from the KJV Bible
</p>
<a href="/book/{{ book }}/commentary" class="nav-button nav-button-primary" style="display: inline-block; margin-top: 1rem;">
View Complete {{ book }} Commentary
</a>
</div>
<div class="chapter-grid">
@@ -55,7 +58,17 @@
</div>
<div class="text-center mt-4" style="padding: 1.5rem; background: var(--surface-color); border-radius: var(--radius-lg); margin-top: 3rem; border: 1px solid var(--border-light);">
<p style="color: var(--text-secondary); margin: 0; font-style: italic;">
<h3 style="color: var(--primary-color); margin: 0 0 1rem; font-family: var(--font-display);">
📚 Book Commentary
</h3>
<p style="color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.6;">
Explore our comprehensive commentary on {{ book }} with historical context, theological insights,
and verse-by-verse analysis. Includes chapter summaries and cross-references to other biblical books.
</p>
<a href="/book/{{ book }}/commentary" class="nav-button" style="display: inline-block;">
Read {{ book }} Commentary
</a>
<p style="color: var(--text-secondary); margin-top: 1rem; font-style: italic; font-size: 0.9rem;">
"Study to shew thyself approved unto God, a workman that needeth not to be ashamed, rightly dividing the word of truth."
<br>
<strong style="color: var(--primary-color);">2 Timothy 2:15</strong>
+708
View File
@@ -0,0 +1,708 @@
{% extends "base.html" %}
{% block title %}Commentary on {{ book }} - Authorized King James Version (KJV) Bible{% endblock %}
{% block description %}In-depth commentary on the Book of {{ book }} from the Authorized King James Version (KJV) Bible. Explore themes, historical context, and theological significance.{% endblock %}
{% block keywords %}{{ book }} commentary, {{ book }} study guide, {{ book }} KJV, Authorized King James Version, {{ book }} analysis, {{ book }} themes, {{ book }} meaning{% endblock %}
{% block schema_type %}Article{% endblock %}
{% block structured_data %},
"headline": "Commentary on {{ book }} - Authorized King James Version (KJV)",
"articleSection": "Biblical Commentary",
"text": "Comprehensive commentary on the Book of {{ book }} from the Authorized King James Version (KJV) Bible.",
"isPartOf": {
"@type": "Book",
"name": "{{ book }} - Authorized King James Version",
"isPartOf": {
"@type": "Book",
"name": "Authorized King James Version Bible"
}
}{% endblock %}
{% block head %}
<style>
.commentary-container {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.commentary-header {
background: var(--primary-color);
color: white;
padding: 2rem 1rem;
text-align: center;
margin-bottom: 2rem;
border-radius: var(--radius-lg);
}
.commentary-header h1 {
margin: 0 0 0.5rem;
font-size: 2rem;
}
.commentary-header p {
margin: 0;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.book-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0;
justify-content: center;
}
.book-meta-item {
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
}
.commentary-section {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
.commentary-section h2 {
margin-top: 0;
color: var(--primary-color);
font-size: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-light);
}
.commentary-section h3 {
font-size: 1.25rem;
color: var(--primary-color);
margin: 1.5rem 0 0.75rem;
}
.commentary-section p {
margin: 0 0 1rem;
line-height: 1.7;
}
.verse-reference {
font-weight: 500;
color: var(--primary-color);
text-decoration: none;
white-space: nowrap;
}
.verse-reference:hover {
text-decoration: underline;
}
.sidebar-toc {
position: sticky;
top: 2rem;
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.25rem;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
margin-bottom: 2rem;
}
.sidebar-toc h3 {
margin-top: 0;
font-size: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-light);
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-item {
margin-bottom: 0.5rem;
}
.toc-link {
display: block;
padding: 0.5rem;
border-radius: var(--radius-sm);
color: var(--text-secondary);
text-decoration: none;
transition: all 0.2s ease;
}
.toc-link:hover {
background: rgba(75, 46, 131, 0.05);
color: var(--primary-color);
}
.toc-link.active {
background: rgba(75, 46, 131, 0.1);
color: var(--primary-color);
font-weight: 500;
}
.outline-section {
margin-bottom: 2rem;
}
.outline-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--primary-color);
}
.outline-list {
padding-left: 1.5rem;
margin: 0;
}
.outline-item {
margin-bottom: 0.5rem;
position: relative;
}
.outline-item:before {
content: "";
position: absolute;
left: -1.5rem;
top: 0.5rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--primary-color);
}
.outline-nested {
padding-left: 1.5rem;
margin-top: 0.5rem;
}
.highlights-section {
margin: 2rem 0;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(255, 235, 59, 0.1), rgba(255, 235, 59, 0.2));
border-radius: var(--radius-lg);
border-left: 4px solid rgba(255, 235, 59, 0.5);
}
.highlights-section h3 {
margin-top: 0;
color: var(--text-primary);
}
.highlights-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.highlight-card {
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-md);
padding: 1rem;
box-shadow: var(--shadow-sm);
}
.highlight-title {
font-weight: 600;
margin: 0 0 0.5rem;
color: var(--primary-color);
}
.highlight-desc {
margin: 0;
font-size: 0.875rem;
color: var(--text-secondary);
}
.two-column {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 2rem;
}
@media (max-width: 768px) {
.two-column {
grid-template-columns: 1fr;
}
.sidebar-toc {
display: none;
}
.commentary-header h1 {
font-size: 1.5rem;
}
}
.tag {
display: inline-block;
background: rgba(75, 46, 131, 0.1);
color: var(--primary-color);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.author-note {
margin-top: 2rem;
padding: 1rem;
background: rgba(75, 46, 131, 0.05);
border-radius: var(--radius-md);
font-style: italic;
color: var(--text-secondary);
font-size: 0.875rem;
}
.cross-ref-section {
margin-top: 2rem;
padding: 1rem;
background: rgba(75, 46, 131, 0.05);
border-radius: var(--radius-md);
}
.cross-ref-title {
margin-top: 0;
font-size: 1rem;
margin-bottom: 0.75rem;
color: var(--primary-color);
}
.cross-ref-list {
column-count: 2;
column-gap: 2rem;
}
@media (max-width: 768px) {
.cross-ref-list {
column-count: 1;
}
}
.cross-ref-list li {
margin-bottom: 0.5rem;
break-inside: avoid;
}
.backdrop-blur {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.backdrop-blur.active {
opacity: 1;
pointer-events: auto;
}
.verse-popup {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-lg);
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.verse-popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-light);
}
.verse-popup-title {
margin: 0;
font-size: 1.25rem;
color: var(--primary-color);
}
.verse-popup-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
padding: 0;
}
.verse-popup-text {
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 1rem;
font-family: var(--font-serif);
}
.verse-popup-comment {
background: rgba(75, 46, 131, 0.05);
border-radius: var(--radius-md);
padding: 1rem;
margin-top: 1rem;
}
.verse-popup-comment-title {
margin: 0 0 0.5rem;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--primary-color);
}
.verse-popup-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
justify-content: flex-end;
}
.verse-popup-action {
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
background: var(--background-color);
border: 1px solid var(--border-color);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.verse-popup-action:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.highlight-verse {
animation: pulse-highlight 2s ease;
}
@keyframes pulse-highlight {
0% { background-color: transparent; }
30% { background-color: rgba(255, 235, 59, 0.5); }
100% { background-color: transparent; }
}
</style>
{% endblock %}
{% block breadcrumb %}
<div class="container">
<nav class="breadcrumb">
<a href="/">📚 All Books</a>
<span class="breadcrumb-separator">/</span>
<a href="/book/{{ book }}">{{ book }}</a>
<span class="breadcrumb-separator">/</span>
<span>Commentary</span>
</nav>
</div>
{% endblock %}
{% block content %}
<header class="commentary-header">
<h1>Commentary on {{ book }}</h1>
<p>Comprehensive analysis and insights from the Authorized King James Version (KJV)</p>
<div class="book-meta">
<span class="book-meta-item">{{ testament }}</span>
<span class="book-meta-item">{{ genre }}</span>
<span class="book-meta-item">{{ chapters|length }} Chapters</span>
<span class="book-meta-item">{{ time_period }}</span>
</div>
</header>
<div class="commentary-container">
<div class="two-column">
<div class="main-content">
<section class="commentary-section">
<h2 id="introduction">Introduction to {{ book }}</h2>
{{ introduction|safe }}
<div class="tags-container" style="margin-top: 1.5rem;">
{% for tag in tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
</div>
<div class="author-note">
<strong>Note:</strong> This commentary provides historical, theological, and literary insights on {{ book }} while remaining faithful to the text of the Authorized King James Version (KJV).
</div>
</section>
<section class="commentary-section">
<h2 id="historical-context">Historical Context</h2>
{{ historical_context|safe }}
</section>
<section class="commentary-section">
<h2 id="literary-features">Literary Features</h2>
{{ literary_features|safe }}
</section>
<div class="highlights-section">
<h3>Key Passages in {{ book }}</h3>
<div class="highlights-list">
{% for highlight in highlights %}
<div class="highlight-card">
<h4 class="highlight-title">{{ highlight.reference }}</h4>
<p class="highlight-desc">{{ highlight.description }}</p>
</div>
{% endfor %}
</div>
</div>
<section class="commentary-section">
<h2 id="outline">Book Outline</h2>
{% for section in outline %}
<div class="outline-section">
<h3 class="outline-title">{{ section.title }}</h3>
<ul class="outline-list">
{% for item in section.items %}
<li class="outline-item">
{{ item.text }}
{% if item.reference %}
(<a href="{{ item.url }}" class="verse-reference">{{ item.reference }}</a>)
{% endif %}
{% if item.subitems %}
<ul class="outline-nested">
{% for subitem in item.subitems %}
<li class="outline-item">
{{ subitem.text }}
{% if subitem.reference %}
(<a href="{{ subitem.url }}" class="verse-reference">{{ subitem.reference }}</a>)
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</section>
<section class="commentary-section">
<h2 id="themes">Major Themes</h2>
{{ themes|safe }}
</section>
<section class="commentary-section">
<h2 id="theological-significance">Theological Significance</h2>
{{ theological_significance|safe }}
<div class="cross-ref-section">
<h3 class="cross-ref-title">Cross References to Other Books</h3>
<ul class="cross-ref-list">
{% for ref in cross_references %}
<li>
<a href="{{ ref.url }}" class="verse-reference">{{ ref.reference }}</a> - {{ ref.description }}
</li>
{% endfor %}
</ul>
</div>
</section>
<section class="commentary-section">
<h2 id="chapter-summaries">Chapter Summaries</h2>
{% for chapter_num, chapter_data in chapter_summaries.items() %}
<h3 id="chapter-{{ chapter_num }}">Chapter {{ chapter_num }}</h3>
<p>{{ chapter_data.summary }}</p>
{% if chapter_data.key_verses %}
<div style="margin: 1rem 0 1.5rem; padding: 0.75rem; background: rgba(255, 235, 59, 0.1); border-radius: var(--radius-md);">
<h4 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">Key Verses:</h4>
<ul style="margin: 0; padding-left: 1.25rem;">
{% for verse in chapter_data.key_verses %}
<li>
<a href="{{ verse.url }}" class="verse-reference verse-popup-trigger" data-chapter="{{ chapter_num }}" data-verse="{{ verse.verse_num }}" data-text="{{ verse.text }}" data-comment="{{ verse.comment }}">
{{ book }} {{ chapter_num }}:{{ verse.verse_num }}
</a> - {{ verse.brief }}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
</section>
<section class="commentary-section">
<h2 id="application">Contemporary Application</h2>
{{ application|safe }}
</section>
</div>
<aside class="sidebar-toc">
<h3>Commentary Contents</h3>
<ul class="toc-list">
<li class="toc-item"><a href="#introduction" class="toc-link">Introduction</a></li>
<li class="toc-item"><a href="#historical-context" class="toc-link">Historical Context</a></li>
<li class="toc-item"><a href="#literary-features" class="toc-link">Literary Features</a></li>
<li class="toc-item"><a href="#outline" class="toc-link">Book Outline</a></li>
<li class="toc-item"><a href="#themes" class="toc-link">Major Themes</a></li>
<li class="toc-item"><a href="#theological-significance" class="toc-link">Theological Significance</a></li>
<li class="toc-item"><a href="#chapter-summaries" class="toc-link">Chapter Summaries</a></li>
<li class="toc-item"><a href="#application" class="toc-link">Contemporary Application</a></li>
</ul>
<h3 style="margin-top: 1.5rem;">Chapter Quick Links</h3>
<ul class="toc-list" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem;">
{% for chapter_num in chapter_summaries.keys() %}
<li style="margin: 0;">
<a href="#chapter-{{ chapter_num }}" class="toc-link" style="padding: 0.25rem; text-align: center;">{{ chapter_num }}</a>
</li>
{% endfor %}
</ul>
<div style="margin-top: 2rem; text-align: center;">
<a href="/book/{{ book }}" class="nav-button" style="display: inline-block; width: 100%;">
Back to {{ book }}
</a>
</div>
</aside>
</div>
</div>
<div class="backdrop-blur" id="versePopup">
<div class="verse-popup">
<div class="verse-popup-header">
<h3 class="verse-popup-title" id="popupTitle">Verse Title</h3>
<button class="verse-popup-close" onclick="closeVersePopup()">×</button>
</div>
<div class="verse-popup-text" id="popupText">Verse text will appear here.</div>
<div class="verse-popup-comment" id="popupCommentContainer">
<h4 class="verse-popup-comment-title">Commentary</h4>
<div id="popupComment">Commentary will appear here.</div>
</div>
<div class="verse-popup-actions">
<a href="#" class="verse-popup-action" id="popupReadInContext">Read in Context</a>
<a href="#" class="verse-popup-action" id="popupViewCommentary">View Full Commentary</a>
</div>
</div>
</div>
{% endblock %}
{% block navigation %}
<div class="container">
<div class="navigation">
<a href="/book/{{ book }}" class="nav-button">
← Back to {{ book }}
</a>
<div style="display: flex; gap: 0.5rem;">
<a href="/book/{{ book }}/chapter/1" class="nav-button nav-button-primary">
Begin Reading {{ book }} →
</a>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Handle TOC active state based on scroll position
const sections = document.querySelectorAll('.commentary-section h2, .commentary-section h3');
const tocLinks = document.querySelectorAll('.toc-link');
window.addEventListener('scroll', function() {
let currentSection = '';
sections.forEach(section => {
const sectionTop = section.offsetTop - 100;
if (window.scrollY >= sectionTop) {
currentSection = section.getAttribute('id');
}
});
tocLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === '#' + currentSection) {
link.classList.add('active');
}
});
});
// Verse popup functionality
const verseLinks = document.querySelectorAll('.verse-popup-trigger');
verseLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const chapter = this.dataset.chapter;
const verse = this.dataset.verse;
const text = this.dataset.text;
const comment = this.dataset.comment;
document.getElementById('popupTitle').textContent = `${book} ${chapter}:${verse}`;
document.getElementById('popupText').textContent = text;
document.getElementById('popupComment').textContent = comment;
document.getElementById('popupReadInContext').href = `/book/${book}/chapter/${chapter}#verse-${verse}`;
document.getElementById('popupViewCommentary').href = `/commentary/${book}/${chapter}#verse-${verse}`;
document.getElementById('versePopup').classList.add('active');
});
});
// Highlight verse from URL hash
if (window.location.hash) {
setTimeout(() => {
const target = document.querySelector(window.location.hash);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
target.classList.add('highlight-verse');
setTimeout(() => {
target.classList.remove('highlight-verse');
}, 2000);
}
}, 100);
}
});
function closeVersePopup() {
document.getElementById('versePopup').classList.remove('active');
}
// Close popup when clicking outside
document.getElementById('versePopup').addEventListener('click', function(e) {
if (e.target === this) {
closeVersePopup();
}
});
// Close popup with escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeVersePopup();
}
});
</script>
{% endblock %}
+195 -25
View File
@@ -56,26 +56,20 @@
}
.verse-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: rgba(75, 46, 131, 0.1);
color: var(--primary-color);
font-size: 0.75rem;
font-weight: 600;
font-size: 0.875rem;
margin-right: 0.5rem;
color: var(--primary-color);
vertical-align: super;
margin-right: 0.25rem;
user-select: none;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
display: inline;
}
.verse-number:hover {
background-color: var(--primary-color);
color: white;
transform: scale(1.1);
color: var(--primary-color);
text-decoration: underline;
}
.highlight-verse {
@@ -222,8 +216,7 @@
<div class="verses-container" id="versesContainer">
{% for verse in verses %}
<div class="verse" id="verse-{{ verse.verse }}">
<span class="verse-number" title="Verse {{ verse.verse }}" onclick="navigateToVerse({{ verse.verse }})">{{ verse.verse }}</span>
<span class="verse-text">{{ verse.text }}</span>
<span class="verse-number" title="Verse {{ verse.verse }}" onclick="navigateToVerse({{ verse.verse }})">{{ verse.verse }}</span><span class="verse-text">{{ verse.text }}</span>
<span class="verse-tools">
<a href="#verse-{{ verse.verse }}" class="verse-tool" title="Link to Verse {{ verse.verse }}" onclick="copyVerseLink({{ verse.verse }})">
🔗
@@ -239,7 +232,7 @@
{% endfor %}
</div>
<div style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 2rem; margin-top: 3rem; border: 1px solid var(--border-light); text-center;">
<div class="commentary-preview" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 2rem; margin-top: 3rem; border: 1px solid var(--border-light); text-center;">
<h3 style="color: var(--primary-color); margin: 0 0 1rem; font-family: var(--font-display);">
🤖 AI Commentary
</h3>
@@ -258,10 +251,9 @@
<span style="background: rgba(75, 46, 131, 0.1); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem;">Domitian Era</span>
<span style="background: rgba(75, 46, 131, 0.1); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem;">Seven Churches</span>
</div>
<p style="color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.6;">
Our comprehensive analysis of Revelation 1 features in-depth historical context from the Domitian period (81-96 CE),
detailed examination of apocalyptic symbolism, theological insights on Christ's divine nature, and extensive
cross-references to Old Testament prophetic visions in Daniel, Ezekiel, and Isaiah.
<p style="color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.6;">
Explore our detailed verse-by-verse analysis of Revelation 1, featuring historical context from the late first century CE,
theological insights on apocalyptic literature, and cross-references to Old Testament prophetic visions.
</p>
<div style="background: rgba(255, 255, 255, 0.7); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 1rem; border: 1px solid rgba(75, 46, 131, 0.2);">
<h5 style="margin: 0 0 0.5rem; color: var(--primary-color); font-size: 0.9rem;">Featured Commentary Highlights:</h5>
@@ -280,9 +272,106 @@
and cross-references for {{ book }} {{ chapter }} from the Authorized King James Version (KJV).
</p>
{% endif %}
<a href="/commentary/{{ book }}/{{ chapter }}" class="nav-button nav-button-primary" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem;">
View AI Commentary for {{ book }} {{ chapter }}
</a>
<div class="button-group" style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
<a href="#embedded-commentary" class="nav-button" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem;">
View Commentary Below
</a>
<a href="/commentary/{{ book }}/{{ chapter }}" class="nav-button nav-button-primary" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem;">
Open Full Commentary
</a>
</div>
</div>
<!-- Embedded Commentary Section -->
<div id="embedded-commentary" class="embedded-commentary" style="margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-light);">
<h2 style="text-align: center; color: var(--primary-color); margin-bottom: 2rem; font-family: var(--font-display);">
AI Commentary on {{ book }} {{ chapter }}
</h2>
<!-- Chapter Overview -->
<div class="commentary-card" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);">
<h3 style="color: var(--primary-color); margin-top: 0; margin-bottom: 1rem; font-family: var(--font-display);">
Chapter Overview
</h3>
<div style="color: var(--text-secondary); line-height: 1.7;">
{{ chapter_overview|safe if chapter_overview else "Chapter overview is not available." }}
</div>
</div>
<!-- Verse-by-Verse Commentary -->
{% if commentaries %}
<h3 style="margin: 2rem 0 1rem; color: var(--primary-color); font-family: var(--font-display);">Verse-by-Verse Commentary</h3>
{% for verse in verses %}
{% if verse.verse in commentaries %}
<div id="commentary-verse-{{ verse.verse }}" class="commentary-card" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light);">
<h4 style="margin: 0; color: var(--primary-color); font-family: var(--font-display);">
<a href="#verse-{{ verse.verse }}" class="verse-link" style="text-decoration: none; color: inherit;">
Verse {{ verse.verse }}
</a>
</h4>
<a href="/commentary/{{ book }}/{{ chapter }}#verse-{{ verse.verse }}" style="font-size: 0.875rem; color: var(--primary-color); text-decoration: none;">
View in Full Commentary
</a>
</div>
<div class="verse-quote" style="background: rgba(255, 235, 59, 0.1); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; border-left: 3px solid rgba(255, 235, 59, 0.5); font-family: var(--font-serif);">
{{ verse.text }}
</div>
<div style="display: flex; gap: 1rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0.5rem;">
<button class="tab active" onclick="switchCommentaryTab({{ verse.verse }}, 'analysis')" style="background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: 500;">
Analysis
</button>
<button class="tab" onclick="switchCommentaryTab({{ verse.verse }}, 'historical')" style="background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-secondary);">
Historical Context
</button>
<button class="tab" onclick="switchCommentaryTab({{ verse.verse }}, 'questions')" style="background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-secondary);">
Study Questions
</button>
</div>
<div id="tab-{{ verse.verse }}-analysis" class="tab-content active" style="color: var(--text-secondary); line-height: 1.7;">
{{ commentaries[verse.verse].analysis|safe }}
{% if commentaries[verse.verse].cross_references %}
<div style="background: rgba(75, 46, 131, 0.05); padding: 1rem; border-radius: var(--radius-md); margin-top: 1rem;">
<h5 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--primary-color);">Cross References:</h5>
<ul style="margin: 0; padding-left: 1.25rem;">
{% for ref in commentaries[verse.verse].cross_references %}
<li>
<a href="{{ ref.url }}" style="color: var(--primary-color); text-decoration: none;">{{ ref.text }}</a> - {{ ref.context }}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div id="tab-{{ verse.verse }}-historical" class="tab-content" style="display: none; color: var(--text-secondary); line-height: 1.7;">
{{ commentaries[verse.verse].historical|safe }}
</div>
<div id="tab-{{ verse.verse }}-questions" class="tab-content" style="display: none; color: var(--text-secondary); line-height: 1.7;">
<ol style="padding-left: 1.25rem; margin: 0;">
{% for question in commentaries[verse.verse].questions %}
<li style="margin-bottom: 0.75rem;">{{ question }}</li>
{% endfor %}
</ol>
</div>
</div>
{% endif %}
{% endfor %}
{% else %}
<div style="text-align: center; padding: 2rem; background: var(--surface-color); border-radius: var(--radius-lg); margin-bottom: 2rem; border: 1px solid var(--border-light);">
<p style="color: var(--text-secondary); margin: 0 0 1rem;">Commentary is still loading or not available for this chapter.</p>
<a href="/commentary/{{ book }}/{{ chapter }}" class="nav-button nav-button-primary">
Try Full Commentary
</a>
</div>
{% endif %}
</div>
{% endblock %}
@@ -334,7 +423,7 @@ function updateLineHeight(value) {
function toggleVerseNumbers(show) {
const numbers = document.querySelectorAll('.verse-number');
numbers.forEach(number => {
number.style.display = show ? 'block' : 'none';
number.style.display = show ? 'inline' : 'none';
});
localStorage.setItem('kjv-show-verse-numbers', show);
}
@@ -368,6 +457,30 @@ function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function switchCommentaryTab(verseNumber, tabName) {
// Hide all tabs for this verse
const tabContents = document.querySelectorAll(`#commentary-verse-${verseNumber} .tab-content`);
tabContents.forEach(tab => tab.style.display = 'none');
// Deactivate all tab buttons
const tabButtons = document.querySelectorAll(`#commentary-verse-${verseNumber} .tab`);
tabButtons.forEach(button => {
button.classList.remove('active');
button.style.borderBottom = '2px solid transparent';
button.style.color = 'var(--text-secondary)';
});
// Activate the selected tab
document.getElementById(`tab-${verseNumber}-${tabName}`).style.display = 'block';
// Activate the tab button
const activeButton = document.querySelector(`#commentary-verse-${verseNumber} .tab:nth-child(${tabName === 'analysis' ? 1 : tabName === 'historical' ? 2 : 3})`);
activeButton.classList.add('active');
activeButton.style.borderBottom = '2px solid var(--primary-color)';
activeButton.style.color = 'var(--primary-color)';
activeButton.style.fontWeight = '500';
}
function showToast(message) {
const toast = document.createElement('div');
toast.textContent = message;
@@ -422,6 +535,17 @@ document.addEventListener('DOMContentLoaded', function() {
const verseMatch = window.location.hash.match(/verse-(\d+)/);
if (verseMatch && verseMatch[1]) {
showToast('Navigated to Verse ' + verseMatch[1]);
// If the verse has commentary, highlight the commentary card too
const commentaryCard = document.getElementById(`commentary-verse-${verseMatch[1]}`);
if (commentaryCard) {
commentaryCard.style.border = '2px solid var(--primary-color)';
commentaryCard.style.boxShadow = 'var(--shadow-md)';
setTimeout(() => {
commentaryCard.style.border = '1px solid var(--border-light)';
commentaryCard.style.boxShadow = 'var(--shadow-sm)';
}, 3000);
}
}
// Apply highlighting
@@ -432,6 +556,52 @@ document.addEventListener('DOMContentLoaded', function() {
}
}, 100);
}
// Add cross-links from verses to commentary
document.querySelectorAll('.verse').forEach(verse => {
const verseNum = verse.id.replace('verse-', '');
const commentaryEl = document.getElementById(`commentary-verse-${verseNum}`);
if (commentaryEl) {
// Mark verses with commentary
const verseTools = verse.querySelector('.verse-tools');
if (verseTools) {
const commentaryLink = document.createElement('a');
commentaryLink.href = `#commentary-verse-${verseNum}`;
commentaryLink.className = 'verse-tool';
commentaryLink.title = `View commentary for Verse ${verseNum}`;
commentaryLink.innerHTML = '💡';
commentaryLink.onclick = function(e) {
e.preventDefault();
commentaryEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
commentaryEl.style.border = '2px solid var(--primary-color)';
commentaryEl.style.boxShadow = 'var(--shadow-md)';
setTimeout(() => {
commentaryEl.style.border = '1px solid var(--border-light)';
commentaryEl.style.boxShadow = 'var(--shadow-sm)';
}, 3000);
return false;
};
verseTools.appendChild(commentaryLink);
}
// Add visual indicator to verses with commentary
const verseNumber = verse.querySelector('.verse-number');
if (verseNumber) {
const indicator = document.createElement('span');
indicator.style.cssText = `
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--primary-color);
margin-left: 2px;
vertical-align: text-top;
`;
verseNumber.appendChild(indicator);
}
}
});
});
// Add CSS animations