From 97b279a334e7debc06bfea3b283810b3685b683c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Vannicatte?=
<20689156+shortcuts@users.noreply.github.com>
Date: Thu, 25 Nov 2021 10:49:51 +0100
Subject: [PATCH] docs(v3): add missing CSS import (#1187)
---
packages/website/docs/DocSearch-v3.mdx | 47 ++++++++++++++------------
packages/website/docs/styling.md | 7 ++--
2 files changed, 30 insertions(+), 24 deletions(-)
diff --git a/packages/website/docs/DocSearch-v3.mdx b/packages/website/docs/DocSearch-v3.mdx
index ad4df859..cc73219a 100644
--- a/packages/website/docs/DocSearch-v3.mdx
+++ b/packages/website/docs/DocSearch-v3.mdx
@@ -37,14 +37,24 @@ DocSearch packages are available on the [npm][10] registry.
}>
-
```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 `` of your website:
+
+```html
+
+```
+
+And the JavaScript at the end of your ``:
```html
@@ -53,25 +63,33 @@ If you don’t want to use a package manager, you can use a standalone endpoint:
-
```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 `` of your website:
```html
-
+
+```
+
+And the JavaScript at the end of your ``:
+
+```html
+
```
-
-
## Get started
-
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({
-
-
DocSearch generates a fully accessible search box for you.
```jsx App.js
@@ -136,10 +151,8 @@ export default App;
-
-
### 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,
}>
-
```js
docsearch({
appId: 'R2IYF7ETH7',
@@ -165,10 +177,8 @@ docsearch({
-
-
```jsx
-
-
### 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.
}>
-
```js
docsearch({
// ...
@@ -211,10 +218,8 @@ docsearch({
-
-
```jsx
-
-
## Performance optimization
### Preconnect
diff --git a/packages/website/docs/styling.md b/packages/website/docs/styling.md
index a7b94618..7e2e0eef 100644
--- a/packages/website/docs/styling.md
+++ b/packages/website/docs/styling.md
@@ -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
-
+
```
## Files