nikon/docsearch
1
0
Fork 0
Code Activity Actions

docs(v3): add missing CSS import (#1187)

Browse source
This commit is contained in:
Clément Vannicatte 2021-11-25 10:49:51 +01:00 committed by GitHub
parent fe9b7d7d2d
commit 97b279a334
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/website/docs/DocSearch-v3.mdx
View file

@ -37,14 +37,24 @@ DocSearch packages are available on the [npm][10] registry.
}>
<TabItem value="js">
```bash
yarn add @docsearch/js@alpha
# or
npm install @docsearch/js@alpha
```
If you don’t want to use a package manager, you can use a standalone endpoint:
### Without package manager
If you don't want to use a package manger, you can add the CSS to the `<head>` of your website:
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
```
And the JavaScript at the end of your `<body>`:
```html
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
@ -53,25 +63,33 @@ If you don’t want to use a package manager, you can use a standalone endpoint:
</TabItem>
<TabItem value="react">
```bash
yarn add @docsearch/react@alpha
# or
npm install @docsearch/react@alpha
```
If you don’t want to use a package manager, you can use a standalone endpoint:
### Without package manager
If you don't want to use a package manger, you can add the CSS to the `<head>` of your website:
```html
<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@alpha"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
```
And the JavaScript at the end of your `<body>`:
```html
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
```
</TabItem>
</Tabs>
## Get started
<Tabs
@ -84,7 +102,6 @@ If you don’t want to use a package manager, you can use a standalone endpoint:
}>
<TabItem value="js">
To get started, you need a [`container`][11] for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:
```html
@ -110,10 +127,8 @@ docsearch({
</TabItem>
<TabItem value="react">
DocSearch generates a fully accessible search box for you.
```jsx App.js
@ -136,10 +151,8 @@ export default App;
</TabItem>
</Tabs>
### Testing
If you're eager to test DocSearch v3 and can't wait to receive your credentails, you can use ours!
@ -154,7 +167,6 @@ If you're eager to test DocSearch v3 and can't wait to receive your credentails,
}>
<TabItem value="js">
```js
docsearch({
appId: 'R2IYF7ETH7',
@ -165,10 +177,8 @@ docsearch({
</TabItem>
<TabItem value="react">
```jsx
<DocSearch
appId="R2IYF7ETH7"
@ -179,10 +189,8 @@ docsearch({
</TabItem>
</Tabs>
### Filtering your search
If your website supports [DocSearch meta tags][13] or if you've added [custom variables to your config][14], you'll be able to use the [`facetFilters`][16] option to scope your search results to a [`facet`][15]
@ -199,7 +207,6 @@ This is useful to limit the scope of the search to one language or one version.
}>
<TabItem value="js">
```js
docsearch({
// ...
@ -211,10 +218,8 @@ docsearch({
</TabItem>
<TabItem value="react">
```jsx
<DocSearch
// ...
@ -226,10 +231,8 @@ docsearch({
</TabItem>
</Tabs>
## Performance optimization
### Preconnect

7
packages/website/docs/styling.md
View file

@ -20,7 +20,7 @@ DocSearch v3 comes with a theme package called `@docsearch/css`, which offers a
:::note
You don't need to install this package if you already have [`@docsearch/js`][1] or [`@docsearch/react`][1] installed!
This package is a dependency of [`@docsearch/js`][1] and [`@docsearch/react`][1], you don't need to install it if you are using a package manager!
:::
@ -35,7 +35,10 @@ npm install @docsearch/css@alpha
If you don’t want to use a package manager, you can use a standalone endpoint:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
```
## Files