Projects › BibleWeb › Themes & Parables › Jesus themes browser
Done

Jesus themes browser

Area: Themes & Parables Milestone: v3

Context

Problem: Readers often want to explore what Jesus taught about specific topics — prayer, forgiveness, money, faith. But these teachings are scattered across the four Gospels and hard to collect manually.

Solution: A theme browser that groups Bible verses by topic, with a special "Jesus' Teaching" section that filters to Gospel verses only (Matthew–John). Users can browse 13 themes and see all relevant verses organized by book.

Not included: Bible-wide themes spanning the entire Old and New Testament (that's a separate, partially-implemented feature). This focuses on what Jesus specifically taught.

Functional

A two-section theme browser: "Themes from Jesus' Teaching" (Gospel-filtered) and "Themes from the Whole Bible" (all books).

User flow:

  1. User navigates to /themes
  2. Sees two sections:
    • "Themes from Jesus' Teaching" — 13 topic cards in a 2-column grid
    • "Themes from the Whole Bible" — additional themes (currently sparse)
  3. Clicks a Jesus theme (e.g., "Prayer") → navigates to /themes/1?section=jesus
  4. Detail page shows all Gospel verses tagged with that theme, grouped by book
  5. Each book is a collapsible section (toggle with ▸/▾)
  6. Jesus' speech verses highlighted in gold
  7. Clicking a verse navigates to the reader at that chapter

13 Jesus themes: Prayer, Money & Possessions, The Kingdom of God, Love & Compassion, Hypocrisy & Religious Leaders, Faith & Doubt, Forgiveness, Outcasts & Sinners, Conflict & Opposition, Death & Resurrection, Children, The Law & Fulfillment, Sexuality

Edge cases:

  • ?section=jesus filters to bookId 40-43 (Gospels only)
  • Without the param, shows all books for that theme
  • Collapsible sections remember their state during the session
  • EN/NL/Both translation toggle available

UX & Design

List page:

  • "Themes from Jesus' Teaching" heading with description
  • 2-column grid of theme cards (name + arrow)
  • "Themes from the Whole Bible" section below (greyed out when empty)

Detail page:

  • Theme name as heading
  • Collapsible book sections: ▸ Book Name (click to expand/collapse ▾)
  • Verse rows with verse reference and text
  • Jesus-speech verses in gold (var(--color-jesus-words))
  • Each verse navigable to /read/[bookId]/[chapter]

Technical

Data:

  • DB tables: themes (id, name), verse_themes (theme_id, book_id, chapter, verse)
  • verse_themes references verses by coordinates, not verse.id

Queries (apps/web/src/lib/server/queries/themes.ts):

  • getThemesWithSections() — SQL with MAX(CASE WHEN book_id BETWEEN 40 AND 43 ...) to compute has_gospel and has_non_gospel flags per theme
  • getThemeVerses(id) — joins verse_themes → verses, returns grouped by book

Routes:

  • List: /themes — +page.server.ts calls getThemesWithSections()
  • Detail: /themes/[id] — +page.server.ts calls getThemeVerses(id)
  • Detail page filters groups to bookId 40-43 when ?section=jesus

i18n: getThemeName(englishName, lang) for Dutch theme names

Files:

  • apps/web/src/routes/(app)/themes/+page.svelte + +page.server.ts — list
  • apps/web/src/routes/(app)/themes/[id]/+page.svelte + +page.server.ts — detail
  • apps/web/src/lib/server/queries/themes.ts — queries

Status

Current: DONE Milestone: v3 Priority: High — unique topical study feature

History:

  • 13 Jesus themes manually curated with verse tagging
  • Verse-theme associations stored in verse_themes table
  • Collapsible book sections added for UX when themes have many verses

Dependencies:

  • Requires: themes data (DONE), verse database (DONE), Jesus speech data (DONE)
  • Used by: Teachings hub (DONE)

Screenshots

Feature screenshot
← Back to Themes & Parables features