mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user