chore: fix website search plugins

fix #4050

pnpm-lock.yaml

@@ -2175,9 +2175,6 @@ importers:
       '@emotion/styled':
         specifier: 11.10.6
         version: 11.10.6(@emotion/react@11.10.6)(@types/react@18.0.26)(react@17.0.2)
-      '@lyrasearch/lyra':
-        specifier: 0.3.0
-        version: 0.3.0
       '@mdx-js/react':
         specifier: ^1.6.22
         version: 1.6.22(react@17.0.2)
@@ -2190,6 +2187,9 @@ importers:
       '@mui/styles':
         specifier: 5.13.7
         version: 5.13.7(@types/react@18.0.26)(react@17.0.2)
+      '@orama/orama':
+        specifier: 1.2.1
+        version: 1.2.1
       '@verdaccio/ui-components':
         specifier: workspace:3.0.0-next.1
         version: link:../packages/ui-components
@@ -8495,11 +8495,6 @@ packages:
   /@leichtgewicht/ip-codec@2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
 
-  /@lyrasearch/lyra@0.3.0:
-    resolution: {integrity: sha512-HKACmENyo4EKloPWQawqX7lKt+qh8w+7r/orNtwzWZ67fJcw59pDd5IwzYw52S9oFg9Dablsw8cuJXk2vNvHkQ==}
-    deprecated: Lyra is now called Orama! Install the latest stable version via the @orama/orama package
-    dev: false
-
   /@manypkg/find-root@1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
@@ -9254,7 +9249,6 @@ packages:
   /@orama/orama@1.2.1:
     resolution: {integrity: sha512-vq3ar9REofq7Q87riamQB5y1aJc068Qwbnd7uAboeSfRTDj2+KdNiwjTEk01SVjr8eAvCx8iRZl4rkEYo0ETYw==}
     engines: {node: '>= 16.0.0'}
-    dev: true
 
   /@pmmmwh/react-refresh-webpack-plugin@0.5.10(@types/webpack@5.28.1)(react-refresh@0.11.0)(webpack@5.82.1):
     resolution: {integrity: sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==}

website/package.json

@@ -35,7 +35,7 @@
     "@emotion/jest": "11.10.5",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@lyrasearch/lyra": "0.3.0",
+    "@orama/orama": "1.2.1",
     "@mdx-js/react": "^1.6.22",
     "@mui/icons-material": "5.13.7",
     "@mui/material": "5.13.7",

website/src/components/EcosystemSearch/ToolList.tsx

@@ -1,8 +1,8 @@
 import Translate, { translate } from '@docusaurus/Translate';
-import { create, insertBatch, search } from '@lyrasearch/lyra';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/styles';
+import { Orama, ProvidedTypes, create, insertMultiple, search } from '@orama/orama';
 import * as React from 'react';
 import { useState } from 'react';
 import { useEffect } from 'react';
@@ -16,19 +16,6 @@ type Props = {
   filters: Filters;
 };
 
-const db = create({
-  schema: {
-    name: 'string',
-    url: 'string',
-    category: 'string',
-    bundled: 'boolean',
-    origin: 'string',
-    latest: 'string',
-    downloads: 'number',
-    description: 'string',
-  },
-});
-
 const normalizeResults = (hits) => {
   return hits.reduce((acc, item) => {
     acc.push(item.document);
@@ -58,15 +45,35 @@ const filterByProperty = (addsOns: Addon[], filters: Filters) => {
 
 const ToolList: FC<Props> = ({ addons = [], filters }): React.ReactElement => {
   const theme = useTheme();
+  const [db, setDb] = useState<Orama<ProvidedTypes>>();
   const [filteredAddsOn, setFilteredAddsOn] = useState(addons);
   useEffect(() => {
-    insertBatch(db, addons);
+    const createDb = async () => {
+      const db = await create({
+        schema: {
+          name: 'string',
+          url: 'string',
+          category: 'string',
+          bundled: 'boolean',
+          origin: 'string',
+          latest: 'string',
+          downloads: 'number',
+          description: 'string',
+        },
+      });
+      console.log('===>', db);
+      setDb(db);
+      insertMultiple(db as Orama<ProvidedTypes>, addons);
+    };
+
+    createDb();
   }, []);
 
   useEffect(() => {
+    const searchKeyword = async () => {
       let results: Addon[] = addons;
       if (filters.keyword !== '') {
-      const dbResults = search(db, {
+        const dbResults = await search(db as Orama<ProvidedTypes>, {
           term: filters.keyword,
         });
         results = [...normalizeResults(dbResults.hits)];
@@ -74,6 +81,8 @@ const ToolList: FC<Props> = ({ addons = [], filters }): React.ReactElement => {
       // TODO: apply advanced filters later
       // setFilteredAddsOn(filterByProperty(results, filters));
       setFilteredAddsOn(results);
+    };
+    searchKeyword();
   }, [filters, addons]);
 
   return (