Add verse linking to study guides

Implement automatic verse reference linking in study guide content pages.

Changes:
- Added verse linking JavaScript to study_guide_detail.html
- Supports all verse reference patterns:
  * Single verses: "John 3:16"
  * Verse ranges: "Romans 8:28-29"
  * Comma-separated lists: "Psalms 7:17, 9:2, 18:13"
- Links verses in section content paragraphs
- Skips margin toggle label paragraphs to avoid double-linking

Now study guides like /study-guides/new-believer will have all
verse references automatically linked and hoverable for tooltips.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-23 21:36:23 -05:00
parent d1df9b9b84
commit 2dc31df2f0
@@ -2,6 +2,96 @@
{% block title %}{{ guide.title }} - Bible Study Guide - KJV Bible{% endblock %}
{% block head %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to link verse references in text
function linkVerseReferences(element) {
if (!element) return;
// Get all text nodes
const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
const textNodes = [];
let node;
while (node = walker.nextNode()) {
textNodes.push(node);
}
textNodes.forEach(function(textNode) {
let text = textNode.textContent;
let changed = false;
// First, handle comma-separated verse lists like "Psalms 7:17, 9:2, 18:13"
// Pattern: Book chapter:verse, chapter:verse, chapter:verse...
text = text.replace(/\b(\d?\s?[A-Z][a-z]+(?:\s+[A-Z][a-z]+)?)\s+((?:\d+:\d+(?:-\d+)?(?:\s*,\s*)?)+)/g, function(match, book, verseList) {
book = book.trim();
// Check if this is actually a comma-separated list
if (!verseList.includes(',')) {
// Single verse, will be handled by the next regex
return match;
}
changed = true;
// Split by comma and process each verse reference
var verses = verseList.split(/\s*,\s*/);
var links = verses.map(function(verseRef) {
verseRef = verseRef.trim();
var parts = verseRef.match(/^(\d+):(\d+)(?:-(\d+))?$/);
if (parts) {
var chapter = parts[1];
var verseStart = parts[2];
var verseEnd = parts[3];
if (verseEnd) {
return '<a href="/book/' + book + '/chapter/' + chapter + '#verse-' + verseStart + '-' + verseEnd + '">' + book + ' ' + chapter + ':' + verseStart + '-' + verseEnd + '</a>';
} else {
return '<a href="/book/' + book + '/chapter/' + chapter + '/verse/' + verseStart + '">' + book + ' ' + chapter + ':' + verseStart + '</a>';
}
}
return verseRef;
});
return links.join(', ');
});
// Then handle individual verse references like "John 3:16" or "Romans 8:28-29"
// This regex handles book names with optional numbers and spaces
text = text.replace(/\b(\d?\s?[A-Z][a-z]+(?:\s+[A-Z][a-z]+)?)\s+(\d+):(\d+)(?:-(\d+))?\b/g, function(match, book, chapter, verseStart, verseEnd) {
changed = true;
book = book.trim();
if (verseEnd) {
return '<a href="/book/' + book + '/chapter/' + chapter + '#verse-' + verseStart + '-' + verseEnd + '">' + match + '</a>';
} else {
return '<a href="/book/' + book + '/chapter/' + chapter + '/verse/' + verseStart + '">' + match + '</a>';
}
});
if (changed) {
const span = document.createElement('span');
span.innerHTML = text;
textNode.parentNode.replaceChild(span, textNode);
// Replace the span's children with its contents
while (span.firstChild) {
span.parentNode.insertBefore(span.firstChild, span);
}
span.parentNode.removeChild(span);
}
});
}
// Link verse references in all section content paragraphs
document.querySelectorAll('section p').forEach(function(paragraph) {
// Skip paragraphs that are just margin toggle labels
if (!paragraph.querySelector('.margin-toggle')) {
linkVerseReferences(paragraph);
}
});
});
</script>
{% endblock %}
{% block content %}
<h1>{{ guide.title }}</h1>
<p class="subtitle"><a href="/">Authorized King James Version</a></p>