Attempt to add search functionality

inst/pkgdown/templates/head.html

@@ -1,6 +1,7 @@
     <meta charset="utf-8">
     <title>{{#site}}{{&title}}{{/site}}{{#pagetitle}}: {{&pagetitle}}{{/pagetitle}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="{{&pagetitle}}">
     <link rel="stylesheet" type="text/css" href="{{#site}}{{root}}{{/site}}assets/styles.css">
     <script src="{{#site}}{{root}}{{/site}}assets/scripts.js" type="text/javascript"></script>
     <!-- mathjax -->
@@ -20,6 +21,10 @@
     });
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
+    <!-- search -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script>
     <!-- Responsive Favicon for The Carpentries -->
     <link rel="apple-touch-icon" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="{{#site}}{{root}}{{/site}}favicon-32x32.png">

inst/pkgdown/templates/header.html

@@ -121,9 +121,7 @@
       {{#site}}{{&title}}{{/site}}
     </div>
     <div class="search-icon-sm">
-      <!-- TODO: do not show until we have search
       <i role="img" aria-label="search button" data-feather="search"></i>
-      -->
     </div>
     <div class="desktop-nav">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
@@ -180,12 +178,18 @@
       </ul>
     </div>
     <form class="d-flex col-md-2 search-form">
-      <fieldset disabled>
-      <input class="form-control me-2 searchbox" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success tablet-search-button"  type="submit">
-          <i class="search-icon" data-feather="search" role="img" aria-label="search button"></i>
-        </button>
-      </fieldset>
+      <input type="search" class="form-control me-sm-2 search" aria-label="{{#translate}}{{toggle_nav}}{{/translate}}" name="search-input" data-search-index="{{#site}}{{root}}{{/site}}search.json" id="search-input" placeholder="{{#translate}}{{search_for}}{{/translate}}" autocomplete="on">
+      <button class="btn btn-outline-success tablet-search-button"  type="submit">
+        <i class="search-icon" data-feather="search" role="img" aria-label="search button"></i>
+      </button>
+      <!-- <input class="form-control me-2 searchbox" name="search-input" id="search-input" data-search-index="{{#site}}{{root}}{{/site}}search.json" type="search" placeholder="Search" aria-label="Search"> --> 
+      <!-- <button class="btn btn-outline-success tablet-search-button" type="submit"><i class="search-icon" data-feather="search" role="img" aria-label="search button"></i></button> -->
+      <!-- <fieldset disabled> -->
+      <!-- <input class="form-control me-2 searchbox" type="search" placeholder="Search" aria-label="Search"> --> 
+      <!--   <button class="btn btn-outline-success tablet-search-button"  type="submit"> -->
+      <!--     <i class="search-icon" data-feather="search" role="img" aria-label="search button"></i> -->
+      <!--   </button> -->
+      <!-- </fieldset> -->
     </form>
   </div><!--/div.container-fluid -->
 </nav>

source/javascripts/custom/menu.js

@@ -119,6 +119,76 @@ $( document ).ready(function() {
             $("#expand-code").html("Collapse All Solutions " + feather.icons['minus'].toSvg());
         }
     });
+    /* Search --------------------------*/
+    /* Adapted from https://github.com/r-lib/pkgdown/blob/ae7363faac9040a473a54fb3d770decdfb8dfec1/inst/BS5/assets/pkgdown.js#L83-L152 */
+    // Initialise search index on focus
+    var fuse;
+    $("#search-input").focus(async function(e) {
+      if (fuse) {
+        return;
+      }
+
+      $(e.target).addClass("loading");
+      var response = await fetch($("#search-input").data("search-index"));
+      var data = await response.json();
+
+      var options = {
+        keys: ["what", "text", "code"],
+        ignoreLocation: true,
+        threshold: 0.1,
+        includeMatches: true,
+        includeScore: true,
+      };
+      fuse = new Fuse(data, options);
+
+      $(e.target).removeClass("loading");
+    });
+
+    // Use algolia autocomplete
+    var options = {
+      autoselect: true,
+      debug: true,
+      hint: false,
+      minLength: 2,
+    };
+    var q;
+    async function searchFuse(query, callback) {
+      await fuse;
+
+      var items;
+      if (!fuse) {
+        items = [];
+      } else {
+        q = query;
+        var results = fuse.search(query, { limit: 20 });
+        items = results
+          .filter((x) => x.score <= 0.75)
+          .map((x) => x.item);
+        if (items.length === 0) {
+          items = [{dir:"Sorry 😿",previous_headings:"",title:"No results found.",what:"No results found.",path:window.location.href}];
+        }
+      }
+      callback(items);
+    }
+    $("#search-input").autocomplete(options, [
+      {
+        name: "content",
+        source: searchFuse,
+        templates: {
+          suggestion: (s) => {
+            if (s.title == s.what) {
+              return `${s.dir} >	<div class="search-details"> ${s.title}</div>`;
+            } else if (s.previous_headings == "") {
+              return `${s.dir} >	<div class="search-details"> ${s.title}</div> > ${s.what}`;
+            } else {
+              return `${s.dir} >	<div class="search-details"> ${s.title}</div> > ${s.previous_headings} > ${s.what}`;
+            }
+          },
+        },
+      },
+    ]).on('autocomplete:selected', function(event, s) {
+      window.location.href = s.path + "?q=" + q + "#" + s.id;
+    });
 });
 
 // determine if the user has the sidebar showing

source/stylesheets/header.scss

@@ -1,3 +1,23 @@
+
+.algolia-autocomplete .aa-dropdown-menu {
+    width: auto !important;
+    background-color: #fff;
+    border: 1px solid #383838;
+    margin-top: 2px;
+    max-height: 50vh;
+    overflow-y: auto;
+    right: 0px !important;
+    left: -20rem !important;
+}
+
+div[data-lastpass-icon-root] {
+    display: none;
+}
+
+div[data-lastpass-root] {
+    display: none;
+}
+
 .bottom-nav {
   border-top: 45px solid $dark-purple;
   padding-bottom: 5px;
@@ -493,3 +513,48 @@
     margin-right: 20px;
   }
 }
+
+/* search =================================================================== */
+
+
+mark {
+  background: linear-gradient(-100deg,
+    change-color($very-light-blue, $alpha: 0.2),
+    change-color($very-light-blue, $alpha: 0.7) 95%,
+    change-color($very-light-blue, $alpha: 0.1)
+  )
+}
+
+
+.algolia-autocomplete .aa-hint {
+  color: $black;
+}
+
+/* Taken from https://github.com/r-lib/pkgdown/blob/c9206802f2888992de92aa41f517ba7812f05331/inst/BS5/assets/pkgdown.scss#L458-L497 */
+/* "Max" needed until libsass supports https://sass-lang.com/documentation/syntax/special-functions#min-and-max */
+.algolia-autocomplete .aa-dropdown-menu {
+  width: Max(100%, 20rem);
+  background-color: #ffffff;
+  border: $border-width solid $black;
+  margin-top: 2px;
+
+
+  max-height: 50vh;
+  overflow-y: auto;
+}
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
+  cursor: pointer;
+  padding: 5px 4px;
+  border-bottom: 1px $light-gray solid;
+  font-size: 0.9rem;
+  color: $black;
+}
+.search-details {
+  font-size: 0.9rem;
+  color: $black;
+  display: inline;
+  font-weight: bolder;
+}
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
+  background-color: mix($black, #ffffff, 10%);
+}