Add custom page with the searchbar

.eslintignore

@@ -4,3 +4,4 @@ examples
 scripts
 tests/env
 coverage
+playground

package.json

@@ -21,6 +21,7 @@
     "serve": "tsc && node dist/src/server.js",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "playground": "yarn --cwd playground/docusaurus && yarn --cwd playground/docusaurus start",
     "test": "echo \"Error: oops, the actor has no tests yet, sad!\" && exit 1"
   },
   "author": "It's not you it's me",

playground/docusaurus/package.json

@@ -20,6 +20,7 @@
     "@docusaurus/preset-classic": "2.4.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
+    "meilisearch-docsearch": "^0.4.7",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

playground/docusaurus/src/pages/SearchPage.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import 'meilisearch-docsearch/css'
+
+const SearchPage: React.FC = () => {
+  React.useEffect(() => {
+    const docsearch = require('meilisearch-docsearch').default
+    const destroy = docsearch({
+      host: 'http://localhost:7700',
+      apiKey:
+        'masterKey',
+      indexUid: 'scrapix-docusaurus',
+      container: '#docsearch',
+      debug: true
+    })
+
+    return () => destroy()
+  }, [])
+
+  return (
+    <div>
+      <div id="docsearch"></div>
+    </div>
+  )
+}
+
+export default SearchPage

playground/docusaurus/tsconfig.json

@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "jsx": "react"
   }
 }

playground/docusaurus/yarn.lock

@@ -3321,7 +3321,7 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -5072,6 +5072,21 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
+meilisearch-docsearch@^0.4.7:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/meilisearch-docsearch/-/meilisearch-docsearch-0.4.7.tgz#093d212e22dfbb294ac65ed5be015c103e24eb8c"
+  integrity sha512-zZWekKibcWIQ+6F/eK4kr2C2seZcQtS4aDrceerqsj+Qh6luzZSnMwjKAUuYm1xO7KZHDlUrHlutq5py+1OAjw==
+  dependencies:
+    meilisearch "^0.31.0"
+    solid-js "^1.6.9"
+
+meilisearch@^0.31.0:
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/meilisearch/-/meilisearch-0.31.1.tgz#c526274c3cda844e8ee8d9562cbd3febbe1b9508"
+  integrity sha512-ajMieU0e25lLkT+05J0snX0Ycow1UofxIy5sag03flERUbjXq8ouVwkrJkW27JsKftIeDeffRRRr89LasU9+0w==
+  dependencies:
+    cross-fetch "^3.1.5"
+
 memfs@^3.1.2, memfs@^3.4.3:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.5.1.tgz#f0cd1e2bfaef58f6fe09bfb9c2288f07fea099ec"
@@ -6578,6 +6593,11 @@ serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+seroval@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/seroval/-/seroval-0.5.1.tgz#e6d17365cdaaae7e50815c7e0bcd7102facdadf3"
+  integrity sha512-ZfhQVB59hmIauJG5Ydynupy8KHyr5imGNtdDhbZG68Ufh1Ynkv9KOYOAABf71oVbQxJ8VkWnMHAjEHE7fWkH5g==
+
 serve-handler@^6.1.3:
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.5.tgz#a4a0964f5c55c7e37a02a633232b6f0d6f068375"
@@ -6725,6 +6745,14 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+solid-js@^1.6.9:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.7.7.tgz#c8b13ce5429983eae10010e11886432588bb4b5e"
+  integrity sha512-SPdYVke/Z6Za24PBTbULyQYPrhGO1ZbPany76atO2zF2dmYn2pCotbsw1JtlgWnr9dK2JbwPGnA3ODTGPLhZNw==
+  dependencies:
+    csstype "^3.1.0"
+    seroval "^0.5.0"
+
 sort-css-media-queries@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz#7c85e06f79826baabb232f5560e9745d7a78c4ce"

tsconfig.eslint.json

@@ -7,6 +7,7 @@
   },
   "include": [
     "src/**/*.ts",
+    "playground/**/*.tsx",
     ".eslintrc.cjs"
   ]
 }