kjvstudy.org/kjvstudy_org/templates/tetragrammaton.html

{% extends "base.html" %}

{% block title %}{{ content.title }} - KJV Study{% endblock %}
{% block description %}The sacred four-letter name of God (YHWH) - its meaning, pronunciation, and theological significance{% endblock %}

{% block head %}
<style>
.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;
}
</style>
{% endblock %}

{% block content %}
<h1>{{ content.title }}</h1>
<p class="subtitle">{{ content.subtitle }}</p>

<nav class="toc" id="toc">
    <h2>Contents</h2>
    <ul id="toc-list"></ul>
</nav>

<section>
    <p>{{ content.introduction | safe }}</p>
</section>

{% for section in content.sections %}
<section>
    <h2>{{ section.heading }}</h2>

    <p>{{ section.content | safe }}</p>

    {% if section.verses %}
    <h3>Key Scripture</h3>
    {% for verse in section.verses %}
    <p style="margin: 1rem 0; padding-left: 1.5rem; border-left: 2px solid var(--border-color-dark);">
        <strong><a href="/book/{{ verse.reference.rsplit(' ', 1)[0] }}/chapter/{{ verse.reference.rsplit(' ', 1)[1].split(':')[0] }}/verse/{{ verse.reference.rsplit(' ', 1)[1].split(':')[1] if ':' in verse.reference else '1' }}">{{ verse.reference }}</a></strong><br/>
        <em style="color: #444;">{{ verse.text }}</em>
    </p>
    {% endfor %}
    {% endif %}
</section>
{% endfor %}

<section>
    <h2>Conclusion</h2>
    <p>{{ content.conclusion | safe }}</p>
</section>

<section>
    <p><a href="/resources">← Back to Resources</a></p>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Generate TOC from h2 and h3 headings
    const tocList = document.getElementById('toc-list');
    const headings = document.querySelectorAll('section h2, section h3');

    headings.forEach((heading, index) => {
        // Create an ID for the heading if it doesn't have one
        if (!heading.id) {
            heading.id = 'section-' + heading.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-');
        }

        // Create TOC entry
        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);
    });
});
</script>
{% endblock %}