Adds package autocomplete search to the search dropdown (#939)

* Adds package autocomplete search to the search dropdown

* factor highlight_search_terms into a component

* add interactive search to packages page

Author: sabine

src/ocamlorg_frontend/components/header.eml

@@ -44,13 +44,22 @@ let render
       <li class="relative">
         <form action="/packages/search" method="GET">
           <div class="header__search relative flex items-center justify-center">
-            <input type="search" autocomplete="off" 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" placeholder="Search OCaml Packages">
+            <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"
+              autocomplete="off"
+              placeholder="Search OCaml Packages"
+              hx-get="/packages/autocomplete"
+              hx-params="q"
+              hx-trigger="keyup changed delay:500ms, search"
+              hx-target="#search-results"
+              hx-indicator=".htmx-indicator">
             <button aria-label="search" 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 text-white" %>
             </button>
-            <div class="header__search__dropdown z-10 absolute rounded-b-md w-full top-0 mt-10 p-2 bg-white font-semibold border border-primary-600">
-              <span class="pl-2">Or go to:</span>
-              <a class="flex py-2 px-4 gap-4 hover:bg-primary-100 font-regular hover:font-semibold text-primary-600" href="<%s Url.api %>">
+            <div class="header__search__dropdown z-10 absolute rounded-b-md w-full top-0 mt-10 p-2 bg-white border border-primary-600">
+              <span class="htmx-indicator mx-2">Searching...</span>
+              <div id="search-results"></div>
+              <span class="pl-2 font-semibold">Or go to:</span>
+              <a class="flex py-2 px-4 gap-4 hover:bg-primary-100 font-semibold hover:font-semibold text-primary-600" href="<%s Url.api %>">
                 Standard Library API
                 <%s! Icons.arrow_top_right_on_square "w-6 h-6" %>
               </a>

src/ocamlorg_frontend/components/search.eml

@@ -0,0 +1,12 @@
+let highlight_search_terms
+~class_
+~search
+(text: string)
+=
+  let render_item = function 
+    | Str.Delim s -> {|<span class="|} ^ Dream.html_escape class_ ^ {|">|} ^ Dream.html_escape s ^ {|</span>|}
+    | Text s -> Dream.html_escape s
+  in
+  let r = Str.global_replace (Str.regexp "[ \t]+") "\\|" search in
+  let split = Str.full_split (Str.regexp_case_fold r) text in
+  List.fold_left (fun a b -> a ^ render_item b) "" split

src/ocamlorg_frontend/css/partials/search.css

@@ -1,14 +1,12 @@
 /* all search inputs */
 
-.header__search__input::placeholder, .package__search::placeholder {
-  @apply text-gray-500;
-}
-
-.header__search__input:focus, .package__search:focus {
+.header__search__input:focus,
+.packages_search__search__input:focus
+.packages__search__input:focus {
   box-shadow: none;
 }
 
-/* header search dropdown */
+/* search dropdown */
 
 .header__search__dropdown{
   display:none;
@@ -22,6 +20,6 @@
   border-bottom-right-radius: 0;
 }
 
-.header__search:focus-within .header__search__dropdown{
+.header__search:focus-within .header__search__dropdown {
   display:block;
 }

src/ocamlorg_frontend/dune

@@ -109,6 +109,11 @@
   (deps packages.eml)
   (action
    (run %{bin:dream_eml} %{deps} --workspace %{workspace_root})))
+ (rule
+  (targets packages_autocomplete_fragment.ml)
+  (deps packages_autocomplete_fragment.eml)
+  (action
+   (run %{bin:dream_eml} %{deps} --workspace %{workspace_root})))
  (rule
   (targets packages_search.ml)
   (deps packages_search.eml)
@@ -187,6 +192,11 @@
   (deps pagination.eml)
   (action
    (run %{bin:dream_eml} %{deps} --workspace %{workspace_root})))
+ (rule
+  (targets search.ml)
+  (deps search.eml)
+  (action
+   (run %{bin:dream_eml} %{deps} --workspace %{workspace_root})))
  (rule
   (targets toc.ml)
   (deps toc.eml)

src/ocamlorg_frontend/ocamlorg_frontend.ml

@@ -42,6 +42,9 @@ let package_documentation_not_found ~is_latest_url ~path ~package =
 let packages stats = Packages.render stats
 let packages_search ~total packages = Packages_search.render ~total packages
 
+let packages_autocomplete_fragment packages =
+  Packages_autocomplete_fragment.render packages
+
 let papers ?search ~recommended_papers papers =
   Papers.render ?search ~recommended_papers papers
 

src/ocamlorg_frontend/pages/packages.eml

@@ -10,17 +10,29 @@ Layout.render
 ~active_top_nav_item:Header.Packages @@
 <div class="intro-section-simple">
     <div class="container-fluid">
-        <div class="text-center w-full lg:w-2/3 m-auto">
-            <h1 class="font-bold mb-6">OCaml Packages</h1>
-            <p>Explore thousands of open-source OCaml packages with their documentation.</p>
+        <div class="w-full lg:w-2/3 m-auto">
+            <h1 class="font-bold text-center mb-6">OCaml Packages</h1>
+            <p class="text-center">Explore thousands of open-source OCaml packages with their documentation.</p>
             <div
                 class="flex justify-center flex-col lg:flex-row lg:space-x-6 space-y-5 lg:space-y-0 md:space-y-5 w-auto lg:w-auto mt-16">
-                <form action="/packages/search" method="GET" class="form-input">
-                    <div class="form-input__icon">
-                        <%s! Icons.magnifying_glass "h-5 w-5 text-body-400" %>
-                    </div>
-                    <input class="focus:ring-orange-500" type="search" name="q" placeholder="Search for packages">
-                    <button class="btn btn-lg btn-secondary mt-4 lg:mt-0" type="submit">Search</button>
+                <form action="/packages/search" method="GET" class="flex flex-col justify-center">
+                  <div class="packages__search relative inline-flex mx-auto items-center justify-center">
+                    <input type="search" name="q" class="packages__search__input focus:border-gray-800 text-gray-800 border-primary-600 h-10 rounded-l-md appearance-none px-4 py-1 md:w-96 lg:w-[32rem] xl:w-[32rem]"
+                      autocomplete="off"
+                      placeholder="Search OCaml Packages"
+                      hx-get="/packages/autocomplete"
+                      hx-params="q"
+                      hx-trigger="keyup changed delay:500ms, search"
+                      hx-target="#packages-search-results"
+                      hx-indicator=".htmx-indicator">
+                    <button aria-label="search" 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 text-white" %>
+                    </button>
+                  </div>
+                  <div>
+                    <span class="htmx-indicator">Searching...</span>
+                    <div id="packages-search-results"></div>
+                  </div>
                 </form>
             </div>
         </div>

src/ocamlorg_frontend/pages/packages_autocomplete_fragment.eml

@@ -0,0 +1,31 @@
+let render
+~search
+(packages : Package_intf.package list)
+=
+<div class="mx-2 mb-2">
+  <span class="font-semibold">Packages:</span>
+  <% if List.length packages = 0 then ( %>
+  <p class="break-words">
+    We didn't find a match for "<%s search %>".
+  </p>
+  <% ); %>
+
+  <ul class="flex flex-col">
+  <% packages |> List.iter (fun (package : Package_intf.package) -> %>
+    <li class="flex flex-row">
+      <a
+        href="<%s Url.package_with_version package.name %>"
+        class="flex-grow px-2 py-2 leading-6 font-semibold hover:bg-primary-100 text-primary-600 inline-block"
+      >
+        <%s! Search.highlight_search_terms ~class_:"bg-background-light-blue text-gray-800 font-normal" ~search package.name %>
+      </a>
+      <a class="justify-self-end px-2 py-2 leading-6 font-semibold hover:bg-primary-100" href="<%s Url.package_doc package.name %>">
+        docs
+      </a>
+    </li>
+  <% ); %>
+  </ul>
+  <% if List.length packages > 0 then ( %>
+  <a class="font-semibold hover:bg-primary-100 px-2 py-2 flex text-right" href="<%s Url.packages_search %>?q=<%s Dream.to_percent_encoded search %>">see more...</a>
+  <% ); %>
+</div>

src/ocamlorg_frontend/pages/packages_search.eml

@@ -1,15 +1,3 @@
-let highlight_search_terms
-~search
-(text: string)
-=
-  let render_item = function 
-    | Str.Delim s -> {|<span class="bg-background-light-blue">|} ^ Dream.html_escape s ^ {|</span>|}
-    | Text s -> Dream.html_escape s
-  in
-  let r = Str.global_replace (Str.regexp "[ \t]+") "\\|" search in
-  let split = Str.full_split (Str.regexp_case_fold r) text in
-  List.fold_left (fun a b -> a ^ render_item b) "" split
-
 let render ~total ~search (packages : Package_intf.package list) = Layout.render ~title:"OCaml Packages · Search Result"
 ~description:"Find the package you need to build your application in the thousands of available OCaml packages."
 ~canonical:(Url.packages_search ^ "?q=" ^ search)
@@ -24,7 +12,7 @@ let render ~total ~search (packages : Package_intf.package list) = Layout.render
               <input
                 type="search"
                 name="q" id="q2"
-                class="package__search w-full focus:border-gray-800 text-gray-800 border-primary-600 h-10 rounded-l-md appearance-none px-4 py-1"
+                class="packages_search__search__input w-full focus:border-gray-800 text-gray-800 border-primary-600 h-10 rounded-l-md appearance-none px-4 py-1"
                 value="<%s search %>"
                 placeholder="Search OCaml Packages">
               <button aria-label="search" class="h-10 rounded-r-md bg-primary-600 text-white flex items-center justify-center px-4">
@@ -67,14 +55,14 @@ let render ~total ~search (packages : Package_intf.package list) = Layout.render
           >
             <%s package.name %>
           </a>
-          <div><%s! highlight_search_terms ~search package.description %></div>
+          <div><%s! Search.highlight_search_terms ~class_:"bg-background-light-blue" ~search package.description %></div>
           <div class="flex flex-wrap">
             <% package.tags |> List.iter (fun (tag : string) -> %>
             <a
               href="<%s Url.packages_search %>?q=tag%3A%22<%s Dream.to_percent_encoded tag %>%22"
               class="px-2 py-1 text-body-400 font-medium bg-gray-100 rounded hover:underline mr-3 mb-2 mt-1 text-sm"
             >
-              <%s! highlight_search_terms ~search tag %>
+              <%s! Search.highlight_search_terms ~class_:"bg-background-light-blue" ~search tag %>
             </a>
             <% ); %>
           </div>
@@ -85,7 +73,7 @@ let render ~total ~search (packages : Package_intf.package list) = Layout.render
                 href="<%s Url.packages_search %>?q=author%3A%22<%s Dream.to_percent_encoded author.name %>%22"
                 class="text-sm hover:underline mr-3"
               >
-                <%s! highlight_search_terms ~search author.name %>
+                <%s! Search.highlight_search_terms ~class_:"bg-background-light-blue" ~search author.name %>
               </a>
               <% ); %>
             </div>

src/ocamlorg_frontend/url.ml

@@ -1,6 +1,7 @@
 let index = "/"
 let packages = "/packages"
 let packages_search = "/packages/search"
+let packages_autocomplete_fragment = "/packages/autocomplete"
 let with_hash = Option.fold ~none:"/p" ~some:(( ^ ) "/u/")
 let package ?hash v = with_hash hash ^ "/" ^ v
 let package_docs v = "/p/" ^ v ^ "/doc"

src/ocamlorg_package/lib/ocamlorg_package.ml

@@ -687,11 +687,11 @@ end = struct
     Float.compare s2 s1
 end
 
-let search_package ?(by_popularity = false) t pattern =
+let search_package ?(sort_by_popularity = false) t query =
   let compare =
-    Search.(if by_popularity then compare_by_popularity else compare)
+    Search.(if sort_by_popularity then compare_by_popularity else compare)
   in
-  let request = Search.to_request pattern in
+  let request = Search.to_request query in
   all_packages_latest t
   |> List.filter (Search.match_request request)
   |> List.sort (compare request)