Integrate experimental in-browser search #1165

@sabine fix scrolling to element on current page 6476d5d

Author: sabine

LICENSE-3RD-PARTY

@@ -112,6 +112,14 @@ URL:       https://swiperjs.com/
 License:   MIT License
 Copyright: Copyright 2014-2021 Vladimir Kharlampidi
 
+asset/vendors/minisearch.min.js:
+
+Name:      Minisearch
+Version:   6.0.1
+URL:       https://github.com/lucaong/minisearch
+License:   MIT License
+Copyright: Copyright 2022 Luca Ongaro
+
 --------------------------------------------------------------------------
 Licenses
 --------------------------------------------------------------------------

asset/vendors/minisearch.min.js

@@ -12,6 +12,8 @@ module Package : sig
 
   val file :
     ?hash:string -> ?version:string -> filepath:string -> string -> string
+
+  val search_index : ?version:string -> digest:string -> string -> string
 end = struct
   let with_hash = Option.fold ~none:"/p" ~some:(( ^ ) "/u/")
   let with_version = Option.fold ~none:"/latest" ~some:(( ^ ) "/")
@@ -25,6 +27,7 @@ end = struct
     base ?hash ?version ("/doc/" ^ page)
 
   let file ?hash ?version ~filepath = base ?hash ?version ("/" ^ filepath)
+  let search_index ?version ~digest = base ?version ("/search-index/" ^ digest)
 end
 
 let sitemap = "/sitemap.xml"

src/global/url.ml

@@ -0,0 +1,109 @@
+#in-package-search-results ol {
+  @apply m-0 p-0 list-none;
+}
+
+#in-package-search-results li {
+  @apply m-0 p-0 border-b;
+}
+
+#in-package-search-results br {
+  @apply hidden;
+}
+
+#in-package-search-results .search-entry {
+  @apply px-4 py-1 font-normal text-body-600 flex flex-col;
+  --entry-color: gray;
+}
+
+#in-package-search-results .search-entry:hover {
+  text-decoration: none;
+  background: #f4f4f4;
+}
+
+@media (min-width: 64em) {
+  #in-package-search-results .search-entry {
+    @apply flex-row;
+  }
+
+  #in-package-search-results .search-entry .entry-title {
+    @apply shrink-0 w-1/2;
+  }
+}
+
+#in-package-search-results .search-entry .entry-kind {
+  @apply py-0.5 px-1 bg-body-600 text-white rounded mr-2 text-sm;
+}
+
+#in-package-search-results .search-entry .entry-kind {
+    background: var(--entry-color);
+}
+
+#in-package-search-results .search-entry.mod {
+  --entry-color: rgb(204, 78, 12);
+}
+
+#in-package-search-results .search-entry.mty {
+  --entry-color: #027491;
+}
+
+#in-package-search-results .search-entry.mtd {
+  --entry-color: #327d8e;
+}
+
+#in-package-search-results .search-entry.typ {
+  --entry-color: rgb(42, 84, 183);
+}
+
+#in-package-search-results .search-entry.val {
+  --entry-color: green;
+}
+
+#in-package-search-results .search-entry.par {
+  --entry-color: green;
+}
+
+#in-package-search-results .search-entry.cls {
+  --entry-color: rgb(163, 34, 34);
+}
+
+#in-package-search-results .search-entry.cty {
+  --entry-color: rgb(32, 68, 165);
+}
+
+#in-package-search-results .search-entry.exc {
+  --entry-color: #370c62;
+}
+
+#in-package-search-results .search-entry.man {
+  --entry-color: #47424b;
+}
+
+#in-package-search-results .search-entry .entry-title {
+  overflow-wrap: anywhere;
+}
+
+#in-package-search-results .search-entry .entry-name {
+  @apply font-bold;
+  color: var(--entry-color);
+}
+
+#in-package-search-results .search-entry .prefix-name {
+  @apply font-semibold;
+}
+
+#in-package-search-results .search-entry .entry-comment {
+  @apply whitespace-nowrap overflow-hidden text-ellipsis;
+}
+
+#in-package-search-results .active {
+  @apply bg-primary-100;
+}
+
+
+#in-package-search #in-package-search-results {
+  @apply hidden;
+}
+
+#in-package-search:focus-within #in-package-search-results {
+  @apply block;
+}

src/ocamlorg_frontend/css/partials/in_package_search.css

@@ -6,6 +6,7 @@
 @import "./partials/cards.css";
 @import "./partials/forms.css";
 @import "./partials/grid_logos.css";
+@import "./partials/in_package_search.css";
 @import "./partials/search.css";
 @import "./partials/package_breadcrumbs.css";
 @import "./partials/shadows.css";

src/ocamlorg_frontend/css/styles.css

@@ -8,6 +8,7 @@ let render
 ?page
 ~(package : Package.package)
 ~(documentation_status: Package.documentation_status)
+~(search_index_digest: string option)
 ~left_sidebar_html
 ~right_sidebar_html
 inner =
@@ -60,13 +61,21 @@ Layout.render
             </li>
           </ol>
 
-          <div title="Sorry, in-package search is not yet implemented, but this is where it's going to appear." class="flex w-full items-center">
-            <input disabled type="search" name="q" class="focus:border-gray-800 text-gray-800 bg-gray-300 border-gray-300 h-10 rounded-l-md appearance-none px-4 flex-grow"
-              autocomplete="off"
-              placeholder="Sorry, in-package search is not yet implemented, but this is where it's going to appear :-)">
-            <button disabled aria-label="search" class="h-10 rounded-r-md bg-gray-300 text-gray-800 flex items-center justify-center px-4">
-              <%s! Icons.magnifying_glass "w-6 h-6" %>
-            </button>
+          <div id="in-package-search" class="relative w-full">
+            <div class="flex w-full items-center">
+              <% if Option.is_some search_index_digest then (%>
+              <input id="in-package-search-input" type="search" name="q" class="focus:border-gray-800 text-gray-800 border-primary-600 h-10 rounded-l-md appearance-none px-4 flex-grow"
+                autocomplete="off"
+                placeholder="Search names in this package..."
+                >
+              <div aria-hidden="true" class="h-10 rounded-r-md bg-primary-600 text-white flex items-center justify-center px-4">
+                <%s! Icons.magnifying_glass "w-6 h-6" %>
+              </div>
+              <% ); %>
+            </div>
+
+            <div id="in-package-search-results" class="absolute top-12 right-0 left-0 bg-white z-20 w-full max-h-[60vh] overflow-y-auto border rounded-lg shadow-xl">
+            </div>
           </div>
         </div>
 
@@ -78,6 +87,7 @@ Layout.render
             x-transition:leave-end="-translate-x-full">
             <%s! left_sidebar_html %>
           </div>
+
           <div class="flex-1 z-0 z- min-w-0 pt-6 pb-12 md:pb-[70vh]">
             <%s! inner %>
           </div>
@@ -91,4 +101,178 @@ Layout.render
     </div>
   </div>
 </div>
-<%s! Toc.script %>
+<%s! Toc.script %>
+<% (match search_index_digest with | Some(digest) -> %>
+<script src="<%s Ocamlorg_static.Asset. url "vendors/minisearch.min.js" %>"></script>
+<script>
+  function Fuse() {}
+</script>
+<script>
+  {
+    let miniSearch;
+    let results = [];
+
+    function shortness_factor(r) {
+      return 1 + 2*Math.log(1 + 1/(r.prefixname.length + r.name.length));
+    }
+
+    function perform_search() {
+      let q = document.getElementById("in-package-search-input").value;
+      results = miniSearch.search(q, {
+        fields: ['name', 'prefixname', 'comment'], 
+        prefix: true,
+        boost: {
+          name: 6,
+          prefixname: 2.5,
+          comment: 0.8,
+        },
+        fuzzy: 0.15,
+      }).slice(0,50);
+      results = results.map(r => {return {...r, score: r.score * shortness_factor(r), shortness: shortness_factor(r)}}).sort((r1,r2) => r2.score - r1.score);
+      console.log("results", results);
+      let container = document.getElementById("in-package-search-results");
+      container.innerHTML = "";
+
+      let search_results = document.createElement("ol");
+
+      results.map((entry) => {
+          let kind = document.createElement("tt");
+          kind.innerText = entry.kind
+            .replace("module type", "mty").replace("root", "mod").replace("module", "mod")
+            .replace("method", "mtd").replace("class type", "cty").replace("class", "cls")
+            .replace("core type", "typ").replace("type", "typ")
+            .replace("exception", "exc").replace("core exception", "exc")
+            .replace("parameter", "par")
+            .replace("leaf page", "man").replace("page", "man");
+          kind.title = entry.kind;
+          kind.classList.add("entry-kind");
+
+          let list_item = document.createElement("li");
+          let a = document.createElement("a");
+          a.href = "/" + entry.url;
+          a.id = "search-result-"+entry.id;
+          a.classList.add("search-entry", kind.innerText.slice(0,3));
+          let title = document.createElement("div");
+          title.classList.add("entry-title");
+
+          let prefixname = document.createElement("tt");
+          prefixname.innerText = entry.prefixname.split(".").reverse().join(".") + (entry.prefixname != "" ? ".": "");
+          prefixname.classList.add("prefix-name");
+          let name = document.createElement("tt");
+          name.classList.add("entry-name");
+          name.innerText =  entry.name;
+
+          title.appendChild(kind);
+          title.appendChild(prefixname);
+          title.appendChild(name);
+
+          let comment = document.createElement("div");
+          comment.innerText = entry.comment;
+          comment.classList.add("entry-comment");
+
+          a.appendChild(title);
+          a.appendChild(comment);
+
+          a.addEventListener("click", () => scrollTo(a.href));
+
+          list_item.appendChild(a);
+
+          search_results.appendChild(list_item);
+      });
+      container.appendChild(search_results);
+
+      search_results_position = null;
+    }
+
+    function init_search() {
+      documents = documents.map((d, i) => {return {...d, id: i}});
+
+      miniSearch = new MiniSearch({
+        fields: ['name', 'prefixname', 'comment'],
+        storeFields: ['name', 'prefixname', 'kind', 'url', 'comment'],
+      });
+
+      miniSearch.addAll(documents);
+
+      document.getElementById("in-package-search-input").addEventListener("input", perform_search);
+      perform_search();
+    }
+
+    function user_interacts() {
+      let scriptTag = document.createElement("script");
+      scriptTag.src = "<%s Url.Package.search_index ?version:(Package.url_version package) package.name ~digest %>";
+      scriptTag.addEventListener("load", init_search);
+      document.body.appendChild(scriptTag);
+
+      document.getElementById("in-package-search-input").removeEventListener("focus", user_interacts);
+    }
+
+    document.getElementById("in-package-search-input").addEventListener("focus", user_interacts);
+
+
+    let search_results_position = null;
+    function adjust_position(event) {
+      if (results.length == 0) return;
+
+      if (event.key == "ArrowDown") {
+        if (search_results_position === null) {
+          search_results_position = 0;
+          return;
+        }
+        if (search_results_position < results.length - 1) {
+          search_results_position++;
+          return;
+        }
+      } else if (event.key == "ArrowUp") {
+        if (search_results_position === null) return;
+
+        if (search_results_position == 0) {
+          search_results_position = null;
+          return;
+        }
+
+        search_results_position--;
+        return;
+      }
+    }
+
+    function keydown(event) {
+      event.stopPropagation();
+      if (event.key == "Enter") {
+        if (results.length > 0) {
+          let url = "/"+results[search_results_position || 0].url;
+          console.log("going to", url);
+          window.location = url;
+
+          scrollTo(url);
+
+          document.getElementById("in-package-search-input").value = "";
+          results = [];
+          search_results_position = null;
+        }
+        return false;
+      }
+
+      if (search_results_position !== null) document.getElementById("search-result-"+results[search_results_position].id).classList.remove("active");
+      adjust_position(event);
+      if (search_results_position !== null) {
+        let el = document.getElementById("search-result-"+results[search_results_position].id);
+        el.classList.add("active");
+        el.scrollIntoView({block: "end"});
+      }
+    }
+
+    function scrollTo(url) {
+      if (url.indexOf("#") != -1) {
+        let id = url.split("#")[1]
+        let el = document.getElementById(id);
+        console.log("id el", id, el);
+        if (el) setTimeout(() => {
+          console.log("scroll"); el.scrollIntoView();}, 10);
+      }
+    }
+
+    document.getElementById("in-package-search-input").addEventListener("keydown", keydown);
+  }
+</script>
+<% | _ -> () ); %>

src/ocamlorg_frontend/layouts/package_layout.eml

@@ -351,6 +351,19 @@ let file ~kind t path =
   let url = package_url ^ path ^ ".json" in
   odoc_page ~url
 
+let search_index ~kind t =
+  let package_url =
+    package_url ~kind (Name.to_string t.name) (Version.to_string t.version)
+  in
+  let url = package_url ^ "index.js" in
+  let open Lwt.Syntax in
+  let* content = http_get url in
+  match content with
+  | Ok content -> Lwt.return (Some content)
+  | Error _ ->
+      Logs.info (fun m -> m "Failed to fetch search index at %s" url);
+      Lwt.return None
+
 let maybe_file ~kind t filename =
   let open Lwt.Syntax in
   let+ doc = file ~kind t filename in