From b56b44b1c8561654faebd9640bbb5ad4a629deec Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Mon, 18 Oct 2021 18:44:49 -0500
Subject: [PATCH] Add search to fleetdm.com/handbook (#2545)

* uncommented searchbar, live search config

* update docsearch config

* Remove second search bar, adjust layout of page to work with a single search bar

* lint fix

* Update basic-handbook.less
---
 .../js/pages/docs/basic-documentation.page.js |  3 +
 .../js/pages/handbook/basic-handbook.page.js  | 12 ++++
 .../styles/pages/handbook/basic-handbook.less | 16 +----
 .../views/pages/handbook/basic-handbook.ejs   | 72 ++++++++-----------
 4 files changed, 47 insertions(+), 56 deletions(-)

diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js
index 91905e466b..06fee6156a 100644
--- a/website/assets/js/pages/docs/basic-documentation.page.js
+++ b/website/assets/js/pages/docs/basic-documentation.page.js
@@ -96,6 +96,9 @@ parasails.registerPage('basic-documentation', {
       indexName: 'fleetdm',
       inputSelector: (this.isDocsLandingPage ? '#docsearch-query-landing' : '#docsearch-query'),
       debug: false,
+      algoliaOptions: {
+        'facetFilters': ['tags:docs']
+      },
     });
 
     // Handle hashes in urls when coming from an external page.
diff --git a/website/assets/js/pages/handbook/basic-handbook.page.js b/website/assets/js/pages/handbook/basic-handbook.page.js
index 1912a20f99..2ddc45d7d5 100644
--- a/website/assets/js/pages/handbook/basic-handbook.page.js
+++ b/website/assets/js/pages/handbook/basic-handbook.page.js
@@ -23,6 +23,18 @@ parasails.registerPage('basic-handbook', {
 
   mounted: async function() {
 
+    // Algolia DocSearch
+    docsearch({
+      apiKey: '8c492befdb9f5b5166253a0f8eeb789d',
+      indexName: 'fleetdm',
+      inputSelector: '#docsearch-query',
+      debug: false,
+      clickAnalytics: true,
+      algoliaOptions: {
+        'facetFilters': ['tags:handbook']
+      },
+    });
+
     this.subtopics = (() => {
       let subtopics;
       if(!this.isHandbookLandingPage){
diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less
index 6160b09814..f9da83c2f6 100644
--- a/website/assets/styles/pages/handbook/basic-handbook.less
+++ b/website/assets/styles/pages/handbook/basic-handbook.less
@@ -58,27 +58,15 @@
     } &:focus {
       border: none;
     }
-
   }
   [purpose='breadcrumbs'] {
     padding-bottom: 16px;
     padding-top: 16px;
-
     p, a, strong {
       font-size: 12px;
       line-height: 24px;
     }
-  }
-
-  [purpose='mobile-breadcrumbs'] {
-    line-height: 24px;
-    padding-bottom: 16px;
-    padding-top: 16px;
-    p, strong {
-      font-size: 12px;
-    }
     a {
-      font-size: 12px;
       text-decoration: none;
       &.active {
         color: @core-vibrant-blue;
@@ -299,7 +287,9 @@
     .handbook-content {
       max-width: 100%;
     }
-
+    [purpose='search'] {
+      padding-bottom: 0px;
+    }
     [purpose='right-sidebar'] {
       max-width: 100%;
       margin: 0;
diff --git a/website/views/pages/handbook/basic-handbook.ejs b/website/views/pages/handbook/basic-handbook.ejs
index b47b1ff511..24784a9977 100644
--- a/website/views/pages/handbook/basic-handbook.ejs
+++ b/website/views/pages/handbook/basic-handbook.ejs
@@ -1,45 +1,8 @@
 <div id="basic-handbook" v-cloak>
   <div purpose="handbook-template" style="max-width: 1000px;" class="container-fluid p-0 px-lg-3 mb-5">
     <div class="d-flex flex-column flex-md-row pt-lg-4 pb-lg-4 m-0">
-      <div purpose="mobile-breadcrumbs-container" class="d-flex justify-content-lg-between p-0 pt-4 pb-lg-2 m-0">
-        <div purpose="mobile-breadcrumbs" class="d-block d-md-none">
-          <div class="d-flex" v-if="breadcrumbs.length > 1">
-            <a :href="'/' + breadcrumbs[0]" class="pr-3">
-              {{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
-            </a>
-            <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length === 3">
-              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" />
-              <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3">
-                {{getTitleFromUrl(breadcrumbs[1])}}
-              </a>
-            </div>
-            <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length > 1">
-              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
-              <p class="px-3 m-0">
-                {{thisPage.title}}
-              </p>
-            </div>
-          </div>
-          <div v-else>
-            <strong>Introduction</strong>
-          </div>
-        </div>
-      </div>
-<!--       <div purpose="search" class="d-block d-md-none">
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text border-0 bg-transparent pl-3" >
-              <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-            </span>
-          </div>
-          <div class="form-control border-0 ">
-          <input id="docsearch-query-landing" disabled class="docsearch-input pr-1"
-            placeholder="Search the handbook..." aria-label="Search the handbook"
-            />
-          </div>
-        </div>
-      </div> -->
-      <div purpose="right-sidebar" class="order-md-last pb-3 pb-lg-0 pr-xl-0 right-sidebar" v-if="!thisPage.title.includes('FAQ')">
+
+      <div purpose="right-sidebar" class="order-md-last d-none d-md-block pb-3 pb-lg-0 pr-xl-0 right-sidebar">
         <div purpose="maintainer" class="mb-lg-3">
           <h4>Maintained by:</h4>
           <img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
@@ -55,8 +18,10 @@
         </div>
         <div class="border-bottom py-3 d-flex d-md-none"></div>
       </div>
+
       <div class="d-flex flex-column pl-lg-5 handbook-content">
-        <div purpose="breadcrumbs" class="d-none d-md-flex m-0 align-items-center breadcrumbs">
+
+        <div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
           <div class="d-flex" v-if="breadcrumbs.length > 1">
             <a :href="'/' + breadcrumbs[0]" class="pr-3">
               {{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
@@ -78,7 +43,8 @@
             <strong>Introduction</strong>
           </div>
         </div>
-<!--         <div purpose="search" class="d-none d-md-flex">
+
+        <div purpose="search" class="d-flex">
           <div class="input-group">
             <div class="input-group-prepend">
               <span class="input-group-text border-0 bg-transparent pl-3" >
@@ -86,13 +52,32 @@
               </span>
             </div>
             <div class="form-control border-0 ">
-            <input id="docsearch-query-landing" disabled class="docsearch-input pr-1"
+            <input id="docsearch-query" class="docsearch-input pr-1"
               placeholder="Search the handbook..." aria-label="Search the handbook"
               />
             </div>
           </div>
-        </div> -->
+        </div>
+
+        <div purpose="right-sidebar" class="d-block d-md-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
+          <div purpose="maintainer" class="mb-lg-3">
+            <h4>Maintained by:</h4>
+            <img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
+            <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/tree/main/handbook/'+thisPage.sectionRelativeRepoPath"> Edit this page</a>
+          </div>
+          <h4 class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</h4>
+          <div purpose="subtopics">
+            <ul class="p-0 m-0">
+              <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
+                <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-md-3'" @click="forceRender()">{{subtopic.title}}</a>
+              </li>
+            </ul>
+          </div>
+          <div class="border-bottom py-3 d-flex d-md-none"></div>
+        </div>
+
         <div purpose="content" id="body-content" class="content" parasails-has-no-page-script>
+
           <%- partial(
             path.relative(
               path.dirname(__filename),
@@ -105,6 +90,7 @@
               )
             )
           ) %>
+
         </div>
       </div>
     </div>