{"id":13722275,"url":"https://github.com/tauri-apps/meilisearch-docsearch","last_synced_at":"2025-04-05T21:09:29.586Z","repository":{"id":65742032,"uuid":"594897696","full_name":"tauri-apps/meilisearch-docsearch","owner":"tauri-apps","description":"A quick search component for meilisearch, inspired by algolia/docsearch.","archived":false,"fork":false,"pushed_at":"2024-10-28T14:37:55.000Z","size":688,"stargazers_count":103,"open_issues_count":6,"forks_count":7,"subscribers_count":12,"default_branch":"dev","last_synced_at":"2024-10-29T15:44:10.671Z","etag":null,"topics":["autocomplete","docs","docsearch","meilisearch","quicksearch","quicksearchbar","search"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tauri-apps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE_APACHE-2.0","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-30T00:11:12.000Z","updated_at":"2024-10-25T12:33:16.000Z","dependencies_parsed_at":"2024-01-15T18:54:31.246Z","dependency_job_id":"7de02eaf-5eb2-45e5-8ca7-d7dd3821988d","html_url":"https://github.com/tauri-apps/meilisearch-docsearch","commit_stats":{"total_commits":180,"total_committers":10,"mean_commits":18.0,"dds":"0.38888888888888884","last_synced_commit":"7fa439d13c42f1f753d86955bb95063c1baf740b"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tauri-apps%2Fmeilisearch-docsearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tauri-apps%2Fmeilisearch-docsearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tauri-apps%2Fmeilisearch-docsearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tauri-apps%2Fmeilisearch-docsearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tauri-apps","download_url":"https://codeload.github.com/tauri-apps/meilisearch-docsearch/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246748656,"owners_count":20827360,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","docs","docsearch","meilisearch","quicksearch","quicksearchbar","search"],"created_at":"2024-08-03T01:01:26.756Z","updated_at":"2025-04-05T21:09:29.566Z","avatar_url":"https://github.com/tauri-apps.png","language":"TypeScript","funding_links":[],"categories":["Tools"],"sub_categories":["Community Tools"],"readme":"# meilisearch-docsearch\n\nA quick search component for meilisearch, inspired by algolia/docsearch.\n\n# Screenshots\n\n| light                                                                                              | dark                                                                                             |\n| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| ![light](https://github.com/tauri-apps/meilisearch-docsearch/raw/dev/.github/screenshot-light.png) | ![dark](https://github.com/tauri-apps/meilisearch-docsearch/raw/dev/.github/screenshot-dark.png) |\n\n# Usage through NPM (Recommended)\n\n### Installation\n\n```sh\nyarn add meilisearch-docsearch\n# or\nnpm install meilisearch-docsearch\n# or\npnpm add meilisearch-docsearch\n```\n\n### Javascript\n\nTo 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:\n\n```html\n\u003cdiv id=\"docsearch\"\u003e\u003c/div\u003e\n```\n\nThen, insert `DocSearch` into it by calling the `docsearch` function and providing the container. It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/web/css/css_selectors) or an [Element](https://developer.mozilla.org/en-us/docs/web/api/htmlelement).\n\nMake sure to provide a `container` (for example, a `div`), not an `input`. `DocSearch` generates a fully accessible search box for you.\n\n```js\nimport { docsearch } from \"meilisearch-docsearch\";\nimport \"meilisearch-docsearch/css\";\n\ndocsearch({\n  container: \"#docsearch\",\n  host: \"YOUR_HOST_URL\",\n  apiKey: \"YOUR_SEARCH_API_KEY\",\n  indexUid: \"YOUR_INDEX_UID\",\n});\n```\n\n### Styling\n\nAll styles are included in the package as:\n\n- One big file:\n  - ```js\n    import \"meilisearch-docsearch/css\";\n    ```\n- Individual small files:\n  - ```js\n    import \"meilisearch-docsearch/css/variables\";\n    ```\n  - ```js\n    import \"meilisearch-docsearch/css/button\";\n    ```\n  - ```js\n    import \"meilisearch-docsearch/css/modal\";\n    ```\n\n## SolidJS\n\nIf you are using `solid-js`, you can import `DocSearch` component directely which generates a fully accessible search box for you.\n\n```js\nimport { DocSearch } from \"meilisearch-docsearch/solid\";\nimport \"meilisearch-docsearch/css\";\n\nfunction App() {\n  return (\n    \u003cDocSearch\n      host=\"YOUR_HOST_URL\"\n      apiKey=\"YOUR_SEARCH_API_KEY\"\n      indexUid=\"YOUR_INDEX_UID\"\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\n# Usage through CDN\n\nThe package also contains a browser bundle and the necessary styles that could be pulled through a CDN like unpkg.com:\n\n1. add a container\n\n   ```html\n   \u003cdiv id=\"docsearch\"\u003e\u003c/div\u003e\n   ```\n\n2. import the js borwser bundle and initialize the component\n\n   ```html\n   \u003cscript src=\"https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js\"\u003e\u003c/script\u003e\n   \u003cscript\u003e\n     const { docsearch } = window.__docsearch_meilisearch__;\n     docsearch({\n       container: \"#docsearch\",\n       host: \"YOUR_HOST_URL\",\n       apiKey: \"YOUR_SEARCH_API_KEY\",\n       indexUid: \"YOUR_INDEX_UID\",\n     });\n   \u003c/script\u003e\n   ```\n\n   alternatively you can import the ESM module when using `\u003cscript type=\"module\"\u003e`\n\n   ```html\n   \u003cscript type=\"module\" async\u003e\n     import { docsearch } from \"https://unpkg.com/meilisearch-docsearch@latest/dist/index.bundled.esm.js\";\n     docsearch({\n       container: \"#docsearch\",\n       host: \"YOUR_HOST_URL\",\n       apiKey: \"YOUR_SEARCH_API_KEY\",\n       indexUid: \"YOUR_INDEX_UID\",\n     });\n   \u003c/script\u003e\n   ```\n\n3. import styles\n\n   ```html\n   \u003clink\n     rel=\"stylesheet\"\n     href=\"https://unpkg.com/meilisearch-docsearch@latest/dist/index.css\"\n   /\u003e\n   ```\n\n# Acknowledgement\n\nThis project is inspired by [`algolia/docsearch`](https://github.com/algolia/docsearch/) and [`meilisearch/docs-searchbar.js`](https://github.com/meilisearch/docs-searchbar.js/)\n\n# LICENSE\n\nMIT or MIT/Apache 2.0 where applicable.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftauri-apps%2Fmeilisearch-docsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftauri-apps%2Fmeilisearch-docsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftauri-apps%2Fmeilisearch-docsearch/lists"}