Use custom live server to handle BR url mode history#1509
Use custom live server to handle BR url mode history#1509cdrini wants to merge 2 commits intointernetarchive:masterfrom
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1509 +/- ##
=======================================
Coverage 69.70% 69.70%
=======================================
Files 65 65
Lines 5373 5373
Branches 1182 1182
=======================================
Hits 3745 3745
Misses 1594 1594
Partials 34 34 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds support for URL history mode in BookReader demos by implementing a custom live-server with middleware that rewrites /details/<identifier> URLs to the demo page. This allows testing the Internet Archive's URL pattern (/details/<ocaid>/page/3) locally.
Changes:
- Added custom live-server script with middleware to rewrite
/details/<identifier>requests - Updated
serve-livenpm script to use the custom server - Modified
demo-internetarchive.htmlto use absolute paths and added logic to detect details page URLs - Added new demo link in index.html showcasing the history URL mode
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/live-server.js | New middleware-based live server that rewrites /details/ URLs to demo page |
| package.json | Updated serve-live script to use custom server |
| index.html | Added demo link for history mode and removed obsolete comments |
| BookReaderDemo/demo-internetarchive.html | Changed to absolute paths for compatibility with URL rewriting |
| BookReaderDemo/IADemoBr.js | Added logic to detect details URLs, extract ocaid, rewrite links, and configure history mode |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| console.log(`${req.method} ${req.url}`); | ||
|
|
||
| // Handle /details/<identifier> requests | ||
| const detailsMatch = req.url.match(/^\/details\/([^/?]+)/); |
There was a problem hiding this comment.
The regex pattern /^\/details\/([^/?]+)/ captures the identifier but doesn't use the captured group. While the code correctly rewrites to the demo page (which will extract the identifier from the path), consider removing the capturing group if it's not being used, or store it for potential future use or logging.
| const detailsMatch = req.url.match(/^\/details\/([^/?]+)/); | |
| const detailsMatch = req.url.match(/^\/details\/[^/?]+/); |
| <script src="/BookReader/webcomponents-bundle.js"></script> | ||
| <script src="/BookReader/jquery-3.js"></script> | ||
|
|
||
| <!-- Bookreader --> | ||
| <script src="../BookReader/BookReader.js"></script> | ||
| <link rel="stylesheet" href="../BookReader/BookReader.css"/> | ||
| <script src="/BookReader/BookReader.js"></script> | ||
| <link rel="stylesheet" href="/BookReader/BookReader.css"/> | ||
|
|
||
| <!-- plugins needed for archive.org, in same order as archive.org --> | ||
| <script src="../BookReader/plugins/plugin.search.js"></script> | ||
| <script src="../BookReader/plugins/plugin.chapters.js"></script> | ||
| <script src="../BookReader/plugins/plugin.tts.js"></script> | ||
| <script src="../BookReader/plugins/plugin.url.js"></script> | ||
| <script src="../BookReader/plugins/plugin.autoplay.js"></script> | ||
| <script src="../BookReader/plugins/plugin.resume.js"></script> | ||
| <script src="../BookReader/plugins/plugin.archive_analytics.js"></script> | ||
| <script src="../BookReader/plugins/plugin.text_selection.js"></script> | ||
| <script src="../BookReader/plugins/plugin.experiments.js"></script> | ||
| <script src="/BookReader/plugins/plugin.search.js"></script> | ||
| <script src="/BookReader/plugins/plugin.chapters.js"></script> | ||
| <script src="/BookReader/plugins/plugin.tts.js"></script> | ||
| <script src="/BookReader/plugins/plugin.url.js"></script> | ||
| <script src="/BookReader/plugins/plugin.autoplay.js"></script> | ||
| <script src="/BookReader/plugins/plugin.resume.js"></script> | ||
| <script src="/BookReader/plugins/plugin.archive_analytics.js"></script> | ||
| <script src="/BookReader/plugins/plugin.text_selection.js"></script> | ||
| <script src="/BookReader/plugins/plugin.experiments.js"></script> | ||
|
|
||
| <script type="module" src="../BookReader/ia-bookreader-bundle.js"></script> | ||
| <script type="module" src="/BookReader/ia-bookreader-bundle.js"></script> | ||
|
|
||
| <link rel="stylesheet" href="BookReaderDemo.css"/> | ||
| <link rel="stylesheet" href="/BookReaderDemo/BookReaderDemo.css"/> |
There was a problem hiding this comment.
Changing from relative paths (../BookReader) to absolute paths (/BookReader) creates a deviation from all other demo files and makes this demo only work when served from the root path through the live-server middleware. If someone tries to access this file directly via file:// protocol or from a different path, the absolute paths will fail. Consider documenting this requirement or maintaining relative paths and handling path resolution differently.
| "lint:fix": "npx eslint --fix src/ tests/ *.js *.cjs", | ||
| "serve": "npx http-server . --port=8000", | ||
| "serve-live": "npx live-server . --cors --port=8000 --watch=index.html,BookReader,BookReaderDemo", | ||
| "serve-live": "node scripts/live-server.js", |
There was a problem hiding this comment.
The e2e test helper in tests/e2e/helpers/params.js uses logic to determine whether to use /details/ URLs (for archive.org) or /BookReaderDemo/demo-internetarchive.html URLs (for demos). With this PR adding support for /details/ URLs in the demo environment, consider updating the test helper to support this new route when testing locally, or documenting that tests should continue to use the query parameter approach.
2 participants
Adds a new demo option for url mode history, with support for things like
/details/<ocaid>/page/3. You just start thenpm run serve-devserver as usual, and select the demo for url mode history. Note this will work locally and on netlify, eg https://deploy-preview-1509--ia-bookreader.netlify.app/details/adventureofsherl0000unse/mode/2up?q=sleep