Welcome page interoperates with iframe-based viewer

- /viewer (without any hash) dynamically redirects to the welcome page

- The book links on the welcome page point to the iframe-based viewer

static/skin/index.js

@@ -110,6 +110,9 @@
         } catch {
             downloadLink = '';
         }
+        const bookName = link.split('/').pop();
+        const viewerLink = `${root}/viewer#${bookName}`;
+
         const humanFriendlyZimSize = humanFriendlySize(zimSize);
 
         const divTag = document.createElement('div');
@@ -122,7 +125,7 @@
         const languageAttr = langCode != '' ? `title="${language}" aria-label="${language}"` : 'style="background-color: transparent"';
         divTag.innerHTML = `
             <div class="book__wrapper">
-            <a class="book__link" href="${link}" data-hover="Preview">
+            <a class="book__link" href="${viewerLink}" data-hover="Preview">
             <div class="book__link__wrapper">
             <div class="book__icon" ${faviconAttr}></div>
             <div class="book__header">
@@ -179,12 +182,12 @@
                         <div onclick="closeModal()" class="modal-close-button">
                             <div>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976
                                     0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711
                                     0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417
                                     -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834
                                     -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7
-                                    8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 
+                                    8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166
                                     14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />
                                 </svg>
                             </div>
@@ -203,7 +206,7 @@
                                 <div>Sha256 hash</div>
                             </a>
                         </div>
-                        ${magnetLink ? 
+                        ${magnetLink ?
                         `<div class="modal-regular-download">
                             <a href="${magnetLink}" target="_blank">
                                 <img src="../skin/magnet.png?KIWIXCACHEID" alt="download magnet" />
@@ -388,7 +391,7 @@
             }
         });
     }
-    
+
     function addTagElement(tagValue, resetFilter) {
         const tagElement = document.getElementsByClassName('tagFilterLabel')[0];
         tagElement.style.display = 'inline-block';
@@ -475,7 +478,7 @@
             const currentLink = window.location.search;
             const newLink = `?${params.toString()}`;
             if (currentLink != newLink) {
-                window.history.pushState({}, null, newLink);       
+                window.history.pushState({}, null, newLink);
             }
         }
         updateVisibleParams();

static/viewer.html

@@ -8,6 +8,19 @@
     <link type="text/css" href="./skin/css/autoComplete.css?KIWIXCACHEID" rel="Stylesheet" />
     <script type="text/javascript" src="./skin/viewer_taskbar.js?KIWIXCACHEID" defer></script>
     <script type="text/javascript" src="./skin/autoComplete.min.js?KIWIXCACHEID"></script>
+    <script>
+      function getRootLocation() {
+        const p = location.pathname;
+        return p.slice(0, p.length - '/viewer'.length);
+      }
+
+      const root = getRootLocation();
+      const blankPageUrl = `${root}/skin/blank.html`;
+
+      if ( location.hash == '' ) {
+        location.href = root + '/';
+      }
+    </script>
   </head>
 
   <body style="margin:0" onload="handle_visual_viewport_change()">
@@ -23,7 +36,7 @@
             <input type="checkbox" id="kiwix_button_show_toggle">
             <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?KIWIXCACHEID" alt=""></label>
             <div class="kiwix_button_cont">
-                <a id="kiwix_serve_taskbar_library_button" title="Go to welcome page" aria-label="Go to welcome page" href="#"><button>&#x1f3e0;</button></a>
+                <a id="kiwix_serve_taskbar_library_button" title="Go to welcome page" aria-label="Go to welcome page" href="./"><button>&#x1f3e0;</button></a>
               <span id="kiwix_serve_taskbar_book_ui_group">
                 <a id="kiwix_serve_taskbar_home_button"
                    title="Go to the main page of the current book"
@@ -58,14 +71,6 @@
       //
       // iframe url: the URL to be loaded in the viewer iframe.
 
-      function getRootLocation() {
-        const p = location.pathname;
-        return p.slice(0, p.length - '/viewer'.length);
-      }
-
-      const root = getRootLocation();
-      const blankPageUrl = `${root}/skin/blank.html`;
-
       function userUrl2IframeUrl(url) {
         if ( url == '' ) {
           return blankPageUrl;

test/server.cpp

@@ -187,7 +187,7 @@ R"EXPECTEDRESULT(      href="/ROOT/skin/index.css?cacheid=3b470cee"
           src: url("/ROOT/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script src="/ROOT/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=76440e7a" defer></script>
+    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=2f5a81ac" defer></script>
 )EXPECTEDRESULT"
     },
     {
@@ -204,8 +204,8 @@ R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=2608
     <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
     <script type="text/javascript" src="./skin/viewer_taskbar.js?cacheid=9d78a751" defer></script>
     <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>
-            <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>
       const blankPageUrl = `${root}/skin/blank.html`;
+            <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>
 )EXPECTEDRESULT"
     },
     {