From db4de823f36617c9d6b5d8af0494ce4740a518c3 Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Sun, 12 Apr 2026 12:09:56 -0400 Subject: [PATCH] feat: Update reader template for foliate-js integration Update reader page template to use foliate-js custom element and add theme selector UI. Template Changes: 1. Add foliate-js integration: - Load foliate-themes.css for reading theme system - Load foliate-js/view.js to register custom element - Replace
with - Foliate auto-initializes from the custom element 2. Add Reading Theme selector: - New section in settings panel (before Typography) - Single dropdown with 18 themes organized by category using - Categories: Classic Reading, Sky & Atmosphere, Sunset & Warmth, Nature & Earth, High Performance - Each theme shows descriptive name - Themes organized for easy discovery (grouped by mood/use case) 3. Remove broken references: - Remove ebook-content class (tied to broken CSS columns approach) - Clean up old reader-specific CSS class references Reader Template Structure: - Chrome (top/bottom bars): Back button, title, settings gear - Bottom bar: Progress display, TOC/bookmarks/notes buttons, panel editor (comics) - Settings panel: Chrome behavior, progress mode, reading themes, typography (fonts, spacing) - TOC panel: Table of contents navigation - Navigator panel: Page thumbnail with draggable viewport - Bookmarks panel: User bookmarks with add button - Dictionary popup: Word definition popup Template Generator: - Regenerated reader_templ.go via go generate - Syncs template changes with Go backend --- templates/reader.templ | 41 ++++++++++++++++++++++++++++++++++++--- templates/reader_templ.go | 20 +++++++++---------- 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/templates/reader.templ b/templates/reader.templ index 1b41915..5b63fc0 100644 --- a/templates/reader.templ +++ b/templates/reader.templ @@ -11,6 +11,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm { metadata.Title } - Bookhoard Reader + @@ -45,9 +46,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm -
- -
+ @DictionaryPopup() @@ -135,6 +134,42 @@ templ ReaderSettingsPanel() { +
+

Reading Theme

+ +

Typography

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -167,7 +167,7 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress) var templ_7745c5c3_Var7 string templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(metadata.Title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 64, Col: 54} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 63, Col: 54} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) if templ_7745c5c3_Err != nil { @@ -180,7 +180,7 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress) var templ_7745c5c3_Var8 string templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages)) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 78, Col: 70} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 77, Col: 70} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) if templ_7745c5c3_Err != nil { @@ -319,7 +319,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component { var templ_7745c5c3_Var13 string templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.ID) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 249, Col: 37} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 248, Col: 37} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) if templ_7745c5c3_Err != nil { @@ -332,7 +332,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component { var templ_7745c5c3_Var14 string templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 252, Col: 49} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 251, Col: 49} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14)) if templ_7745c5c3_Err != nil { @@ -345,7 +345,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component { var templ_7745c5c3_Var15 string templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Position) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 254, Col: 27} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 253, Col: 27} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15)) if templ_7745c5c3_Err != nil {