4aa0c2c67a
* fix: updating the templates page The templates page needs some work. The first thing I saw is that it alluded to being able to create a crawler. As a docsearch user, this is confusing. We automatically create a crawler for the user, additional crawlers get confusing for the user. Provide additional information about updating templates, as we're talking about templates here. Verify the current templates, I see the default one isn't quite right. Given that we use the same template for Docusaurus v2 and v3 combine those. Add the Starlight template. * Combined Docusaurus v2 and v3 templates Its confusing to have two separate sections that are exactly the same * added astro starlight template * remove pkgdown and add starlight pkgdown no longer references Algolia added starlight as an integration partner |
||
|---|---|---|
| .circleci | ||
| .codesandbox | ||
| .github | ||
| cypress | ||
| examples | ||
| packages | ||
| scripts | ||
| .editorconfig | ||
| .env.sample | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .stylelintrc.json | ||
| babel.config.js | ||
| bundlesize.config.json | ||
| CHANGELOG.md | ||
| CODEOWNERS | ||
| CONTRIBUTING.md | ||
| cypress.json | ||
| global.d.ts | ||
| jest.config.js | ||
| lerna.json | ||
| LICENSE | ||
| netlify.toml | ||
| package.json | ||
| README.md | ||
| renovate.json | ||
| rollup.base.config.js | ||
| ship.config.js | ||
| tsconfig.declaration.json | ||
| tsconfig.json | ||
| yarn.lock | ||
The easiest way to add search to your documentation – for free.
DocSearch crawls your documentation, pushes the content to an Algolia index and provides a dropdown search experience on your website.
Preview
| Light | Dark |
|---|---|
 |
 |
Usage
Don't have your Algolia credentials yet? Apply to DocSearch!
JavaScript
Installation
yarn add @docsearch/js@3
# or
npm install @docsearch/js@3
If you don’t want to use a package manager, you can use a standalone endpoint:
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
Get started
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 '@docsearch/js';
import '@docsearch/css';
docsearch({
container: '#docsearch',
appId: 'YOUR_APP_ID',
indexName: 'YOUR_INDEX_NAME',
apiKey: 'YOUR_SEARCH_API_KEY',
});
React
Installation
yarn add @docsearch/react@3
# or
npm install @docsearch/react@3
If you don’t want to use a package manager, you can use a standalone endpoint:
<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@3"></script>
Get started
DocSearch generates a fully accessible search box for you.
import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
function App() {
return (
<DocSearch
appId="YOUR_APP_ID"
indexName="YOUR_INDEX_NAME"
apiKey="YOUR_SEARCH_API_KEY"
/>
);
}
export default App;
Styling
Related projects
DocSearch is made of the following repositories:
- algolia/docsearch: DocSearch source code.
- algolia/docsearch/packages/website: DocSearch website and documentation.
- algolia/docsearch-configs: DocSearch websites configurations that DocSearch powers.
- algolia/docsearch-scraper: DocSearch crawler that extracts data from your documentation.