Create minimal Alpine.js integration for foliate-js reader. This file
serves as the entry point that imports foliate-js and provides basic
navigation controls.
Implementation:
1. Import foliate-js/view.js:
- Registers <foliate-view> custom element globally
- Makes foliate reader functional when element is added to DOM
- No explicit EPUB imports needed (foliate detects format automatically)
2. Alpine.js integration:
- Create readerShell data object for UI state management
- Provide nextPage() and previousPage() methods for button controls
- Methods access <foliate-view> custom element's API (next(), prev())
- Simple, functional approach (no OOP, follows project guidelines)
3. Init placeholder:
- initReader() method for future initialization logic
- Currently just logs for debugging
- Will be extended with theme switching, progress sync, etc.
Design Choices:
- Follow project guidelines: No classes, functional/procedural style
- Use Alpine.js for UI state (consistent with rest of application)
- Defer book loading to foliate's internal format detection
- Minimal footprint: Only what's needed to make <foliate-view> work
Next Steps (Future Commits):
- Theme switching logic (apply CSS custom properties)
- Progress sync to API (listen to foliate's relocate event)
- Book loading integration (open book path, handle CFI locations)
- Settings persistence (save theme, font, spacing preferences)
File: web/src/reader/reader.ts (31 lines)
- Clean separation: Foliate handles rendering, Alpine handles UI state
- Type-safe with @ts-ignore for foliate custom element API access
john-okeefe
157bf734c7