Merge pull request #3100 from XRPLF/update-site-search

Fix site search: Replace Algolia with Redocly's inbuilt search.

@theme/components/Navbar/AlgoliaSearch.tsx

@@ -1,17 +0,0 @@
-import { DocSearch } from '@docsearch/react';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-
-export function AlgoliaSearch() {
-    const { useL10n } = useThemeHooks()
-    let { lang } = useL10n()
-    return (
-            <DocSearch
-                appId="R39QY3MZC7"
-                indexName="xrpl"
-                apiKey="3431349deec23b0bc3dcd3424beb9a6e"
-                searchParameters={{
-                    facetFilters: ['lang:'+lang],
-                }}
-            />
-    )
-}

@theme/components/Navbar/Navbar.tsx

@@ -4,7 +4,7 @@ import { LanguagePicker } from "@redocly/theme/components/LanguagePicker/Languag
 import { slugify } from "../../helpers";
 import { Link } from "@redocly/theme/components/Link/Link";
 import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
-import { AlgoliaSearch } from "./AlgoliaSearch";
+import { Search } from "@redocly/theme/components/Search/Search";
 import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
 
 // @ts-ignore
@@ -139,7 +139,7 @@ export function Navbar(props) {
           <NavItems>
             {navItems}
             <div id="topnav-search" className="nav-item search">
-              <AlgoliaSearch />
+              <Search className="topnav-search"/>
             </div>
             <div id="topnav-language" className="nav-item">
               <LanguagePicker

package.json

@@ -14,7 +14,6 @@
   "dependencies": {
     "@codemirror/state": "6.5.2",
     "@codemirror/view": "^6.22.2",
-    "@docsearch/react": "^3.8.0",
     "@lezer/highlight": "^1.2.0",
     "@redocly/realm": "0.120.2",
     "@uiw/codemirror-themes": "4.21.21",

redocly.yaml

@@ -23,6 +23,21 @@ responseHeaders:
   '/@l10n/es-ES/**':     
     - name: X-Robots-Tag
       value: noindex
+search:
+  engine: typesense
+  ai: 
+    hide: true
+  filters: 
+    hide: true    
+metadataGlobs:
+  'docs/**':
+    redocly_category: Documentation
+  'blog/**':
+    redocly_category: Blog
+  'resources/**':
+    redocly_category: Resources    
+  'community/**':
+    redocly_category: Community    
 seo:
   siteUrl: https://xrpl.org/
 rbac:
@@ -62,8 +77,6 @@ links:
     rel: stylesheet
   - href: https://www.unpkg.com/@xrpl/ai-css/xrplai.css
     rel: stylesheet
-  - href: https://cdn.jsdelivr.net/npm/@docsearch/css@3
-    rel: stylesheet
 
 logo:
   srcSet: ./static/img/XRPLedger_DevPortal-black.svg light ./static/img/XRPLedger_DevPortal-white.svg dark

styles/_forms.scss

@@ -30,6 +30,13 @@
   z-index: 1100 !important;
 }
 
+.xrp-ledger-dev-portal {
+  .DocSearch-Modal {
+    top: 85px;
+    background-color: #232325;
+    box-shadow: none;
+  }
+}
 // Algolia Search results --------------------------------------------------
 html {
   // The extra specificity makes this override the default Algolia styles.

styles/_top-banner.scss

@@ -6,7 +6,7 @@
   background: #32E685 !important;
   padding: 7px 35px;
   font-family: "Space Grotesk";
-  z-index: 9999;
+  z-index: 10;
   cursor: pointer;
   
   &:hover {

styles/_top-nav.scss

@@ -144,6 +144,7 @@ $banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
   }
 
   #topnav-search {
+    flex-grow: 1;
     .input-group {
       flex-grow: 1;
       flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
@@ -315,7 +316,7 @@ $banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
 
     @include media-breakpoint-up(xl) {
       #topnav-search {
-        margin-left: auto;
+        margin-left: 3.5rem;
         margin-right: 0.5rem;
       }
       #topnav-language {

styles/_xrplai.scss

@@ -27,3 +27,6 @@ html.light .MarkpromptContentDialog h3:not(.chip) {
 .MarkpromptOverlay {
   z-index: 20;
 }
+.MarkpromptContentDialog{
+  z-index: 10000;
+}

styles/light/_light-theme.scss

@@ -1340,7 +1340,7 @@ main article .card-grid {
   }
 }
 
-/* Search styles */
+/* Algolia Search styles
 
 .algolia-autocomplete .ds-dropdown-menu::before {
   background-color: $gray-100;
@@ -1352,3 +1352,4 @@ main article .card-grid {
 .DocSearch-Modal {
   box-shadow: $light-box-shadow;  
 }
+ */