Add pagination and increase results (#3418)

* Add pagination and increase results

* add highlight

Author: markzegarelli

src/_layouts/search.html

@@ -1,7 +1,8 @@
 ---
 layout: main
 ---
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css"
+  integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">
 
 <main class="docs__body stage__body">
   <div class="docs__navbar">
@@ -11,11 +12,11 @@
           <div class="field field--expand field--icon">
             <div id="autocomplete"></div>
             {% unless include.mobile %}
-              <div class="field__icon field__icon--right flex flex--middle flex--center">
-                <button class="field__button" data-ref="search-navbar[trigger]">
-                  {% include icons/symbols/cross.svg %}
-                </button>
-              </div>
+            <div class="field__icon field__icon--right flex flex--middle flex--center">
+              <button class="field__button" data-ref="search-navbar[trigger]">
+                {% include icons/symbols/cross.svg %}
+              </button>
+            </div>
             {% endunless %}
           </div>
         </div>
@@ -34,9 +35,9 @@
       {% include components/breadcrumbs.html %}
 
       {%- if page.title -%}
-        <h1 id="{{ page.title | slugify }}">
-          {{ page.title }}
-        </h1>
+      <h1 id="{{ page.title | slugify }}">
+        {{ page.title }}
+      </h1>
       {%- endif -%}
 
       <div class="markdown" data-headings-anchors>
@@ -45,8 +46,8 @@ <h1 id="{{ page.title | slugify }}">
 
 
       {% unless page.hide-feedback %}
-        <hr>
-        {% include components/feedback.html %}
+      <hr>
+      {% include components/feedback.html %}
       {% endunless %}
 
       <hr>
@@ -56,51 +57,61 @@ <h1 id="{{ page.title | slugify }}">
 
   </article>
 </main>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js"
+  integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js"
+  integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
 
 <script>
-const appId = 'UINQ2M4D9S';
-const apiKey = '636b6d9e2dfb207e89ea7344859848f9';
-const searchClient = algoliasearch(appId, apiKey);
-
-const instantSearch = instantsearch({
-  indexName: 'segment-docs',
-  searchClient,
-  routing: true,
-  facetFilters: ['hidden:-true'],
-
-});
+  const appId = 'UINQ2M4D9S';
+  const apiKey = '636b6d9e2dfb207e89ea7344859848f9';
+  const searchClient = algoliasearch(appId, apiKey);
 
-instantSearch.addWidgets([
-  instantsearch.widgets.searchBox({
-    container: '#searchbox',
-  }),
 
-  instantsearch.widgets.configure({
-    hitsPerPage: 7,
+  const instantSearch = instantsearch({
+    indexName: 'segment-docs',
+    searchClient,
+    routing: true,
     facetFilters: ['hidden:-true'],
-  }),
-
-  instantsearch.widgets.hits({
-    container: '#hits',
-    templates: {
-      item(item){
-        if (item.anchor != null) {
-                var anchorLink = "#" + item.anchor;
-              } else {
-                var anchorLink = "";
-              }
-        return `<a class="aa-link" href="/docs${item.url}${anchorLink}">
-              <p class="aa-title" >${item.title}</h3>
+
+  });
+
+  instantSearch.addWidgets([
+    instantsearch.widgets.searchBox({
+      container: '#searchbox',
+    }),
+
+    instantsearch.widgets.configure({
+      hitsPerPage: 10,
+      facetFilters: ['hidden:-true'],
+    }),
+
+    instantsearch.widgets.pagination({
+      container: '#pagination'
+
+    }),
+
+    instantsearch.widgets.hits({
+      container: '#hits',
+      templates: {
+        item(item) {
+          if (item.anchor != null) {
+            var anchorLink = "#" + item.anchor;
+          } else {
+            var anchorLink = "";
+          }
+          return `<a class="aa-link" href="/docs${item.url}${anchorLink}">
+              <p class="aa-title" >${instantsearch.highlight({attribute: 'title', hit: item})}</h3>
                 <p class="aa-heading">${item.headings.join(' >')}</p>
-              <p class="aa-content">${item.content}</p></a>
+              <p class="aa-content">${instantsearch.highlight({attribute: 'content', hit: item})}</p></a>
             `;
+        }
       }
-    }
-  })
-]);
+    })
+  ]);
+
+
 
-instantSearch.start();
+  instantSearch.start();
 
 </script>

src/_sass/components/_search.scss

@@ -105,4 +105,8 @@ a.aa-link:hover {
   border-radius: 5px;
   color: white;
   font-size: 10px;
+}
+
+.ais-Pagination-item:before {
+  content: none!important;
 }

src/utils/search.md

@@ -3,4 +3,5 @@ title: search
 layout: search
 ---
 <div id="searchbox"></div>
-<div id="hits"></div>
+<div id="hits"></div>
+<div id="pagination"></div>