(Partners) Introduce partners section

assets/scripts/components/async-loading.js

@@ -85,10 +85,13 @@ function loadPage(newUrl) {
                 hitsContainer.classList.add("hits-container", "d-none");
                 const hits = document.createElement("div");
                 hits.setAttribute("id", "hits");
+                const hitsPartners = document.createElement("div");
+                hitsPartners.setAttribute("id", "hits-partners");
 
                 searchBoxContainer.append(searchBox);
                 searchBoxContainer.append(hitsContainer);
                 hitsContainer.append(hits);
+                hitsContainer.append(hitsPartners);
 
                 if(sidenavSearchbarMount) {
                   sidenavSearchbarMount.append(searchBoxContainer);

assets/scripts/components/instantsearch.js

@@ -1,7 +1,7 @@
 import { getConfig } from '../helpers/getConfig';
 import instantsearch from 'instantsearch.js';
 import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';
-import { configure, searchBox } from 'instantsearch.js/es/widgets';
+import { configure, searchBox, index } from 'instantsearch.js/es/widgets';
 import { searchbarHits } from './instantsearch/searchbarHits';
 import { searchpageHits } from './instantsearch/searchpageHits';
 import { customPagination } from './instantsearch/customPagination';
@@ -10,6 +10,8 @@ import { debounce } from '../utils/debounce';
 const { env } = document.documentElement.dataset;
 const pageLanguage = getPageLanguage();
 const typesenseConfig = getConfig(env).typesense;
+const docsIndex = typesenseConfig.docsIndex;
+const partnersIndex = typesenseConfig.partnersIndex;
 
 const adapterOptions = {
     server: {
@@ -38,14 +40,21 @@ const adapterOptions = {
         ],
         cacheSearchResultsForSeconds: 2 * 60
     },
-    additionalSearchParameters: {
-        preset: 'docs_alias_view'
+    collectionSpecificSearchParameters: {
+        [docsIndex]: {
+            preset: 'docs_alias_view',
+            collection: docsIndex
+        },
+        [partnersIndex]: {
+            preset: 'docs_partners_view',
+            collection: partnersIndex
+        }
     }
 };
+
 const typesenseInstantSearchAdapter = new TypesenseInstantSearchAdapter(adapterOptions);
 
 const searchClient = typesenseInstantSearchAdapter.searchClient;
-let indexName = typesenseConfig.index;
 
 function getPageLanguage() {
     const pageLanguage = document.documentElement.lang;
@@ -97,11 +106,13 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
     const searchBoxContainer = document.querySelector('#searchbox');
     const hitsContainerContainer = document.querySelector('.hits-container');
     const hitsContainer = document.querySelector('#hits');
+    const partnersHitsContainer = document.querySelector('#hits-partners');
     const paginationContainer = document.querySelector('#pagination');
     const pageTitleScrollTo = document.querySelector('#pagetitle');
     const filtersDocs = `language: ${pageLanguage}`;
     const homepage = document.querySelector('.kind-home');
     const apiPage = document.querySelector('body.api');
+    const partnersPage = document.querySelector('body.partners');
     let searchResultsPage = document.querySelector('.search_results_page');
     let basePathName = '/';
     let numHits = 5;
@@ -124,8 +135,15 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
         typesenseInstantSearchAdapter.updateConfiguration({
             ...adapterOptions,
             ...{
-                additionalSearchParameters: {
-                    preset: 'docs_alias_api_view'
+                collectionSpecificSearchParameters: {
+                    [docsIndex]: {
+                        preset: 'docs_alias_api_view',
+                        collection: docsIndex
+                    },
+                    [partnersIndex]: {
+                        preset: 'docs_partners_view',
+                        collection: partnersIndex
+                    }
                 }
             }
         });
@@ -139,20 +157,20 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
     // No searchBoxContainer means no instantSearch
     if (searchBoxContainer) {
         const search = instantsearch({
-            indexName,
+            indexName: docsIndex,
             searchClient,
             // routing handles search state URL sync
             routing: {
                 stateMapping: {
                     stateToRoute(uiState) {
-                        const indexUiState = uiState[indexName];
+                        const indexUiState = uiState[docsIndex];
                         return {
                             s: indexUiState.query
                         };
                     },
                     routeToState(routeState) {
                         return {
-                            [indexName]: {
+                            [docsIndex]: {
                                 query: routeState.s
                             }
                         };
@@ -197,14 +215,14 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
                 showSubmit: true,
                 templates: {
                     submit({ cssClasses }, { html }) {
-                        return html`<span id="submit-text" class="${cssClasses.submit}">search</span>
-
-                            <i id="submit-icon" class="${cssClasses.submit} icon-search"></i>`;
+                        return html`<span id="submit-text" class="${cssClasses.submit}">search</span
+                            ><i id="submit-icon" class="${cssClasses.submit} icon-search"></i>`;
                     }
                 }
             }),
 
             hitComponent({
+                partnersPage: partnersPage,
                 container: hitsContainer,
                 basePathName: basePathName
             }),
@@ -214,7 +232,23 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
                 container: paginationContainer,
                 scrollTo: pageTitleScrollTo,
                 padding: 5
-            })
+            }),
+
+            // Add second index: Partners
+            index({
+                indexName: partnersIndex
+            }).addWidgets([
+                configure({
+                    hitsPerPage: numHits,
+                    distinct: 1
+                }),
+
+                hitComponent({
+                    partnersPage: partnersPage,
+                    container: partnersHitsContainer,
+                    basePathName: basePathName
+                })
+            ])
         ]);
 
         // Start up frontend search
@@ -244,10 +278,12 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
                     window.location.pathname = searchPathname;
                 }
             };
-
+            
             const handleOutsideSearchbarClick = (e) => {
                 // Intercept user clicks within instantSearch dropdown to send custom RUM event before redirect.
-                if (hitsContainer.contains(e.target)) {
+                const targetIsDescendant = [hitsContainer, partnersHitsContainer].some((c) => c.contains(e.target));
+
+                if (targetIsDescendant) {
                     e.preventDefault();
                 }
 
@@ -256,7 +292,7 @@ function loadInstantSearch(currentPageWasAsyncLoaded) {
                 do {
                     if (target === searchBoxContainerContainer) return;
 
-                    if (target && target.href && hitsContainer.contains(e.target)) {
+                    if (target && target.href && targetIsDescendant) {
                         sendSearchRumAction(search.helper.state.query, target.href);
                         window.history.pushState({}, '', target.href);
                         window.location.reload();

assets/scripts/components/instantsearch/getHitData.js

@@ -1,17 +1,17 @@
-import { replaceSpecialCharacters } from "../../helpers/string";
-import { truncateContent, truncateContentAtHighlight } from "../../helpers/truncateContent";
+import { replaceSpecialCharacters } from '../../helpers/string';
+import { truncateContent, truncateContentAtHighlight } from '../../helpers/truncateContent';
 
 export function getHitData(hit, searchQuery = '') {
     const title = hit.title ? hit.title : hit.type;
     const cleanRelPermalink =
         hit.language == 'en' ? hit.relpermalink : hit.relpermalink.replace(`/${hit.language}/`, '');
 
-    const matchingWordsArray = getFilteredMatchingWords(searchQuery).map(word => replaceSpecialCharacters(word))
+    const matchingWordsArray = getFilteredMatchingWords(searchQuery).map((word) => replaceSpecialCharacters(word));
     const joinedMatchingWordsFromSearch = matchingWordsArray.join('|');
     const regexQry = new RegExp(`(${joinedMatchingWordsFromSearch})`, 'gi');
-    const highlightTitle = (hit._highlightResult.title.value || title);
-    const highlightContent = (hit._highlightResult.content.value || '');
-    const highlightSectionHeader = (hit._highlightResult.section_header.value || '');
+    const highlightTitle = hit._highlightResult.title.value || title;
+    const highlightContent = hit._highlightResult.content.value || '';
+    const highlightSectionHeader = hit._highlightResult.section_header?.value || '';
 
     return {
         relpermalink: cleanRelPermalink,
@@ -28,22 +28,22 @@ export function getHitData(hit, searchQuery = '') {
     filtering out short/common terms that may cause inaccurate highlighting
 */
 const getFilteredMatchingWords = (searchQuery) => {
-    const stopWords = ['the', 'and', 'for']
-    return searchQuery.split(' ').filter(word => word.length > 2 && !stopWords.includes(word))
-}
+    const stopWords = ['the', 'and', 'for'];
+    return searchQuery.split(' ').filter((word) => word.length > 2 && !stopWords.includes(word));
+};
 
 /*
     Manually add <mark> element when applicable as relevant content isn't always highlighted in title/content.
  */
 const handleHighlightingSearchResultContent = (string, regex) => {
-    if (string.includes('<mark>')) return string
+    if (string.includes('<mark>')) return string;
 
     if (string.search(regex) > 0) {
-        return string.replace(regex, '<mark>$1</mark>')
+        return string.replace(regex, '<mark>$1</mark>');
     }
 
-    return string
-}
+    return string;
+};
 
 /*
     Produces a snippet to be displayed in the search results.
@@ -52,16 +52,16 @@ const handleHighlightingSearchResultContent = (string, regex) => {
     or a similar section which should have relevant information for the end user.
  */
 export const getSnippetForDisplay = (hit, isSearchPage) => {
-    const characterLimit = isSearchPage ? 300 : 180
-    let snippet = truncateContentAtHighlight(hit.highlighted_content, characterLimit)
+    const characterLimit = isSearchPage ? 300 : 180;
+    let snippet = truncateContentAtHighlight(hit.highlighted_content, characterLimit);
 
     if (!hit.section_header) {
-        snippet = truncateContent(hit.highlighted_content, characterLimit)
+        snippet = truncateContent(hit.highlighted_content, characterLimit);
 
         if (!snippet.includes('<mark>')) {
-            snippet = truncateContentAtHighlight(hit.highlighted_content, characterLimit)
+            snippet = truncateContentAtHighlight(hit.highlighted_content, characterLimit);
         }
     }
 
-    return snippet
-}
+    return snippet;
+};

assets/scripts/components/instantsearch/searchbarHits.js

@@ -56,15 +56,18 @@ const renderHits = (renderOptions, isFirstRender) => {
 
     const handleNRender = (containerDiv, allJoinedListItemsArray, numHits) => {
         // On non-first renders, add organized hits to applicable divs
-        const addHitsToEmptyElements = () => {
+        const addHitsToEmptyElements = (container) => {
             allJoinedListItemsArray.forEach((joinedList, index) => {
-                containerDiv.querySelector(`#ais-Hits-category-${index} .ais-Hits-list`).innerHTML = joinedList;
+                if (joinedList) {
+                    const target = container.querySelector(`#ais-Hits-category-${index} .ais-Hits-list`);
+                    if (target) target.innerHTML = joinedList;
+                }
             });
         };
 
-        const hideOrShowElements = () => {
-            const finalHitsLists = document.querySelectorAll('.ais-Hits-list');
-
+        const hideOrShowElements = (container) => {
+            const finalHitsLists = container.querySelectorAll('.ais-Hits-list');
+            
             finalHitsLists.forEach((list) => {
                 if (list.childElementCount) {
                     list.classList.remove('no-hits');
@@ -73,13 +76,11 @@ const renderHits = (renderOptions, isFirstRender) => {
                 }
             });
 
-            numHits === 0
-                ? document.querySelector('#hits').classList.add('no-hits')
-                : document.querySelector('#hits').classList.remove('no-hits');
+            numHits === 0 ? container.classList.add('no-hits') : container.classList.remove('no-hits');
         };
 
-        addHitsToEmptyElements();
-        hideOrShowElements();
+        addHitsToEmptyElements(containerDiv);
+        hideOrShowElements(containerDiv);
     };
 
     // Returns a bunch of <li>s
@@ -89,7 +90,10 @@ const renderHits = (renderOptions, isFirstRender) => {
                 const hit = getHitData(item, renderOptions.results.query);
                 const displayContent = getSnippetForDisplay(hit, false);
                 const cleanRelpermalink = `${basePathName}${hit.relpermalink}`.replace('//', '/');
-                const sectHeader = (hit.section_header !== "") ? `<span class="breadcrumb2"> &raquo; <strong>${hit.section_header}</strong></span>` : "";
+                const sectHeader =
+                    hit.section_header !== ''
+                        ? `<span class="breadcrumb2"> &raquo; <strong>${hit.section_header}</strong></span>`
+                        : '';
 
                 return `
                     <li class="ais-Hits-item">
@@ -107,10 +111,10 @@ const renderHits = (renderOptions, isFirstRender) => {
                 `;
             })
             .join('');
-
-        const enhanceApiCategoryHeader = category.toLowerCase() === 'api' && bodyClassContains('api');
+                                      
+        const enhanceCategoryHeader = ['api', 'partners'].includes(category.toLowerCase()) && bodyClassContains(category.toLowerCase());
         const categoryLiClassList = 'ais-Hits-item ais-Hits-category';
-        const categoryParagraphClassList = enhanceApiCategoryHeader ? 'fw-bold text-primary' : '';
+        const categoryParagraphClassList = enhanceCategoryHeader ? 'fw-bold text-primary' : '';
 
         return hitsArray.length
             ? [
@@ -123,19 +127,25 @@ const renderHits = (renderOptions, isFirstRender) => {
     const { widgetParams, hits } = renderOptions;
     const { container, basePathName } = widgetParams;
 
-    const gettingStartedHitsArray = hits.filter((hit) => hit.category.toLowerCase() === 'getting started');
-    const docsHitsArray = hits.filter((hit) => hit.category.toLowerCase() === 'documentation' || hit.category === null);
-    const integrationsHitsArray = hits.filter((hit) => hit.category.toLowerCase() === 'integrations');
-    const guidesHitsArray = hits.filter((hit) => hit.category.toLowerCase() === 'guide');
-    const apiHitsArray = hits.filter((hit) => hit.category.toLowerCase() === 'api');
+    const partnersHitsArray = hits.filter((hit) => hit.type === 'partners');
 
+    const gettingStartedHitsArray = hits.filter((hit) => hit.category?.toLowerCase() === 'getting started');
+    const docsHitsArray = hits.filter(
+        (hit) => hit.category?.toLowerCase() === 'documentation' || hit.category === null
+    );
+    const integrationsHitsArray = hits.filter((hit) => hit.category?.toLowerCase() === 'integrations');
+    const guidesHitsArray = hits.filter((hit) => hit.category?.toLowerCase() === 'guide');
+    const apiHitsArray = hits.filter((hit) => hit.category?.toLowerCase() === 'api');
+
+    // Remove null from array
     const allJoinedListItemsHTML = [
         generateJoinedHits(gettingStartedHitsArray, 'Getting Started'),
         generateJoinedHits(docsHitsArray, 'Documentation'),
-        generateJoinedHits(integrationsHitsArray, 'Integrations'),
         generateJoinedHits(guidesHitsArray, 'Guides'),
+        generateJoinedHits(partnersHitsArray, 'Partners'),
+        generateJoinedHits(integrationsHitsArray, 'Integrations'),
         generateJoinedHits(apiHitsArray, 'API')
-    ];
+    ].filter((item) => item !== null);
 
     // Ensure API results render first if user performs a search from an API page.
     if (bodyClassContains('api')) {

assets/scripts/components/instantsearch/searchpageHits.js

@@ -8,12 +8,13 @@ const renderHits = (renderOptions, isFirstRender) => {
     };
 
     const appendEmptyElements = () => {
-        container.appendChild(aisHits);
+        container?.appendChild(aisHits);
         aisHits.appendChild(aisHitsList);
     };
 
     const addHitsToEmptyElements = () => {
-        container.querySelector('.ais-Hits-list').innerHTML = joinedListItemsHTML;
+        const target = container?.querySelector('.ais-Hits-list');
+        if (target) target.innerHTML = joinedListItemsHTML;
     };
 
     const getTitleHierarchyHTML = (hit) => {