Use custom live server to handle BR url mode history

Author: cdrini

BookReaderDemo/IADemoBr.js

@@ -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 = [
@@ -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,

BookReaderDemo/demo-internetarchive.html

@@ -13,27 +13,27 @@
     <script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/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"/>
 
     <!-- IA scripts -->
     <script src="https://archive.org/bookreader/BookReaderJSIA.js"></script>
@@ -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>

index.html

@@ -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>

package.json

@@ -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",
     "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",

scripts/live-server.js

@@ -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\/([^/?]+)/);
+    if (detailsMatch) {
+      const newUrl = `/BookReaderDemo/demo-internetarchive.html`;
+      console.log(`Rewriting ${req.url} to ${newUrl}`);
+      req.url = newUrl;
+    }
+
+    next();
+  }],
+});