feat(website): new documentation (#1048)

README.md

@@ -4,8 +4,8 @@
 
 The easiest way to add search to your documentation – for free.
 
-[![npm version](https://img.shields.io/npm/v/@docsearch/js/alpha.svg?style=flat-square)](https://www.npmjs.com/package/@docsearch/js/v/alpha) [![License](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](./LICENSE)
-  
+[![Netlify Status](https://api.netlify.com/api/v1/badges/30eacc09-d4b2-4a53-879b-04d40aaea454/deploy-status)](https://app.netlify.com/sites/docsearch/deploys) [![npm version](https://img.shields.io/npm/v/@docsearch/js/alpha.svg?style=flat-square)](https://www.npmjs.com/package/@docsearch/js/v/alpha) [![License](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](./LICENSE)
+
 <p align="center">
   <strong>
   <a href="https://docsearch.algolia.com">Documentation</a> •
@@ -32,42 +32,95 @@ DocSearch crawls your documentation, pushes the content to an Algolia index and
 
 > Don't have your Algolia credentials yet? [Apply to DocSearch](https://docsearch.algolia.com/apply)!
 
-**1.** Import the library as an ECMAScript module:
+### JavaScript
+
+#### Installation
 
 ```sh
-npm install @docsearch/js@alpha
-# or
 yarn add @docsearch/js@alpha
+# or
+npm install @docsearch/js@alpha
 ```
 
-```js
-import docsearch from '@docsearch/js';
+If you don’t want to use a package manager, you can use a standalone endpoint:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
 ```
 
-**1–bis.** Or with a script tag (at the end of the `body`):
+#### Get started
+
+To get started, you need a [`container`](https://docsearch.algolia.com/docs/api#container) for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+<div id="docsearch"></div>
 ```
 
-**2.** Use the library:
+Then, insert DocSearch into it by calling the [`docsearch`](https://docsearch.algolia.com/docs/api) 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).
+
+Make sure to provide a [`container`](https://docsearch.algolia.com/docs/api#container) (for example, a `div`), not an `input`. DocSearch generates a fully accessible search box for you.
+
+```js app.js
+import docsearch from '@docsearch/js';
+
+import '@docsearch/css';
 
-```js
 docsearch({
   container: '#docsearch',
+  appId: 'YOUR_APP_ID',
   indexName: 'YOUR_INDEX_NAME',
-  apiKey: 'YOUR_API_KEY',
+  apiKey: 'YOUR_SEARCH_API_KEY',
 });
 ```
 
-**3.** [Customize the color scheme](https://docsearch.algolia.com/docs/styling/).
+### React
+
+#### Installation
+
+```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:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@alpha"></script>
+```
+
+#### Get started
+
+DocSearch generates a fully accessible search box for you.
+
+```jsx App.js
+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
+
+[Read documentation →](https://docsearch.algolia.com/docs/styling)
 
 ## Related projects
 
 DocSearch is made of the following repositories:
 
 - **[algolia/docsearch](https://github.com/algolia/docsearch)**: DocSearch source code.
-- **[algolia/docsearch-website](https://github.com/algolia/docsearch-website)**: DocSearch website and documentation.
+- **[algolia/docsearch/packages/website](https://github.com/algolia/docsearch/tree/next/packages/website)**: DocSearch website and documentation.
 - **[algolia/docsearch-configs](https://github.com/algolia/docsearch-configs)**: DocSearch websites configurations that DocSearch powers.
 - **[algolia/docsearch-scraper](https://github.com/algolia/docsearch-scraper)**: DocSearch crawler that extracts data from your documentation.
 

package.json

@@ -16,7 +16,7 @@
     "build:types": "lerna run build:types --scope @docsearch/*",
     "build:umd": "lerna run build:umd --scope @docsearch/*",
     "build": "lerna run build --scope @docsearch/*",
-    "cy:clean": "rimraf cypress/screenshots",
+    "cy:clean": "rm -rf cypress/screenshots",
     "cy:info": "cypress info",
     "cy:record": "percy exec -- cypress run --spec 'cypress/integration/**/*' --headless --record",
     "cy:run:chrome": "yarn run cy:run --browser chrome",
@@ -84,7 +84,6 @@
     "prettier": "2.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rimraf": "3.0.2",
     "rollup": "1.31.0",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",

packages/docsearch-css/README.md

@@ -4,14 +4,24 @@ Style package for [DocSearch](http://docsearch.algolia.com/), the best search ex
 
 ## Installation
 
-In a JavaScript environment:
-
-```sh
+```bash
 yarn add @docsearch/css@alpha
 # or
 npm install @docsearch/css@alpha
 ```
 
+If you don’t want to use a package manager, you can use a standalone endpoint:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"></script>
+```
+
+## Get started
+
+```js
+import '@docsearch/css';
+```
+
 ## Documentation
 
-[Read documentation →](https://autocomplete-experimental.netlify.app/docs/docsearch-css)
+[Read documentation →](https://docsearch.algolia.com/docs/styling)

packages/docsearch-css/package.json

@@ -16,7 +16,7 @@
   "unpkg": "dist/style.css",
   "jsdelivr": "dist/style.css",
   "scripts": {
-    "build:clean": "rimraf ./dist",
+    "build:clean": "rm -rf ./dist",
     "build:css": "node build-css.js",
     "build": "yarn build:clean && mkdir dist && yarn build:css",
     "prepare": "yarn build",

packages/docsearch-js/README.md

@@ -10,6 +10,37 @@ yarn add @docsearch/js@alpha
 npm install @docsearch/js@alpha
 ```
 
+## Get started
+
+If you don’t want to use a package manager, you can use a standalone endpoint:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+```
+
+To get started, you need a [`container`](https://docsearch.algolia.com/docs/api#container) for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:
+
+```html
+<div id="docsearch"></div>
+```
+
+Then, insert DocSearch into it by calling the [`docsearch`](https://docsearch.algolia.com/docs/api) 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).
+
+Make sure to provide a [`container`](https://docsearch.algolia.com/docs/api#container) (for example, a `div`), not an `input`. DocSearch generates a fully accessible search box for you.
+
+```js app.js
+import docsearch from '@docsearch/js';
+
+import '@docsearch/css';
+
+docsearch({
+  container: '#docsearch',
+  appId: 'YOUR_APP_ID',
+  indexName: 'YOUR_INDEX_NAME',
+  apiKey: 'YOUR_SEARCH_API_KEY',
+});
+```
+
 ## Documentation
 
-[Read documentation →](https://autocomplete-experimental.netlify.app/docs/docsearch-js)
+[Read documentation →](https://docsearch.algolia.com/docs/DocSearch-v3)

packages/docsearch-js/package.json

@@ -21,7 +21,7 @@
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
   "scripts": {
-    "build:clean": "rimraf ./dist",
+    "build:clean": "rm -rf ./dist",
     "build:esm": "cross-env BUILD=esm rollup --config",
     "build:types": "tsc -p ./tsconfig.declaration.json --outFile ./dist/esm/index.d.ts",
     "build:umd": "cross-env BUILD=umd rollup --config",

packages/docsearch-react/README.md

@@ -2,16 +2,42 @@
 
 React package for [DocSearch](http://docsearch.algolia.com/), the best search experience for docs.
 
-[![Percy](https://percy.io/static/images/percy-badge.svg)](https://percy.io/DX/DocSearch)
-
 ## Installation
 
-```sh
+```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:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@alpha"></script>
+```
+
+## Get started
+
+DocSearch generates a fully accessible search box for you.
+
+```jsx App.js
+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;
+```
+
 ## Documentation
 
-[Read documentation →](https://autocomplete-experimental.netlify.app/docs/DocSearch)
+[Read documentation →](https://docsearch.algolia.com/docs/DocSearch-v3)

packages/website/.gitignore

@@ -1,14 +1,14 @@
-# dependencies
-node_modules/
+# Dependencies
+/node_modules
 
-# production
-build/
+# Production
+/build
 
-# generated files
+# Generated files
 .docusaurus
 .cache-loader
 
-# misc
+# Misc
 .DS_Store
 .env.local
 .env.development.local
@@ -18,13 +18,3 @@ build/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# legacy
-coverage/
-dist/
-.idea/
-.vscode/
-dist-es5-module/
-tmp
-docs/.textlintcache
-.netlify