Skip to content

Replace epub.js with foliate-js for EPUB rendering#5

Merged
gvonness-apolitical merged 20 commits intofeat/initial-implementationfrom
fix/epub-pagination-foliate-js
Feb 1, 2026
Merged

Replace epub.js with foliate-js for EPUB rendering#5
gvonness-apolitical merged 20 commits intofeat/initial-implementationfrom
fix/epub-pagination-foliate-js

Conversation

@gvonness-apolitical
Copy link
Copy Markdown
Collaborator

Summary

  • Switch from epub.js to foliate-js library for better CSS column-based pagination
  • Use foliate-js native navigation instead of fraction-based PageController
  • Add debounced relocate event handling to prevent UI flickering from multiple events
  • Fix dev server to serve sample files with correct MIME types

Changes

  • src/readers/epub-reader.ts: Complete rewrite to use foliate-js View component with native prev/next navigation
  • src/types/foliate-js.d.ts: New TypeScript declarations for foliate-js
  • vite.dev.config.ts: Fix sample file serving with proper content-type headers
  • src/readers/cbz-reader.ts: Minor lint fix (while loop condition)
  • package.json: Replace epubjs with foliate-js dependency

Test plan

  • Load sample EPUB and verify content displays correctly
  • Navigate forward/backward and verify no content is cut off
  • Verify page numbers update correctly
  • Test keyboard navigation (arrow keys)
  • Verify PDF and CBZ still work correctly

This commit introduces the complete MVP for Speed-Read, a lightweight
embeddable document reader for EPUB, PDF, and CBZ files.

Key features:
- Core validation layer (file size, magic bytes, DRM detection)
- Format-specific readers (EPUB via epub.js, PDF via pdf.js, CBZ via native ZIP)
- Unified page controller with keyboard and touch navigation
- Web Component <speed-reader> using Lit
- React <Reader /> component
- Manifest support for episodic/serial content
- CSS custom properties for theming
- CI/CD workflows (CI, release, docs)
- Comprehensive documentation and demo site

Tested with 32 unit tests covering validation and navigation.
…mo (#3)

- Add sample test files (EPUB, PDF, CBZ) for manual testing
- Add comprehensive troubleshooting guide with CORS solutions
- Update demo page with sample file buttons and better UX
- Link troubleshooting from getting-started docs
npm rejected "speed-read" as too similar to existing "speedread".
Updated all documentation and CDN references to use the scoped name.
- Update all repository URLs and links
- Update GitHub Pages URL
- Update CODEOWNERS
- Switch release workflow to npm Trusted Publishing (OIDC)
- Add sample files to docs build output
- Fix sample URLs to work with base path
- Add vite.dev.config.ts for local development with samples
- Update roadmap with completed items
Previous sample.pdf was returning HTML from source. Replaced with
Mozilla pdf.js test file which is properly licensed (Apache 2.0).
The cdnjs CDN doesn't have pdfjs-dist v4.0.379. Switch to jsdelivr
which serves npm packages directly and has the correct version.
- Change reader-content overflow from hidden to auto for scrolling
- Center content in reader container
- Fix PDF scaling to fit both width and height
- Improve CBZ decompression with better error handling
Workflows:
- Update all workflows to use self-hosted runners

EPUB reader:
- Use explicit pixel dimensions for epub.js rendering

CBZ reader:
- Rewrite ZIP parser to use Central Directory for robustness
- Handles data descriptors and various ZIP formats correctly

Component:
- Change overflow from hidden to auto for scrolling
- Center content in reader container
- Create absolute-positioned container for epub.js
- Remove flexbox centering that interfered with epub.js iframe
- Add min-height: 0 for proper flex child sizing
- Use requestAnimationFrame to ensure layout is complete before measuring
- Set explicit pixel dimensions on epub container
- Remove continuous manager, use default for proper pagination
- Use "100%" width string as in epub.js examples
- Add padding to body via themes.default
- Use position: relative on container
- Switch from epub.js to foliate-js library for better pagination support
- Use foliate-js native CSS column-based navigation instead of
  fraction-based PageController navigation
- Add custom keyboard navigation for EPUB that directly uses foliate-js
- Add debounced relocate event handling to prevent UI flickering
- Fix sample file serving with correct MIME types in dev server
- Fix CBZ reader lint error (while loop condition)
- Add TypeScript declarations for foliate-js

This fixes the issue where EPUB content was getting cut off at page
boundaries and navigation was skipping pages incorrectly.
@gvonness-apolitical gvonness-apolitical force-pushed the fix/epub-pagination-foliate-js branch from 95be2a8 to fdfd1ce Compare February 1, 2026 19:34
@gvonness-apolitical gvonness-apolitical merged commit 192ce18 into feat/initial-implementation Feb 1, 2026
@gvonness-apolitical gvonness-apolitical deleted the fix/epub-pagination-foliate-js branch February 1, 2026 20:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant