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 <foliate-view> custom element - Replace <main id="reader-content"> with <foliate-view id="reader-view"> - 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 <optgroup> - 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
This commit is contained in:
+38
-3
@@ -11,6 +11,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
|
||||
<title>{ metadata.Title } - Bookhoard Reader</title>
|
||||
<link rel="manifest" href="/static/manifest.json"/>
|
||||
<link href="/static/reader-fonts.css" rel="stylesheet"/>
|
||||
<link href="/static/foliate-themes.css" rel="stylesheet"/>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script type="module" src="/static/reader.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
@@ -45,9 +46,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main id="reader-content" tabindex="0" class="ebook-content w-full h-full">
|
||||
<!-- Content loaded by JavaScript based on media type -->
|
||||
</main>
|
||||
<foliate-view id="reader-view"></foliate-view>
|
||||
@DictionaryPopup()
|
||||
</body>
|
||||
</html>
|
||||
@@ -135,6 +134,42 @@ templ ReaderSettingsPanel() {
|
||||
</label>
|
||||
</div>
|
||||
<!-- Typography (ebooks only) -->
|
||||
<div class="mb-6" data-visible-for="ebook">
|
||||
<h3 class="font-semibold mb-2">Reading Theme</h3>
|
||||
<label class="block mb-2">
|
||||
<select name="reading_theme" class="w-full mt-1 px-3 py-2 rounded border">
|
||||
<optgroup label="📖 Classic Reading">
|
||||
<option value="light">Light</option>
|
||||
<option value="paper">Paper</option>
|
||||
<option value="sepia">Sepia</option>
|
||||
<option value="parchment">Parchment</option>
|
||||
<option value="warm">Warm</option>
|
||||
<option value="candlelight">Candlelight</option>
|
||||
</optgroup>
|
||||
<optgroup label="🌤️ Sky & Atmosphere">
|
||||
<option value="azure">Azure</option>
|
||||
<option value="sky">Sky</option>
|
||||
<option value="arctic">Arctic</option>
|
||||
<option value="frost">Frost</option>
|
||||
</optgroup>
|
||||
<optgroup label="🌅 Sunset & Warmth">
|
||||
<option value="dusk">Dusk</option>
|
||||
<option value="sunset">Sunset</option>
|
||||
<option value="twilight">Twilight</option>
|
||||
</optgroup>
|
||||
<optgroup label="🌲 Nature & Earth">
|
||||
<option value="forest">Forest</option>
|
||||
<option value="moss">Moss</option>
|
||||
<option value="slate">Slate</option>
|
||||
</optgroup>
|
||||
<optgroup label="⚡ High Performance">
|
||||
<option value="oled">OLED</option>
|
||||
<option value="solarized">Solarized</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<p class="text-xs mt-1" style="color: var(--text-secondary)">18 themes organized by category</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-6" data-visible-for="ebook">
|
||||
<h3 class="font-semibold mb-2">Typography</h3>
|
||||
<label class="block mb-2">
|
||||
|
||||
Reference in New Issue
Block a user