"Improved UI look"

docs/todo

@@ -1,4 +1,3 @@
-- Improve search page look
 - search improvements
   - implement trigram index
   - use different min score options for different sources (noticed URL not match meghan highlight for hello mag even tho query got megan and did match and highlight queen in url)

public/index.html

@@ -2,28 +2,34 @@
 <meta charset=utf-8>
 <title>Your HTML Library</title>
 <link rel=stylesheet href=/style.css>
-<h1><a href=/>22120</a></h1>
-<h2>Internet Offline Library</h2>
+<header>
+  <h1><a href=/>22120</a> &mdash; Internet Offline Library</h1>
+</header>
 <p>
   View <a href=/archive_index.html>the index</a>
 </p>
 <form method=GET action=/search>
-  <fieldset>
+  <fieldset class=search>
     <legend>Search your archive</legend>
-    <input type=search name=query placeholder="search your library">
+    <input class=search type=search name=query placeholder="search your library">
     <button>Search</button>
   </fieldset>
 </form>
 <form method=POST action=/mode>
   <fieldset>
     <legend>Save or Serve: Mode Control</legend>
+    <p>
+      Control whether pages you browse are <label class=cmd for=save>saved to</label>, or 
+      <label class=cmd for=serve>served from</label> your archive
+      <br>
+      <small><em class=caps>Pro-Tip:</em> Serve pages when you're offline, and it will still feel like you're online</small>
     <p>
       <label>
-        <input type=radio name=mode value=save>
+        <input type=radio name=mode value=save id=save>
         Save
       </label>
       <label>
-        <input type=radio name=mode value=serve>
+        <input type=radio name=mode value=serve id=serve>
         Serve
       </label>
       <output name=notification>

public/style.css

@@ -5,18 +5,45 @@
   }
   body {
     display: table;
-    margin: 0 auto;
-    background: silver;
+    margin: 0 auto 0 min(10%, 5em);
+    background: white;
     padding: 0.5em;
-    box-shadow: 0 1px 1px purple;
+    border-bottom: 1px solid purple;
+    max-width: min(777px, 80%);
+  }
+  header {
+    font-size: smaller;
+    margin-bottom: 3em;  
   }
   form {
+    margin-bottom: 2em;
+  }
+  label.cmd {
+    border-bottom: thin solid dodgerblue;
+    cursor: default;
+    font-style: italic;
+  }
+  em.caps {
+    font-style: normal;
+    font-variant: small-caps;
+  }
+  :is(form:hover, form:active) em.caps {
+    background: yellow;
+  }
+
+  legend {
+    font-weight: 600;
   }
   fieldset {
-    border: thin solid purple;
+    border: thin solid transparent;
+  }
+  fieldset.search {
+    display: flex;
   }
   button, input, output {
   }
+  button {
+  }
   input.long {
     width: 100%;
     min-width: 250px;
@@ -34,3 +61,14 @@
   small.url {
     word-break: break-all;
   }
+  input.search {
+    flex-grow: 1;
+    padding: 0.25em 0.5em;
+  }
+  input.search, 
+  input.search + button {
+    font-size: 1em;
+  }
+  ol {
+    list-style-type: none;
+  }

src/archivist.js

@@ -670,7 +670,7 @@ export default Archivist;
   }
 
   function getContentSig(doc) { 
-    return doc.title + ' ' + doc.content + ' ' + getURI(doc.url);
+    return doc.title + ' ' + doc.title + ' ' + doc.content + ' ' + getURI(doc.url);
   }
 
   function getURI(url) {
@@ -957,6 +957,7 @@ export default Archivist;
   }
 
   function combineResults({flex,ndx,fuzz}) {
+    const DEBUG = true;
     DEBUG && console.log({flex,ndx,fuzz});
     const score = {};
     flex.forEach(countRank(score));
@@ -1059,9 +1060,7 @@ export default Archivist;
     const index = NDX(fields.length);
     // `fieldAccessors` is an array with functions that used to retrieve data from different fields. 
     const fieldAccessors = fields.map(f => doc => doc[f.name]);
-    // `fieldBoostFactors` is an array of boost factors for each field, in this example all fields will have
-    // identical factors.
-    const fieldBoostFactors = fields.map(() => 1);
+    const fieldBoostFactors = fields.map(f => f.boost);
     
     retVal = {
       index,
@@ -1157,15 +1156,15 @@ export default Archivist;
       /* old format (for newer ndx >= v1 ) */
       return [
         /* we index over the special indexable url field, not the regular url field */
-        { name: "i_url" }, 
-        { name: "title" },
-        { name: "content" },
+        { name: "title", boost: 1.3 },
+        { name: "i_url", boost: 1.15 }, 
+        { name: "content", boost: 1.0 },
       ];
     } else {
       /* new format (for older ndx ~ v0.4 ) */
       return [
-        "i_url",
         "title",
+        "i_url",
         "content"
       ];
     }

src/libraryServer.js

@@ -131,13 +131,13 @@ function IndexView(urls) {
     <meta charset=utf-8>
     <title>Your HTML Library</title>
     <link rel=stylesheet href=/style.css>
-    <h1><a href=/>22120</a></h1>
-    <h2>Internet Offline Library</h2>
-    <h2>Archive Index</h2>
+    <header>
+      <h1><a href=/>22120</a> &mdash; Archive Index</h1>
+    </header>
     <form method=GET action=/search>
-      <fieldset>
+      <fieldset class=search>
         <legend>Search your archive</legend>
-        <input type=search name=query placeholder="search your library">
+        <input class=search type=search name=query placeholder="search your library">
         <button>Search</button>
       </fieldset>
     </form>
@@ -159,13 +159,16 @@ function SearchResultView({results, query, HL}) {
     <meta charset=utf-8>
     <title>${query} - 22120 search results</title>
     <link rel=stylesheet href=/style.css>
-    <h1><a href=/>22120</a></h1>
-    <h2>Search results</h2>
-    Or view <a href=/archive_index.html>your index</a>.
+    <header>
+      <h1><a href=/>22120</a> &mdash; Search Results</h1>
+    </header>
+    <p>
+    View <a href=/archive_index.html>your index</a>, or
+    </p>
     <form method=GET action=/search>
-      <fieldset>
+      <fieldset class=search>
         <legend>Search again</legend>
-        <input type=search name=query placeholder="search your library" value="${query}">
+        <input class=search type=search name=query placeholder="search your library" value="${query}">
         <button>Search</button>
       </fieldset>
     </form>