From ed9038d3c8e4773301bff3eec1cf84f0de536298 Mon Sep 17 00:00:00 2001
From: Yassine El Haddad <yhaddad@cloudlinux.com>
Date: Wed, 25 Dec 2024 17:24:43 +0100
Subject: [PATCH] Integrated the new search API

---
 docs/.vuepress/client.ts                      |   6 +-
 docs/.vuepress/theme/drawer/Drawer.vue        |  59 ++--
 docs/.vuepress/theme/drawer/DrawerSearch.vue  | 163 +++++++---
 .../theme/drawer/DrawerSearchResult.vue       | 289 ++++++++++--------
 package.json                                  |   3 +-
 5 files changed, 309 insertions(+), 211 deletions(-)

diff --git a/docs/.vuepress/client.ts b/docs/.vuepress/client.ts
index 14d7bdfe..a0e4523f 100644
--- a/docs/.vuepress/client.ts
+++ b/docs/.vuepress/client.ts
@@ -77,9 +77,9 @@ export default defineClientConfig({
                 appId: "0TCNL6CGX8",
             },
 
-            MAX_ALGOLIA_VISIBLE_RESULT: 20,
-            MAX_ALGOLIA_VISIBLE_ROWS: 15,
-            MAX_ALGOLIA_HITS_PER_PAGE: 20,
+            MAX_VISIBLE_RESULT: 12,
+            MAX_VISIBLE_ROWS: 12,
+            MAX_HITS_PER_PAGE: 12,
         })
     }
 })
diff --git a/docs/.vuepress/theme/drawer/Drawer.vue b/docs/.vuepress/theme/drawer/Drawer.vue
index df25a665..2db1d2f7 100644
--- a/docs/.vuepress/theme/drawer/Drawer.vue
+++ b/docs/.vuepress/theme/drawer/Drawer.vue
@@ -11,19 +11,15 @@
           <p @click="onCloseDrawer" class="drawer-cross__text">close</p>
         </div>
       </div>
-      <DrawerTabs v-model="selectedTabIndex" :data="tabs"/>
       <main>
-       <div class="drawer-main">
-         <div class="drawer-main__wrapper">
-           <div class="drawer-main__breadcrumb">
-             <p v-if="drawerArticleResult.length" class="drawer-main__breadcrumb__text">Home
-               <img :src="withBase('/arrows/arrow-right-breadcrumb.svg')" alt="breadcrumb icon"/>
-               Documentation
-             </p>
-           </div>
-           <DrawerSearchResult :modelValue="modelValue" :data="drawerArticleResult"/>
-         </div>
-       </div>
+        <div class="drawer-main">
+          <div class="drawer-main__wrapper">
+            <div class="drawer-main__breadcrumb">
+              <!-- Optional breadcrumb can stay here -->
+            </div>
+            <DrawerSearchResult :modelValue="modelValue" :data="drawerArticleResult"/>
+          </div>
+        </div>
         <Footer v-if="isOpenDrawer && isMobileWidth" class="drawer-footer__mobile"/>
       </main>
     </div>
@@ -32,10 +28,9 @@
 </template>
 
 <script setup>
-import {withBase} from "@vuepress/client";
+import { withBase } from "@vuepress/client";
 import Footer from "../footer/Footer.vue";
-import {computed, ref, watch} from "vue";
-import DrawerTabs from "./DrawerTabs.vue";
+import { computed, ref, watch } from "vue";
 import DrawerSearchResult from "./DrawerSearchResult.vue";
 
 const props = defineProps({
@@ -44,7 +39,7 @@ const props = defineProps({
     required: true,
     default: false
   },
-  isMobileWidth:{
+  isMobileWidth: {
     type: Boolean,
     required: true,
     default: false
@@ -59,39 +54,21 @@ const props = defineProps({
     required: true,
     default: () => []
   }
-})
-
-
-const emit = defineEmits(['closeDrawer', 'update:modelValue'])
-
-const selectedTabIndex = ref(0);
-
-const tabs = computed(() => {
-    const uniqueTitles = props.homeLayoutSearchResult.reduce((unique, result) => {
-        const title = result.hierarchy?.lvl0;
-        unique[title] = unique[title] || { title, numberResults: 0 };
-        unique[title].numberResults++;
-        return unique;
-    }, {});
-    return Object.values(uniqueTitles);
 });
 
+const emit = defineEmits(['closeDrawer', 'update:modelValue']);
+
 const drawerArticleResult = computed(() => {
-  if (selectedTabIndex.value === -1) {
-    return props.homeLayoutSearchResult || [];
-  }
-  const selectedTab = tabs.value[selectedTabIndex.value];
-  return props.homeLayoutSearchResult.filter(result => result.hierarchy.lvl0 === selectedTab?.title);
-})
+  return props.homeLayoutSearchResult; // Now directly returning all results since there are no tabs
+});
 
 const onCloseDrawer = () => {
-  emit('closeDrawer')
-  selectedTabIndex.value = 0
+  emit('closeDrawer');
 }
 
 watch(() => props.isOpenDrawer, () => {
-  document.body.classList.toggle('disable-scroll', props.isOpenDrawer)
-})
+  document.body.classList.toggle('disable-scroll', props.isOpenDrawer);
+});
 </script>
 
 <style lang="stylus">
diff --git a/docs/.vuepress/theme/drawer/DrawerSearch.vue b/docs/.vuepress/theme/drawer/DrawerSearch.vue
index 59e32c97..3a28cb53 100644
--- a/docs/.vuepress/theme/drawer/DrawerSearch.vue
+++ b/docs/.vuepress/theme/drawer/DrawerSearch.vue
@@ -1,25 +1,27 @@
 <template>
-  <form id="search-form" class="drawer-header__input">
-    <input :value="modelValue"
+  <form id="search-form" class="drawer-header__input" @submit.prevent="performSearch">
+    <input type="text" 
+           :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
            id="algolia-search-input"
            :placeholder="placeholder"
            :class="activeSearchClass"
-           @keypress.enter.prevent="$emit('openDrawer')"
+           maxlength="100"
     />
     <div :class="activeSearchIconClass">
-      <img @click="$emit('openDrawer')" alt="search icon" :src="withBase(activeSearchIcon)"/>
+      <img v-if="!loading" @click="performSearch" alt="search icon" :src="withBase(activeSearchIcon)"/>
+      <div v-if="loading" class="spinner"></div>
     </div>
   </form>
 </template>
 
 <script setup>
 import {usePageFrontmatter, withBase} from "@vuepress/client";
-import {computed, inject, watch} from "vue";
-const { MAX_ALGOLIA_HITS_PER_PAGE } = inject('themeConfig')
-
+import {computed, inject, ref, watch} from "vue";
 
+const { MAX_HITS_PER_PAGE } = inject('themeConfig')
 const {headerDefaultSearchIcon, headerSearchIcon, headerSearchPlaceholder} = inject('themeConfig')
+
 const props = defineProps({
   options: {
     type: [Object, Array],
@@ -37,9 +39,10 @@ const props = defineProps({
     type: Boolean,
   }
 });
-const emit = defineEmits(["openDrawer", 'update:modelValue', 'result'])
 
+const emit = defineEmits(["openDrawer", 'update:modelValue', 'result'])
 const frontmatter = usePageFrontmatter()
+
 const isGlobalLayout = computed(() => {
   return frontmatter.value.layout === 'HomeLayout'
 })
@@ -61,43 +64,110 @@ const placeholderDesktop = computed(() => {
 })
 
 const placeholder = computed(() => {
-  return props.isMobileWidth ? 'Search accross all Imunify Security support' : placeholderDesktop.value
+  return props.isMobileWidth ? 'Search accross all Imunify360 Docs' : placeholderDesktop.value
 })
 
-
-const initialize = async (userOptions) => {
-  if( typeof window === 'undefined' ) return
-  const [docsearchModule] = await Promise.all([
-    import(/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"),
-    import(/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"),
-  ]);
-  const docsearch = docsearchModule.default;
-  docsearch(
-      Object.assign({}, userOptions, {
-        inputSelector: "#algolia-search-input",
-        algoliaOptions: {
-            hitsPerPage: MAX_ALGOLIA_HITS_PER_PAGE,
-        },
-        handleSelected: () => {
-          emit('openDrawer')
+function parseDocs(api_response) {
+  return api_response.imunify360_docs.map((doc) => {
+    const titleParts = doc.title.split("->").map((part) => part.trim());
+
+    const hierarchy = {
+      lvl0: titleParts[0] || null,
+      lvl1: titleParts[1] || null,
+      lvl2: titleParts[2] || null,
+      lvl3: titleParts[3] || null,
+      lvl4: titleParts[4] || null,
+      lvl5: null,
+      lvl6: null,
+    };
+
+    const anchor = doc.url.split("#")[1] || "";
+
+    const objectID = doc.id;
+
+    return {
+      anchor,
+      content: null,
+      hierarchy,
+      url: doc.url,
+      title: doc.title,
+      preview: doc.preview,
+      category: doc.category,
+      section: doc.section,
+      objectID,
+      _highlightResult: {
+        hierarchy: {
+          lvl0: {
+            value: hierarchy.lvl0 || "",
+            matchLevel: "none",
+            matchedWords: [],
+          },
+          lvl1: {
+            value: hierarchy.lvl1 || "",
+            matchLevel: "full",
+            fullyHighlighted: false,
+            matchedWords: [hierarchy.lvl1?.toLowerCase()],
+          },
         },
-        transformData: (hits) => {
-          emit('result', hits)
-        },
-      })
-  );
-};
-watch(
-    () => props.options,
-    async (newValue) => {
-     await initialize(newValue);
-    }, {
-      immediate: true
+        hierarchy_camel: [
+          {
+            lvl0: {
+              value: hierarchy.lvl0 || "",
+              matchLevel: "none",
+              matchedWords: [],
+            },
+            lvl1: {
+              value: `<span class="algolia-docsearch-suggestion--highlight">${hierarchy.lvl1 || ""}</span>`,
+              matchLevel: "full",
+              fullyHighlighted: false,
+              matchedWords: [hierarchy.lvl1?.toLowerCase()],
+            },
+          },
+        ],
+      },
+    };
+  });
+}
+
+async function queryGlobalSearch(query, n_results=10) {
+  const baseUrl = 'https://global-search.cl-edu.com/search';  let urlEncodedQuery = encodeURIComponent(query);
+  let url = `${baseUrl}?query=${urlEncodedQuery}&collections=imunify360_docs&n_results=${n_results}&source=imunify360_docs`;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error querying global search:', error);
+    return null;
+  }
+}
+
+const loading = ref(false); // Reactive variable for loading state
+
+const performSearch = async () => {
+  loading.value = true; // Set loading to true when search starts
+  const data = await queryGlobalSearch(props.modelValue, MAX_HITS_PER_PAGE);
+  loading.value = false; // Set loading to false when search finishes
+  if (data) {
+    const hits = parseDocs(data);
+    emit('result', hits);
+    emit('openDrawer');
+  }
+}
+
+watch(
+  () => props.options,
+  async (newValue) => {
+    // Initialize if needed or any other dependent setup
+  }, {
+    immediate: true
+  }
 );
 </script>
 
-
 <style lang="stylus">
 @import '../../styles/config.styl'
 .algolia-autocomplete
@@ -139,7 +209,6 @@ watch(
   justify-content center
   align-content center
 
-
 @media (max-width: $mobileBreakpoint)
   .drawer-header__search
     width 100%
@@ -158,4 +227,18 @@ watch(
     width 75%
   .header-layout__search-title
     text-align center
-</style>
+
+.spinner
+  border 4px solid rgba(0, 0, 0, 0.1)
+  border-top 4px solid #6ccc93
+  border-radius 50%
+  width 20px
+  height 20px
+  animation spin 1s linear infinite
+
+@keyframes spin
+  0%
+    transform rotate(0deg)
+  100%
+    transform rotate(360deg)
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/theme/drawer/DrawerSearchResult.vue b/docs/.vuepress/theme/drawer/DrawerSearchResult.vue
index 901a3e8a..fd3ea73b 100644
--- a/docs/.vuepress/theme/drawer/DrawerSearchResult.vue
+++ b/docs/.vuepress/theme/drawer/DrawerSearchResult.vue
@@ -1,168 +1,205 @@
 <template>
   <section v-if="data.length" class="drawer-main__search-results">
-    <template v-for="(i) in visibleResults" :key="i">
-      <div class="search-result" @click="gotTo(i?.url || '/')">
-        <div class="search-result__title" v-html="getTitleForArticle(i._highlightResult?.hierarchy)"/>
-        <div class="search-result__breadcrumb" v-html="getBreadcrumbsForArticle(i._highlightResult?.hierarchy)"/>
-        <div class="search-result__text" v-html="i._highlightResult?.content?.value"></div>
+    <template v-for="(item, index) in visibleResults" :key="item.objectID || index">
+      <div class="search-result" @click="gotTo(parseUrl(item.url))">
+        <div
+          class="search-result__title"
+          v-html="highlightMatchingWords(getTitleForArticle(item.title), modelValue)"
+        ></div>
+        <div
+          class="search-result__breadcrumb"
+          v-html="highlightMatchingWords(getBreadcrumbsForArticle(item.title), modelValue)"
+        ></div>
+        <div
+          class="search-result__text"
+          v-html="highlightMatchingWords(formatPreviewMarkdown(item.preview), modelValue)"
+        ></div>
       </div>
     </template>
-  </section>
-  <div v-if="data.length">
-    <div v-if="countOfHiddenResults" class="hidden_results" @click="showAllHiddenResult">
-      <p class="hidden_results__text">Show all results({{ countOfHiddenResults }})</p>
-    </div>
-    <div v-else-if="!countOfHiddenResults && isShowAllResult" class="hidden_results" @click="collapseResults">
-      <p class="hidden_results__text">Collapse results</p>
+    <div v-if="countOfHiddenResults > 0" class="show-more" @click="showAllHiddenResult">
+      <p>Show {{ countOfHiddenResults }} more results</p>
     </div>
-  </div>
+  </section>
   <div v-else>
-    <p v-if="!modelValue.length" class="no_results">What are you searching for?</p>
-    <p v-else class="no_results">
-      Sorry! No results found for
-      <span v-if="modelValue">"{{ modelValue }}"</span>
-      😞<br/>Please try ask the community on our forum
-      <a class="no_results__link" href=" https://forum.cloudlinux.com/" target="_blank">https://forum.cloudlinux.com/</a>.
-    </p>
+    <p v-if="!modelValue.length" class="no_results">Please type your search query, then press Enter or click the search button.</p>
   </div>
 </template>
 
 <script setup>
-import {computed, inject, ref} from "vue";
+import { computed, inject, ref } from "vue";
+import { marked } from "marked";
+
+const renderer = new marked.Renderer();
+
+renderer.heading = function (text) {
+  if (typeof text !== "string") return "";
+  return `<strong>${text}</strong>`;
+};
+
+renderer.image = function () {
+  return "";
+};
+
+renderer.table = function () {
+  return "";
+}
+
+const formatPreviewMarkdown = (markdown) => {
+  let md = marked(markdown, { renderer });
+  md = md.replace(/<br>/g, ""); // Remove all <br> tags
+  return md;
+};
 
 const props = defineProps({
   data: {
     type: [Array, Object],
-    required: true
+    required: true,
   },
   modelValue: {
     type: String,
-    required: true
-  }
-})
-const { MAX_ALGOLIA_VISIBLE_RESULT, MAX_ALGOLIA_VISIBLE_ROWS } = inject('themeConfig')
+    required: true,
+  },
+});
+
+const { MAX_VISIBLE_RESULT } = inject("themeConfig");
 const isShowAllResult = ref(false);
 
 const gotTo = (url) => {
- window.location.href = url;
-}
+  const parsedCurrentUrl = new URL(window.location.href);
+  if (parsedCurrentUrl.pathname + parsedCurrentUrl.hash === url) {
+    window.location.reload();
+    return;
+  }
+  window.location.href = parsedCurrentUrl.origin + url;
+};
+
+const parseUrl = (url) => {
+  const parsed = new URL(url);
+  return parsed.pathname + parsed.hash;
+};
 
 const visibleResults = computed(() => {
-  if (isShowAllResult.value) {
-    return props.data;
-  }
-  return props.data?.slice(0, MAX_ALGOLIA_VISIBLE_RESULT);
-})
+  return isShowAllResult.value ? props.data : props.data?.slice(0, MAX_VISIBLE_RESULT);
+});
 
 const countOfHiddenResults = computed(() => {
   return props.data.length - visibleResults.value.length;
-})
+});
 
 const showAllHiddenResult = () => {
   isShowAllResult.value = true;
-}
+};
+
+const getTitleForArticle = (title) => {
+  let sliced = title.split("->").map((part) => part.trim());
+  return sliced.pop();
+};
+
+const getBreadcrumbsForArticle = (title) => {
+  let sliced = title.split("->").map((part) => part.trim());
+  sliced.pop();
+  return sliced.join(" > ");
+};
+
+// Function to highlight matching words
+const highlightMatchingWords = (text, query) => {
+  if (!query.trim()) return text; // If the query is empty, return the text as is
+
+  const regex = new RegExp(`(${query.split(/\s+/).join("|")})`, "gi");
+  return text.replace(regex, "<mark>$1</mark>");
+};
+</script>
 
-const collapseResults = () => {
-  isShowAllResult.value = false;
+<style lang="stylus">
+@import "../../styles/config.styl";
 
+.drawer-main__search-results {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); // Ensures exactly 3 columns on desktop
+  gap: 1.2rem;
+  padding: 0.5rem; // Padding around the results area
+  width: 80vw;
+  margin: 0 auto;
 }
 
-const getTitleForArticle = (obj) => {
-  for (const key in obj) {
-    if (obj[key].value !== null || obj[key].value !== undefined) {
-      return obj['lvl1']?.value || obj['lvl0']?.value
+.search-result {
+  padding: 1rem;
+  border: 1px solid $drawerSearchBorderColor;
+  border-radius: 10px; // More rounded corners
+  background: $searchResultBackgroundColor; // Added background color for better visibility
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Shadow for elevation
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  cursor: pointer;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); // Increased shadow on hover
+    transform: translateY(-2px);
+    .search-result__title {
+      color: $mainColor;
+      text-decoration: underline;
     }
   }
-  return null;
-}
 
-const getBreadcrumbsForArticle = (obj) => {
-  return Object.values(obj).slice(2).filter(Boolean).map((content) => content.value).join(' > ')
+  &__title {
+    font-size: $drawerSearchResultTitleFontSize;
+    font-weight: $drawerSearchResultTitleWeight;
+    color: $drawerSearchResultTitleColor;
+    margin: 0;
+    line-height: 1.4; // Increased line height for better readability
+  }
+
+  &__text {
+    font-size: $drawerSearchResultTextFontSize;
+    line-height: $drawerSearchResultTextLineHeight;
+    color: $drawerSearchResultTextColor;
+    margin: 0.5rem 0; // Added margin for spacing
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5; // Limit preview text lines for coherence
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  &__breadcrumb {
+    font-size: $drawerSearchResultBreadcrumbTextSize;
+    color: $drawerSearchResultBreadcrumbColor;
+    margin: 0;
+    line-height: 1.4;
+    margin-top: 0.5rem;
+  }
 }
 
-</script>
+.show-more {
+  text-align: center;
+  margin: 1rem 0;
+  cursor: pointer;
 
-<style lang="stylus">
-@import '../../styles/config.styl'
+  p {
+    color: $mainColor;
+    font-weight: bold;
+  }
+}
 
-.algolia-docsearch-suggestion--highlight
-  background $drawerHighlightTextBgColor !important
-  color $drawerHighlightTextColor !important
+.no_results {
+  font-size: 1.5625rem;
+  text-align: center;
+}
 
+@media (max-width: $mobileBreakpoint) {
+  .drawer-main__search-results {
+    grid-template-columns: 1fr; // Single column on mobile
+  }
 
-.drawer-main__search-results
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  column-gap: $drawerSearchColumnGap;
-  row-gap $drawerSearchRowGap
-
-.search-result
-  display flex
-  flex-direction column
-  align-items flex-start
-  justify-content flex-start
-  gap $drawerOneSearchResultGap
-  width fit-content
-  cursor pointer
-
-  &:hover
-    .search-result__title
-      color $mainColor
-      text-decoration underline
-
-  &__title
-    font-size $drawerSearchResultTitleFontSize
-    font-weight $drawerSearchResultTitleWeight
-    line-height $drawerSearchResultTitleLineHeight
-    color $drawerSearchResultTitleColor
-    margin 0
-    &:hover
-      color $mainColor
-      text-decoration underline
-
-
-  &__text
-    font-size $drawerSearchResultTextFontSize
-    line-height $drawerSearchResultTextLineHeight
-    color $drawerSearchResultTextColor
-    margin 0
-    overflow: hidden
-    display: -webkit-box
-    -webkit-box-orient: vertical
-    -webkit-line-clamp: v-bind(MAX_ALGOLIA_VISIBLE_ROWS)
-    -webkit-box-decoration-break: clone
-    box-decoration-break: clone
-
-  &__breadcrumb
-    font-size $drawerSearchResultBreadcrumbTextSize
-    line-height $drawerSearchResultBreadcrumbLineHeight
-    color $drawerSearchResultBreadcrumbColor
-    margin 0
-
-.hidden_results
-  width: $drawerHiddenResultWidth
-  background $drawerHiddenResultBgColor
-  display: flex;
-  align-items center
-  justify-content center
-  margin-top 3.5rem
-  cursor pointer
-
-  &__text
-    font-size $drawerHiddenResultFontSize
-    font-weight 500
-    line-height 1.019rem
-    color $drawerHiddenResultColor
-
-.no_results
-  font-size 1.5625rem
-  &__link
-    &:hover
-      text-decoration underline
-
-@media (max-width: $mobileBreakpoint)
-  .hidden_results
-    margin-top 2.5rem
-    margin-bottom 0
-    font-size 1.25rem
+  .no_results {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .drawer-main__search-results {
+    grid-template-columns: repeat(2, 1fr); // 2 columns on tablets
+  }
+}
 </style>
\ No newline at end of file
diff --git a/package.json b/package.json
index 225906de..53746332 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
     "@types/vue-select": "3.16.2",
     "@vuepress/core": "1.9.9",
     "@vuepress/plugin-container": "2.0.0-beta.8",
+    "@vuepress/plugin-prismjs": "2.0.0-beta.4",
     "@vuepress/theme-default": "1.9.9",
     "@vuepress/utils": "2.0.0-alpha.1",
     "cl-doc-vue-bot-ui": "0.1.4",
+    "marked": "^15.0.4",
     "mitt": "3.0.0",
-    "@vuepress/plugin-prismjs": "2.0.0-beta.4",
     "stylus": "0.59.0",
     "vue-multiselect": "3.0.0-beta.2",
     "vue-select": "4.0.0-beta.6"