tauri-apps / meilisearch-docsearch Goto Github PK

View Code? Open in Web Editor NEW

88.0 13.0 6.0 671 KB

A quick search component for meilisearch, inspired by algolia/docsearch.

License: Apache License 2.0

HTML 0.91% TypeScript 72.84% CSS 26.25%

meilisearch docsearch search autocomplete docs quicksearch quicksearchbar

meilisearch-docsearch's Introduction

meilisearch-docsearch

A quick search component for meilisearch, inspired by algolia/docsearch.

Screenshots

light	dark

Usage through NPM (Recommended)

Installation

yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch

Javascript

To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:

<div id="docsearch"></div>

Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.

import { docsearch } from "meilisearch-docsearch";
import "meilisearch-docsearch/css";

docsearch({
  container: "#docsearch",
  host: "YOUR_HOST_URL",
  apiKey: "YOUR_SEARCH_API_KEY",
  indexUid: "YOUR_INDEX_UID",
});

Styling

All styles are included in the package as:

One big file:
- ```
import "meilisearch-docsearch/css";
```

Individual small files:

import "meilisearch-docsearch/css/variables";

import "meilisearch-docsearch/css/button";

import "meilisearch-docsearch/css/modal";

SolidJS

If you are using solid-js, you can import DocSearch component directely which generates a fully accessible search box for you.

import { DocSearch } from "meilisearch-docsearch/solid";
import "meilisearch-docsearch/css";

function App() {
  return (
    <DocSearch
      host="YOUR_HOST_URL"
      apiKey="YOUR_SEARCH_API_KEY"
      indexUid="YOUR_INDEX_UID"
    />
  );
}

export default App;

Usage through CDN

The package also contains a browser bundle and the necessary styles that could be pulled through a CDN like unpkg.com:

add a container
```
<div id="docsearch"></div>
```

import the js borwser bundle and initialize the component

<script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script>
<script>
  const { docsearch } = window.__docsearch_meilisearch__;
  docsearch({
    container: "#docsearch",
    host: "YOUR_HOST_URL",
    apiKey: "YOUR_SEARCH_API_KEY",
    indexUid: "YOUR_INDEX_UID",
  });
</script>

import styles

<link
  rel="stylesheet"
  href="https://unpkg.com/meilisearch-docsearch@latest/dist/index.css"
/>

Acknowledgement

This project is inspired by algolia/docsearch and meilisearch/docs-searchbar.js

LICENSE

MIT or MIT/Apache 2.0 where applicable.

meilisearch-docsearch's People

Contributors

Stargazers

Watchers

Forkers

haroenv valderwu3 iammapping codeeditorland ruibaby

meilisearch-docsearch's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

Update pnpm/action-setup action to v2.2.4
Update actions/checkout action to v3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency esbuild-plugin-solid to ^0.5.0

Detected dependencies

github-actions

.github/workflows/audit.yml

actions/checkout v2

pnpm/action-setup v2.2.2

actions/setup-node v3

.github/workflows/change-status-on-PR.yml

actions/checkout v2

.github/workflows/covector-version-or-publish.yml

actions/checkout v2

pnpm/action-setup v2.2.2

actions/setup-node v3

tauri-apps/create-pull-request v3

.github/workflows/test.yml

actions/checkout v2

pnpm/action-setup v2.2.2

actions/setup-node v3

npm

example/package.json

vite ^4.0.0

package.json

meilisearch ^0.30.0

solid-js ^1.6.9

esbuild-plugin-solid ^0.4.2

typescript ^4.9.4

prettier ^2.8.3

tsup ^6.5.0

Check this box to trigger a request for Renovate to run again on this repository

Docusaurus: Module not found: Error: Package path ./js is not exported from package

Hello,

I am trying to implement this Search into Docusaurus.

So far I did:

Create Docusaurus instance
Install Docsearch: npm install meilisearch-docsearch
Swizzle SearchBar component npm run swizzle @docusaurus/theme-classic SearchBar -> Choose Eject Method
Set up component in \docusaurus\src\theme\SearchBar.js

This is how my SearchBar.js code looks like:

import React from 'react';
import { docsearch } from "meilisearch-docsearch/js";
import "meilisearch-docsearch/css";

export default function SearchBarWrapper() {

  docsearch({
    container: "#docsearch",
    host: "https://ms-1c8012be0538-2040.fra.meilisearch.io",
    apiKey: "XXXXXXX",
    indexUid: "docs",
  });

  return (
    <>
      <div id="docsearch"></div>
    </>
  );
}

Unfortunately, I get this error afterwards:

Module not found: Error: Package path ./js is not exported from package ..\docusaurus\node_modules\meilisearch-docsearch (see exports field in ..\docusaurus\node_modules\meilisearch-docsearch\package.json)
client (webpack 5.84.1) compiled with 1 error

When changing the import method to this:

import { docsearch } from "meilisearch-docsearch";

I get this:

Uncaught runtime errors:
ERROR
element is null
render/<@webpack-internal:///./node_modules/solid-js/web/dist/dev.js:185:53
createRoot/updateFn<@webpack-internal:///./node_modules/solid-js/dist/dev.js:237:19
runUpdates@webpack-internal:///./node_modules/solid-js/dist/dev.js:857:17
createRoot@webpack-internal:///./node_modules/solid-js/dist/dev.js:242:12
render@webpack-internal:///./node_modules/solid-js/web/dist/dev.js:183:55
A2@webpack-internal:///./node_modules/meilisearch-docsearch/dist/index.js:9:36694
SearchBarWrapper@webpack-internal:///./src/theme/SearchBar.js:8:93
renderWithHooks@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14985:27
mountIndeterminateComponent@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17811:13
beginWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19049:16
callCallback@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3945:14
invokeGuardedCallbackDev@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3994:16
invokeGuardedCallback@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4056:31
beginWork$1@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23959:28
performUnitOfWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22774:12
workLoopSync@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702:22
renderRootSync@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22665:7
performSyncWorkOnRoot@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22288:18
scheduleUpdateOnFiber@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21876:28
updateContainer@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25477:24
legacyRenderSubtreeIntoContainer/<@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26016:22
unbatchedUpdates@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22426:12
legacyRenderSubtreeIntoContainer@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26015:21
render@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26098:10
@webpack-internal:///./node_modules/@docusaurus/core/lib/client/clientEntry.js:21:176

Maybe somebody can help me on this issue.

Many Thanks in Advance ☺

Create static assets

Thanks for the great repo!

I wish to deploy this web component from a static webpage. Would it be possible to wrap this into a static asset using something like https://webpack.js.org/?

use meilisearch-docusearch in docusaurus project

I would like to use this plugin in my Docusaurus project. However, when I configure the plugin, the following error occurs:
Error: Docusaurus could not load module at path "/Users/bytedance/code/self_learning/my-website/node_modules/meilisearch-docsearch/dist/index.cjs"
Cause: (0 , import_web.template) is not a function
at loadFreshModule (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/utils/lib/moduleUtils.js:36:15)
at normalizePluginConfig (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/plugins/configs.js:44:65)
... 6 lines matching cause stack trace ...
at async Command.start (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/commands/start.js:44:19) {
[cause]: TypeError: (0 , import_web.template) is not a function
at /Users/bytedance/code/self_learning/my-website/node_modules/meilisearch-docsearch/dist/index.cjs:51:53
at evalModule (/Users/bytedance/code/self_learning/my-website/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/Users/bytedance/code/self_learning/my-website/node_modules/jiti/dist/jiti.js:1:254371)
at loadFreshModule (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/utils/lib/moduleUtils.js:33:16)
at normalizePluginConfig (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/plugins/configs.js:44:65)
at /Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/plugins/configs.js:98:60
at Array.map ()
at loadPluginConfigs (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/plugins/configs.js:98:38)
at async initPlugins (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/plugins/init.js:42:27)
at async loadPlugins (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/plugins/index.js:26:21)
at async load (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/server/index.js:76:58)
at async Command.start (/Users/bytedance/code/self_learning/my-website/node_modules/@docusaurus/core/lib/commands/start.js:44:19)
}
If anyone has encountered this before, could you please tell me how to fix it?