updated algolia config

Author: jtviolet

docusaurus.config.js

@@ -709,20 +709,68 @@ const config = {
         },
       },
       algolia: {
+        // Your Algolia credentials
         appId: 'KPMSCF6G6J',
-        apiKey: '1b20f30f13a874cd46f9d5c30b01d99c',
-        indexName: 'product_docs',
-        searchPagePath: false,
-        placeholder: 'Search the Netwrix docs',
-        contextualSearch: false,
+        apiKey: '1b20f30f13a874cd46f9d5c30b01d99c', // Use the search-only API key, not the admin key
+        indexName: 'Production Docs',
+
+        // Enable contextual search (already great that you have product/version meta tags!)
+        contextualSearch: true,
+
+        // Search parameters for better results
         searchParameters: {
-          // Define which attributes should be available as facets
-          attributesToRetrieve: ['*'],
-          facets: ['product', 'version'],
+          // Facet filters can be combined with contextual search
+          // These will be merged with the automatic facets from contextual search
+          facetFilters: [
+            // Add any default filters here if needed
+            // e.g., 'type:content' to exclude headers-only results
+          ],
+
+          // Attributes to snippet in search results
+          attributesToSnippet: ['content:20'],
+
+          // Highlight search terms in results
+          highlightPreTag: '<mark>',
+          highlightPostTag: '</mark>',
+
+          // Number of results per page
+          hitsPerPage: 20,
+
+          // Add these for better relevance
+          distinct: true,
+          clickAnalytics: true,
+          analytics: true,
+        },
 
-          // Optional: Set default filters (these will be applied unless user changes them)
-          facetFilters: [],
+        // Enable search insights for better analytics
+        insights: true,
+
+        // Path for the search page (enables full-page search experience)
+        searchPagePath: 'search',
+
+        // Placeholder text for the search box
+        placeholder: 'Search the Netwrix docs...',
+
+        // Transform items before displaying (optional)
+        transformItems: (items) => {
+          return items.map((item) => {
+            // Add product badges or modify display as needed
+            return {
+              ...item,
+              // Example: Add custom badges based on product
+              _highlightResult: {
+                ...item._highlightResult,
+                // Customize highlighted results if needed
+              },
+            };
+          });
         },
+
+        // Replace paths if you're using different deployments
+        // replaceSearchResultPathname: {
+        //   from: '/docs/',
+        //   to: '/',
+        // },
       },
       navbar: {
         logo: {
@@ -754,6 +802,17 @@ const config = {
         darkTheme: prismThemes.dracula,
       },
     }),
+  // Add preconnect for better search performance
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preconnect',
+        href: 'https://KPMSCF6G6J-dsn.algolia.net',
+        crossorigin: 'anonymous',
+      },
+    },
+  ],
   stylesheets: ['https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'],
 };
 

src/css/custom.css

@@ -15,8 +15,7 @@
   --ifm-color-primary-lightest: #4169c4;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-font-family-base:
-    'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+  --ifm-font-family-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -207,3 +206,145 @@ html {
 [data-theme='dark'] img {
   border-color: #3a3a3a;
 }
+
+/* Add this to your /src/css/custom.css file */
+
+/* Algolia DocSearch Custom Styling */
+/* Using CSS variables for better theme integration */
+
+[data-theme='light'] .DocSearch {
+  --docsearch-primary-color: var(--ifm-color-primary);
+  --docsearch-text-color: var(--ifm-font-color-base);
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgba(94, 100, 112, 0.7);
+
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
+
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-color-secondary);
+  --docsearch-searchbox-focus-background: var(--ifm-color-white);
+
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-white);
+
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-color-white);
+}
+
+[data-theme='dark'] .DocSearch {
+  --docsearch-text-color: var(--ifm-font-color-base);
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgba(47, 55, 69, 0.7);
+
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-background-color);
+
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-searchbox-focus-background: var(--ifm-color-black);
+
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-emphasis-100);
+
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-background-surface-color);
+  --docsearch-key-gradient: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
+}
+
+/* Custom enhancements for better UX */
+.DocSearch-Button {
+  /* Make the search button more prominent */
+  margin: 0 12px;
+  padding: 0 16px;
+  font-weight: 500;
+}
+
+/* Highlight product and version info in search results */
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-hierarchy {
+  font-weight: 600;
+}
+
+/* Style the product > version breadcrumb in results */
+.DocSearch-Hit-hierarchy .DocSearch-Hit-lvl0 {
+  color: var(--docsearch-primary-color);
+  font-weight: 600;
+}
+
+/* Add visual separation for different product sections */
+.DocSearch-Hits ul {
+  margin: 0;
+}
+
+/* Improve readability of search snippets */
+.DocSearch-Hit-content {
+  line-height: 1.5;
+  font-size: 0.875rem;
+}
+
+/* Highlight search terms more prominently */
+.DocSearch-Hit-content mark {
+  background-color: var(--ifm-color-primary-lighter);
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+  padding: 0 2px;
+}
+
+/* Add product/version badges if needed */
+.DocSearch-Hit-content-wrapper {
+  position: relative;
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  .DocSearch-Button-Keys {
+    display: none;
+  }
+
+  .DocSearch-Button {
+    padding: 0 12px;
+  }
+}
+
+/* Optional: Add custom icons for different content types */
+.DocSearch-Hit-icon {
+  color: var(--docsearch-muted-color);
+}
+
+/* Style the search page if you're using searchPagePath */
+.search-page {
+  min-height: 70vh;
+  padding: 2rem;
+}
+
+.search-page .DocSearch-Container {
+  position: relative;
+  background: transparent;
+}
+
+/* Add smooth transitions */
+.DocSearch-Hit {
+  transition: background-color 0.2s ease;
+}
+
+/* Custom scrollbar for search results */
+.DocSearch-Dropdown::-webkit-scrollbar {
+  width: 12px;
+}
+
+.DocSearch-Dropdown::-webkit-scrollbar-track {
+  background: var(--docsearch-modal-background);
+}
+
+.DocSearch-Dropdown::-webkit-scrollbar-thumb {
+  background: var(--docsearch-muted-color);
+  border-radius: 6px;
+}
+
+.DocSearch-Dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--docsearch-primary-color);
+}