replaced algolia search

Author: yel-hadd

docs/.vuepress/client.ts

@@ -78,9 +78,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: 10,
+            MAX_VISIBLE_ROWS: 10,
+            MAX_HITS_PER_PAGE: 10,
         })
     }
 })

docs/.vuepress/theme/drawer/DrawerSearch.vue

@@ -5,21 +5,21 @@
            id="algolia-search-input"
            :placeholder="placeholder"
            :class="activeSearchClass"
-           @keypress.enter.prevent="$emit('openDrawer')"
+           @keypress.enter.prevent="performSearch"
     />
     <div :class="activeSearchIconClass">
-      <img @click="$emit('openDrawer')" alt="search icon" :src="withBase(activeSearchIcon)"/>
+      <img @click="performSearch" alt="search icon" :src="withBase(activeSearchIcon)"/>
     </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 +37,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 +62,107 @@ const placeholderDesktop = computed(() => {
 })
 
 const placeholder = computed(() => {
-  return props.isMobileWidth ? 'Search accross all Imunify Security support' : placeholderDesktop.value
+  return props.isMobileWidth ? 'Search accross all CloudLinux 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')
-        },
-        transformData: (hits) => {
-          emit('result', hits)
+function parseDocs(api_response) {
+  return api_response.cloudlinux_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()],
+          },
         },
-      })
-  );
-};
-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 url = `${baseUrl}?query=${query}&collections=cloudlinux_docs&n_results=${n_results}&source=cloudlinux_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 performSearch = async () => {
+  const data = await queryGlobalSearch(props.modelValue, MAX_HITS_PER_PAGE);
+  if (data) {
+    const hits = parseDocs(data);
+    console.log(hits); // Log the results data structure
+    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 +204,6 @@ watch(
   justify-content center
   align-content center
 
-
 @media (max-width: $mobileBreakpoint)
   .drawer-header__search
     width 100%
@@ -158,4 +222,4 @@ watch(
     width 75%
   .header-layout__search-title
     text-align center
-</style>
+</style>