Integrate experimental in-browser search #1165

@sabine
Integrate experimental in-browser search #1165
fa8f8e4

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

@@ -45,7 +45,7 @@ let render
           <%s! Packages_autocomplete_fragment.form_attributes %>
           action="/packages/search" method="GET">
           <div class="header__search relative flex items-center justify-center">
-            <input type="search" name="q" class="header__search__input focus:border-gray-800 text-gray-800 border-primary-600 h-10 rounded-l-md appearance-none px-4 py-1 lg:w-56 xl:w-80"
+            <input @keydown.stop type="search" name="q" class="header__search__input focus:border-gray-800 text-gray-800 border-primary-600 h-10 rounded-l-md appearance-none px-4 py-1 lg:w-56 xl:w-80"
               autocomplete="off"
               placeholder="Search OCaml Packages"
               <%s! Packages_autocomplete_fragment.input_attributes ~target_sel:"#header-search-results" ~indicator_sel:"#header-search-indicator" %>

src/ocamlorg_frontend/components/header.eml

@@ -0,0 +1,120 @@
+#in-package-search-results ol {
+  @apply m-0 p-0 list-none text-sm;
+}
+
+#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 li:first-child .search-entry {
+  @apply pt-2;
+}
+
+#in-package-search-results li:last-child .search-entry {
+  @apply pb-2;
+}
+
+#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;
+}
+
+@media (min-width: 40em) {
+  #in-package-search-results .search-entry:not(.active):not(.open) .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";