Merge branch 'cherry-pick-7ac4cb21-3' into '13.1'13.1

Backport !1096 to 13.1 stable branch

See merge request gitlab-org/gitlab-docs!1106

4 files changed, 70 insertions, 107 deletions

diff --git a/content/assets/javascripts/instantsearch.js b/content/assets/javascripts/instantsearch.js
index 8e3c8578..7d457482 100644
--- a/content/assets/javascripts/instantsearch.js
+++ b/content/assets/javascripts/instantsearch.js
@@ -1,19 +1,16 @@
 ---
-version: 1
+version: 2
 ---
-
 const search = instantsearch({
-  appId: 'BH4D9OD16A',
-  apiKey: 'ce1690e1421303458a1fcbea0cc4a927',
   indexName: 'gitlab',
+  searchClient: algoliasearch('BH4D9OD16A', 'ce1690e1421303458a1fcbea0cc4a927'),
   algoliaOptions: {
     // Filter by tags as described in https://github.com/algolia/docsearch-configs/blob/master/configs/gitlab.json
     'filters': "tags:gitlab<score=3> OR tags:omnibus<score=2> OR tags:runner<score=1>",
-    // Number of results shown in the search dropdown
-    'hitsPerPage': 10,
   },
-  loadingIndicator: true,
-  urlSync: true,
+  routing: {
+    stateMapping: instantsearch.stateMappings.singleIndexQ('gitlab')
+  },
   searchFunction: function(helper) {
     var searchResults = $('.search-results');
     if (helper.state.query === '') {
@@ -25,26 +22,27 @@ const search = instantsearch({
   }
 });
 
-search.addWidget(
+search.addWidgets([
   instantsearch.widgets.searchBox({
-    container: '#search-input',
-    reset: true,
-    poweredBy: true
-  })
-);
+    container: '#searchbox',
+    placeholder: 'Search GitLab Documentation',
+    showReset: true,
+    showLoadingIndicator: true
+  }),
+
+  instantsearch.widgets.poweredBy({
+    container: '#powered-by',
+  }),
 
-search.addWidget(
-    instantsearch.widgets.refinementList({
-      container: '#refinement-list',
-      attributeName: 'tags',
-      sortBy: ["name:asc","isRefined"],
-      templates: {
-        header: 'Refine your search:'
-      }
-    })
-  );
+  instantsearch.widgets.refinementList({
+    container: '#refinement-list',
+    attribute: 'tags',
+    sortBy: ["name:asc","isRefined"],
+    templates: {
+      header: 'Refine your search:'
+    }
+  }),
 
-search.addWidget(
   instantsearch.widgets.infiniteHits({
     container: '#hits',
     templates: {
@@ -53,16 +51,16 @@ search.addWidget(
     },
     escapeHits: true,
     showMoreLabel: "Load more results..."
-  })
-);
+  }),
 
-search.addWidget(
   instantsearch.widgets.stats({
-    container: '#stats',
-    templates: {
-      body: '<div class="stats">We found {{nbHits}} results, fetched in {{processingTimeMS}}ms.</div>'
-    }
+    container: '#stats'
+  }),
+
+  instantsearch.widgets.configure({
+    // Number of results shown in the search dropdown
+    'hitsPerPage': 10,
   })
-);
+]);
 
 search.start();
diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss
index bbbbde7a..82c867af 100644
--- a/content/assets/stylesheets/instantsearch.scss
+++ b/content/assets/stylesheets/instantsearch.scss
@@ -1,5 +1,5 @@
 ---
-version: 10
+version: 11
 ---
 
 @import "variables";
@@ -24,11 +24,12 @@ $color11: transparent;
 $color12: rgba(32, 139, 196, .2); //link color lighter
 
 
-//scss-lint:disable ImportantRule
-.ais-search-box {
+//scss-lint:disable ImportantRule SelectorFormat
+.ais-SearchBox {
   width: 100%;
   max-width: 100% !important; // was 300px
 }
+//scss-lint:enable ImportantRule SelectorFormat
 
 .search-input {
   border-radius: 2px;
@@ -38,34 +39,20 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
   padding-bottom: 7px;
 }
 
-.ais-stats {
-  display: block;
-  float: left;
-  margin-top: -26px !important;
-
-  @media all and (max-width: $mobile-width) {
-    margin-top: -25px !important;
-  }
-}
-
-.ais-search-box--powered-by {
+//scss-lint:disable SelectorFormat
+.ais-PoweredBy {
   font-family: $sans-font-family;
   font-size: $body-font-size;
-}
 
-.ais-search-box--magnifier,
-.ais-search-box--reset {
-  display: block;
-  top: 35% !important;
-  bottom: auto;
-  right: 10px !important;
-  width: 14px;
+  svg {
+    display: inline;
+  }
 }
+//scss-lint:enable SelectorFormat
 
 .hit-content {
-  display: block;
-  border-top: 2px solid $color0;
-  padding: 30px 5px;
+  border-top: 1px solid $color0;
+  padding: 1rem .5rem;
   margin: 0;
   font-size: 13px;
   font-weight: 300;
@@ -76,8 +63,7 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
   word-wrap: break-word;
 
   &:hover {
-    border-top: 2px solid $color12;
-    box-shadow: 0 10px 6px -6px $color12;
+    background-color: $color12;
 
     .hit-tag {
       color: $link-color;
@@ -85,17 +71,15 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
     }
   }
 
-  @media all and (max-width: $mobile-width) {
-    padding: 25px 5px;
-  }
-
   .lvl0 {
     color: $black;
   }
 
+  //scss-lint:disable ImportantRule
   .lvl1 {
     font-size: 18px !important;
   }
+  //scss-lint:enable ImportantRule
 
   .lvl2 {
     font-size: 14px;
@@ -156,22 +140,13 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
     }
   }
 }
-//scss-lint:enable ImportantRule
 
 //scss-lint:disable IdSelector
 #hits {
-  border-top: 0;
-  margin: 4px 0;
-  padding: 10px 0;
-
   > h1, h2, h3, h4, h5, h6 {
     border: 0;
   }
 }
-
-#refinement-list {
-  margin-top: 15px;
-}
 //scss-lint:enable IdSelector
 
 //overrides padding for the searchbox
@@ -187,46 +162,38 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
   background-color: $color3;
 }
 
-.ais-infinite-hits--showmore {
-  display: block;
-  margin: 10px auto auto;
-
-  button {
-    padding: 20px 10px;
-    cursor: pointer;
+//scss-lint:disable SelectorFormat
+.ais-InfiniteHits {
+  .ais-InfiniteHits-item {
     width: 100%;
-    background-color: $color8;
-    border-color: $color3;
-    border-right: 0;
-    border-left: 0;
-
-    &:hover {
-      background-color: $color3;
-    }
-
-    &:focus {
-      outline: none;
-    }
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-shadow: none;
   }
 }
 
-.stats {
+.ais-InfiniteHits-loadMore {
   display: block;
-  text-align: right;
-  font-size: 11px;
-  color: $body-color;
+  width: 100%;
+  margin: 1rem .5rem;
 
-  @media all and (max-width: $mobile-width) {
-    font-size: 10px;
+  &:focus {
+    outline: none;
   }
 }
 
-.ais-refinement-list--item {
+.ais-Stats-text {
+  color: $body-color;
+}
+
+.ais-RefinementList-item {
   display: inline-block;
   padding-right: 10px;
 }
 
-.ais-refinement-list--label {
+.ais-RefinementList-label {
   text-transform: uppercase;
   color: $link-color;
 }
+//scss-lint:enable SelectorFormat
diff --git a/content/search/index.md b/content/search/index.md
index e18386ae..a827c53e 100644
--- a/content/search/index.md
+++ b/content/search/index.md
@@ -3,10 +3,8 @@ title: Search through GitLab Documentation
 layout: instantsearch
 ---
 <header>
-  <div>
-    <input id="search-input" placeholder="Search GitLab Documentation">
-     <!-- We use a specific placeholder in the input to guides users in their search. -->
-  </div>
+  <div id="searchbox"></div>
+  <div id="powered-by"></div>
 </header>
 <main class="search-results">
   <div id="stats"></div>
diff --git a/layouts/instantsearch-head.html b/layouts/instantsearch-head.html
index e92ad6f5..f0ed5c1d 100644
--- a/layouts/instantsearch-head.html
+++ b/layouts/instantsearch-head.html
@@ -1,6 +1,6 @@
 <!-- instantsearch -->
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/instantsearch.*'].path %>">
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0/dist/instantsearch-theme-algolia.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0/dist/instantsearch.min.css">
-<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.4/themes/algolia-min.css">
+<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.4.0/dist/algoliasearch-lite.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tnir/instantsearch.js@4.7.1-q/dist/instantsearch.production.min.js"></script>
 <!-- end of instantsearch -->