Algolia search (#331)

* initial algolia integration * initial algolia integration * upgraded to algolia, indexed docs, and removed vocs indexing * removed chainlistParsing
0xsequence · Oct 9, 2024 · 65ad205 · 65ad205
1 parent 1419ffc
commit 65ad205
Show file tree

Hide file tree

Showing 7 changed files with 366 additions and 6 deletions.
diff --git a/docs/components/DocSearch.tsx b/docs/components/DocSearch.tsx
@@ -0,0 +1,36 @@
+import { Suspense, lazy, useEffect, useState } from 'react'
+import type { DocSearchProps } from '@docsearch/react'
+import '@docsearch/css'
+
+let hydrating = true
+
+export function useHydrated() {
+  const [hydrated, setHydrated] = useState(() => !hydrating)
+  useEffect(() => {
+    hydrating = false
+    setHydrated(true)
+  }, [])
+  return hydrated
+}
+
+const OriginalDocSearch = lazy(() =>
+  import('@docsearch/react').then((module) => ({
+    default: module.DocSearch,
+  })),
+)
+
+export function DocSearch(docSearchProps: DocSearchProps) {
+  const hydrated = useHydrated()
+
+  if (!hydrated) {
+    return <div className="h-9" />
+  }
+
+  return (
+    <Suspense fallback={<div className="h-9" />}>
+      <div className=".DocSearch .DocSearch-Button">
+        <OriginalDocSearch {...docSearchProps} />
+      </div>
+    </Suspense>
+  )
+}
diff --git a/docs/layout.tsx b/docs/layout.tsx
@@ -1,23 +1,31 @@
 import { type ReactElement, useEffect, useState } from 'react'
 import TopNavButton from './components/TopNavButton'
-import { ThemeProvider } from '@0xsequence/design-system'
 import BuilderAuthenticationButton from './components/BuilderAuthenticationButton'
-
+import { DocSearch } from './components/DocSearch'
 import FullScreenLoading from './components/FullScreenLoading'
 
 const Layout = ({ children }: { children: ReactElement | string }) => {
   const [restartedSearch, setRestartedSearch] = useState(false)
+
   useEffect(() => {
     if (localStorage) {
       localStorage.removeItem('filterText')
       setRestartedSearch(true)
     }
   }, [])
 
+  const searchProps = {
+    appId: 'DMWSOFTW3G',
+    apiKey: 'e9c479d9f3bc64c4ba3e848097dceeeb',
+    indexName: 'sequence',
+  }
+
   if (!restartedSearch) return <FullScreenLoading />
 
   return (
     <div>
+      <DocSearch {...searchProps} />
+
       <div className="container mx-auto px-4 flex justify-between items-center">
         <TopNavButton />
         <BuilderAuthenticationButton />

diff --git a/docs/styles.css b/docs/styles.css
@@ -206,6 +206,77 @@
   color: inherit; /* Inherits text color from parent */
 }
 
+.DocSearch-Button {
+  align-items: center;
+  background-color: var(--vocs-color_backgroundDark) !important;
+  border: 1px solid var(--vocs-color_backgroundDark) !important;
+  border-radius: var(--vocs-borderRadius_8) !important;
+  color: var(--vocs-color_text2) !important;
+  display: flex !important;
+  font-size: var(--vocs-fontSize_14) !important;
+  font-weight: var(--vocs-fontWeight_medium) !important;
+  gap: var(--vocs-space_6) !important;
+  height: var(--vocs-space_40) !important;
+  max-width: 15.5rem !important;
+  padding-left: var(--vocs-space_12) !important;
+  padding-right: var(--vocs-space_12) !important;
+  position: fixed !important;
+  width: 100% !important;
+  transition: color 0.1s, border-color 0.1s !important;
+  top: calc(var(--vocs-topNav_height) / 2);
+  transform: translateY(-50%);
+  right: calc(var(--vocs-topNav_horizontalPadding) + 50%);
+  z-index: 40;
+}
+
+@media (max-width: 1400px) {
+  .DocSearch-Button {
+    right: calc(var(--vocs-topNav_horizontalPadding) + 50%);
+  }
+}
+
+@media (max-width: 1200px) {
+  .DocSearch-Button {
+    right: calc(var(--vocs-topNav_horizontalPadding) + 53%);
+    max-width: 170px !important;
+  }
+}
+
+@media (max-width: 1080px) {
+  .DocSearch-Button {
+    max-width: 170px !important;
+    right: calc(var(--vocs-topNav_horizontalPadding));
+  }
+}
+
+@media (max-width: 900px) {
+  .DocSearch-Button {
+    max-width: 170px !important;
+  }
+}
+
+@media (max-width: 780px) {
+  .DocSearch-Button {
+    right: calc(var(--vocs-topNav_horizontalPadding) - 17%);
+    z-index: 1;
+    width: 125px !important;
+  }
+}
+
+.DocSearch-Search-Icon {
+color: var(--vocs-color_text2) !important;
+
+}
+
+
+.vocs_DesktopSearch_search {
+  display: none !important;
+}
+
+.vocs_MobileSearch_searchButton{
+  display: none !important;
+}
+
 table {
   text-align: center;
   width: 100%;
@@ -357,7 +428,6 @@ td {
   z-index: 40;
 }
 
-
 @media only screen and (max-width: 1080px) {
   .top-auth-button_position {
     right: calc(var(--vocs-topNav_horizontalPadding) + 200px);
@@ -370,7 +440,6 @@ td {
   }
 }
 
-
 .top-nav-button_position {
   top: calc(var(--vocs-topNav_height) / 2);
   transform: translateY(-50%);

diff --git a/nav.ts b/nav.ts
@@ -209,7 +209,10 @@ export const sidebar = {
           items: [
             { text: 'Overview', link: '/solutions/wallets/sequence-kit/overview' },
             { text: 'Quickstart', link: '/solutions/wallets/sequence-kit/getting-started' },
-            { text: 'Custom Configuration', link: '/solutions/wallets/sequence-kit/custom-configuration' },
+            {
+              text: 'Custom Configuration',
+              link: '/solutions/wallets/sequence-kit/custom-configuration',
+            },
             { text: 'On-ramp', link: '/solutions/wallets/sequence-kit/on-ramp' },
             { text: 'Checkout', link: '/solutions/wallets/sequence-kit/checkout' },
             {

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "vocs dev",
-    "build": "vocs build --searchIndex false && vocs search-index",
+    "build": "vocs build --searchIndex false",
     "preview": "vocs preview",
     "format": "biome format . --write",
     "lint": "biome lint . --write --unsafe"
@@ -14,6 +14,8 @@
     "@0xsequence/indexer": "^2.0.10",
     "@biomejs/biome": "^1.3.1",
     "@databeat/tracker": "^0.9.1",
+    "@docsearch/css": "3",
+    "@docsearch/react": "3",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@types/react": "latest",