Skip to content

Use custom live server to handle BR url mode history #1509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cdrini wants to merge 2 commits into
base: master
Choose a base branch
from
+66 −29
Open

Use custom live server to handle BR url mode history #1509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40c3089
Use custom live server to handle BR url mode history
cdrini Feb 4, 2026
16131c0
Add /details testing support to netlify
cdrini Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 21 additions & 9 deletions BookReaderDemo/IADemoBr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,24 @@ function getFromUrl(name, def) {
}
}

const ocaid = urlParams.get('ocaid');
const isDetailsPage = window.location.pathname.startsWith('/details/');
const ocaid = isDetailsPage ? window.location.pathname.split('/')[2] : urlParams.get('ocaid');
const openFullImmersionTheater = urlParams.get('view') === 'theater';
const ui = urlParams.get('ui');
const searchTerm = urlParams.get('q');

if (isDetailsPage) {
/** @type {NodeListOf<HTMLAnchorElement>} */
const links = document.querySelectorAll(`a[href^="/BookReaderDemo/demo-internetarchive.html"]`);
links.forEach(anchor => {
const url = new URL(anchor.href);
const anchorOcaid = url.searchParams.get('ocaid');
url.searchParams.delete('ocaid');
const paramsString = url.searchParams.toString();
anchor.href = `/details/${anchorOcaid}` + (paramsString ? '?' + paramsString : '');
});
}

const iaBookReader = document.querySelector('ia-bookreader');

const downloadListWithLCP = [
Expand Down Expand Up @@ -48,14 +61,13 @@ const initializeBookReader = (brManifest) => {
const options = {
el: '#BookReader',
/* Url plugin - IA uses History mode for URL */
// commenting these out as demo uses hash mode
// keeping them here for reference
// urlHistoryBasePath: `/details/{$ocaid}/`,
// resumeCookiePath: `/details/{$ocaid}/`,
// urlMode: 'history',
// Only reflect these params onto the URL
// urlTrackedParams: ['page', 'search', 'mode'],
/* End url plugin */
...(isDetailsPage ? {
urlHistoryBasePath: `/details/${ocaid}/`,
urlMode: 'history',
resumeCookiePath: `/details/${ocaid}/`,
// Only reflect these params onto the URL
urlTrackedParams: ['page', 'search', 'mode'],
} : {}),
enableBookTitleLink: false,
bookUri: `https://archive.org/details/${ocaid}`,
bookUrlText: null,
Expand Down
32 changes: 16 additions & 16 deletions BookReaderDemo/demo-internetarchive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,27 @@
<script type="text/javascript" src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>

<!-- JS dependencies -->
<script src="../BookReader/webcomponents-bundle.js"></script>
<script src="../BookReader/jquery-3.js"></script>
<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"/>
Comment on lines +16 to +36
Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

<!-- IA scripts -->
<script src="https://archive.org/bookreader/BookReaderJSIA.js"></script>
Expand Down Expand Up @@ -272,6 +272,6 @@ <h3>Placeholder div to allow scrolling</h3>
</script>

<!-- IA fetch demo -->
<script type="module" src="IADemoBr.js"></script>
<script type="module" src="/BookReaderDemo/IADemoBr.js"></script>
</body>
</html>
4 changes: 1 addition & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,13 @@
<li><a href="BookReaderDemo/demo-preview-pages.html">Preview Pages</a></li>
<li><a href="BookReaderDemo/demo-embed.html">Embed</a></li>
<li><a href="BookReaderDemo/demo-multiple.html">Multiple on same page</a></li>
<!-- plugin.search.js -->
<li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=theworksofplato01platiala">From Internet Archive</a></li>
<!-- plugin.search.js -->
<li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=adventureofsherl0000unse">From Internet Archive - a book with CHAPTERS</a></li>
<li><a href="/details/adventureofsherl0000unse">From Internet Archive - with url mode: history</a></li>
<li><a href="BookReaderDemo/demo-iiif.html">IIIF</a></li>
<li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=goodytwoshoes00newyiala&autoflip=1">Autoplay (kiosk mode)</a></li>
<li><a href="BookReaderDemo/demo-plugin-menu-toggle.html">Plugin: Full screen menu toggle</a></li>
<li><a href="BookReaderDemo/immersion-mode.html">Start in immersion (fullscreen) mode</a></li>
<!-- plugin.search.js -->
<li><a href="BookReaderDemo/immersion-1up.html">Start in immersion mode on 1up default item</a></li>
<li><a href="BookReaderDemo/viewmode-cycle.html">Replace view mode buttons with view mode cycler</a></li>
</ul>
Expand Down
6 changes: 6 additions & 0 deletions netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
# Keep in sync with CI in .github/workflows/node.js.yml
NODE_VERSION = "24"

[[redirects]]
from = "/details/*"
to = "/BookReaderDemo/demo-internetarchive.html"
status = 200
force = true

[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/BookReader/*"
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
"lint": "npx eslint src/ tests/ *.js *.cjs",
"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",
Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
"serve-dev": "env NODE_ENV='development' npm run build-css && env NODE_ENV='development' npx concurrently --kill-others npm:serve-live npm:build-*:watch",
"test": "npx jest --coverage --colors",
"test:watch": "npx jest --watch",
Expand Down
21 changes: 21 additions & 0 deletions scripts/live-server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import liveServer from 'live-server';

liveServer.start({
root: '.',
port: 8000,
watch: ['index.html', 'BookReader', 'BookReaderDemo'],
cors: true,
middleware: [function (req, res, next) {
console.log(`${req.method} ${req.url}`);

// Handle /details/<identifier> requests
const detailsMatch = req.url.match(/^\/details\/([^/?]+)/);
Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
const detailsMatch = req.url.match(/^\/details\/([^/?]+)/);
const detailsMatch = req.url.match(/^\/details\/[^/?]+/);

Copilot uses AI. Check for mistakes.
if (detailsMatch) {
const newUrl = `/BookReaderDemo/demo-internetarchive.html`;
console.log(`Rewriting ${req.url} to ${newUrl}`);
req.url = newUrl;
}

next();
}],
});