Skip to content

Commit

Permalink
feat: migrate to autocomplete.js v1 [BREAKING CHANGES] (#135)
Browse files Browse the repository at this point in the history
Co-authored-by: Sylvain Bellone <[email protected]>
  • Loading branch information
Samuel Bodin and sbellone authored Dec 8, 2020
1 parent e689c33 commit 1f93199
Show file tree
Hide file tree
Showing 23 changed files with 526 additions and 484 deletions.
3 changes: 3 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ module.exports = {
'algolia/func-style-toplevel': 'error',

'no-console': 'off',
'no-continue': 'off',
'no-loop-func': 'off',
'consistent-return': 'off',
'@typescript-eslint/no-unused-vars': 'warn',

'@typescript-eslint/explicit-member-accessibility': [
'error',
Expand Down
10 changes: 4 additions & 6 deletions docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,23 +77,21 @@ You can find an HTML code snippet in the [Crawler Admin Console](https://crawler
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.css"
href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script>
algoliasearchNetlify({
appId: '<YOUR_ALGOLIA_APP_ID>',
apiKey: '<YOUR_ALGOLIA_API_KEY>',
siteId: '<YOUR_NETLIFY_SITE_ID>',
branch: '<YOUR_TARGET_GIT_BRANCH>',
autocomplete: {
inputSelector: 'input[type=search]',
},
selector: 'div#search',
});
</script>
```

This code automatically adds a search autocomplete widget on your website on all `<input type="search" />` tags, using your newly created Algolia index.
This code automatically creates a new input in the specified `selector` with a ready to use autocomplete, using your newly created Algolia index.
Please refer to the [full documentation](https://github.com/algolia/algoliasearch-netlify/tree/master/frontend) to configure this front-end plugin.

<img src="/docs/screenshots/frontend.png?raw=true" alt="Autocomplete preview">
Expand Down
Binary file added docs/screenshots/frontend/dark-theme.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/screenshots/frontend/normal-theme.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions frontend/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Contributing

## Scripts

- `yarn dev`: run dev environment
- `yarn release`: build & publish the library

## Development

From this folder:

```sh
yarn dev
```

Or from the root of the repository:

```sh
yarn dev:frontend
```

This runs a `webpack-dev-server` on port 9100.
Meant to be used in conjunction with the [test website](../public/).
65 changes: 37 additions & 28 deletions frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@

`algoliasearch-netlify-frontend` is the front-end bundle we recommend to use with our Netlify plugin.
It's designed to be compatible with the index structure extracted by the [plugin](../plugin).
It enhances existing search inputs in your website with an autocomplete menu providing search as you type results.
It **creates a new search input** in your website with an autocomplete menu providing search as you type results.

## Usage

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script type="text/javascript">
algoliasearchNetlify({
appId: '<YOUR_ALGOLIA_APP_ID>',
apiKey: '<YOUR_ALGOLIA_API_KEY>',
siteId: '<YOUR_NETLIFY_SITE_ID>',
branch: '<YOUR_TARGET_GIT_BRANCH>',
autocomplete: {
inputSelector: 'input[type=search]',
},
selector: 'div#search',
});
</script>
```

<p align="center">
<img src="/docs/screenshots/frontend/normal-theme.png?raw=true" alt="Frontend plugin light theme" width="600px">
</p>

## Available options

Here's the full list of options with their default value.
Expand All @@ -33,17 +35,22 @@ algoliasearchNetlify({
apiKey: '<YOUR_ALGOLIA_API_KEY>', // Search api key (Can be found in https://www.algolia.com/api-keys)
siteId: '<YOUR_NETLIFY_SITE_ID>', // Netlify Site ID (Can be found in https://crawler.algolia.com/admin/netlify)
branch: '<YOUR_TARGET_GIT_BRANCH>', // Target git branch, either a fixed one (e.g. 'master') or a dynamic one using `process.env.HEAD`. See "Using Multiple branches" in this doc.
selector: 'div#search', // Where the autocomplete will be spawned (should not be an input)

// Optional
analytics: true, // Enable search analytics
autocomplete: {
hitsPerPage: 5, // Amount of results to display
inputSelector: 'input[type=search]', // CSS selector of your search input(s)
},
color: '#3c4fe0', // Main color
debug: false, // Debug mode (keeps the autocomplete open)
silenceWarnings: false, // Disable warnings (e.g. no search input found)
hitsPerPage: 5, // Amount of results to display
poweredBy: true, // Controls displaying the logo (mandatory with our FREE plan)
placeholder: 'Search...'; // Input placeholder
openOnFocus: true; // Open search panel with default search, when focusing input

// Theme
theme: {
mark: '#fff', // Color of the matching content
background: '#23263b', // Background Color of the input and the panel
selected: '#111432', // Background Color of the selected item
text: '#d6d6e7' // Color of the title of the items
}
});
```

Expand All @@ -70,24 +77,26 @@ algoliasearchNetlify({
});
```

## Scripts

- `yarn dev`: run dev environment
- `yarn release`: build & publish the library
## Theme

## Development
You can theme the input and the autocomplete by using the `theme` property.

From this folder:

```sh
yarn dev
```js
// Example of dark theme:
{
theme: {
mark: '#fff',
background: '#23263b',
selected: '#111432',
text: '#d6d6e7'
}
}
```

Or from the root of the repository:
<img src="/docs/screenshots/frontend/dark-theme.png?raw=true" alt="Dark theme" width="500px">

```sh
yarn dev:frontend
```
To go further you should take a look at the [autocomplete.js documentation](https://algolia-autocomplete.netlify.app/), or implement your own search with [InstantSearch.js](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).

## Development & Release

This runs a `webpack-dev-server` on port 9100.
Meant to be used in conjunction with the [test website](../public/).
See [CONTRIBUTING.md](./CONTRIBUTING.md).
7 changes: 4 additions & 3 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@
"postinstall": "[ -d dist/ ] || npm run build"
},
"devDependencies": {
"@algolia/autocomplete-js": "1.0.0-alpha.35",
"@algolia/autocomplete-preset-algolia": "1.0.0-alpha.29",
"@algolia/transporter": "4.6.0",
"@babel/core": "7.12.9",
"@babel/preset-env": "7.12.7",
"algoliasearch": "4.6.0",
"autocomplete.js": "0.38.0",
"babel-loader": "8.2.2",
"clean-webpack-plugin": "3.0.0",
"core-js": "3.8.0",
Expand All @@ -37,9 +38,9 @@
"sass-loader": "10.1.0",
"terser-webpack-plugin": "4.2.3",
"ts-loader": "8.0.11",
"webpack": "4.44.2",
"webpack-cli": "4.2.0",
"webpack-dev-server": "3.11.0"
"webpack-dev-server": "3.11.0",
"webpack": "4.44.2"
},
"keywords": [
"algolia",
Expand Down
87 changes: 36 additions & 51 deletions frontend/src/AlgoliasearchNetlify.ts
Original file line number Diff line number Diff line change
@@ -1,66 +1,51 @@
import { AutocompleteWrapper } from './AutocompleteWrapper';
import { Options } from './options';
import type { Options } from './types';

const defaultOptions: Omit<
Options,
'appId' | 'apiKey' | 'indexName' | 'siteId' | 'branch'
'appId' | 'apiKey' | 'selector' | 'siteId' | 'branch'
> = {
analytics: true,
autocomplete: {
hitsPerPage: 5,
inputSelector: 'input[type=search]',
},
color: '#3c4fe0',
hitsPerPage: 5,
debug: false,
silenceWarnings: false,
poweredBy: true,
placeholder: 'Search...',
openOnFocus: false,
};

class AlgoliasearchNetlify {
static instances: AlgoliasearchNetlify[];

search: AutocompleteWrapper;

constructor(_options: Options) {
AlgoliasearchNetlify.instances.push(this);

// Temporary
const splitIndexName = (
indexName: string
): { siteId: string; branch: string } => {
const regexp = /^netlify_([0-9a-f-]+)_(.*)_all$/;
const [, siteId, branch] = indexName.match(regexp)!;
return { siteId, branch };
};

// eslint-disable-next-line no-warning-comments
// TODO: add validation
const options = {
...defaultOptions,
..._options,
...(_options.indexName && splitIndexName(_options.indexName)), // Temporary
autocomplete: {
...defaultOptions.autocomplete,
..._options.autocomplete,
},
};

this.search = new AutocompleteWrapper(options);

// Wait for DOM initialization, then render
const render = this.render.bind(this, options);
if (['complete', 'interactive'].includes(document.readyState)) {
render();
} else {
document.addEventListener('DOMContentLoaded', render);
}
const mandatory: Array<keyof Options> = [
'appId',
'apiKey',
'selector',
'siteId',
'branch',
];

const instances: AutocompleteWrapper[] = [];

function algoliasearchNetlify(_options: Options) {
const options = {
...defaultOptions,
..._options,
};
for (const key of mandatory) {
if (options[key]) continue;

throw new Error(`[algoliasearch-netlify] Missing mandatory key: ${key}`);
}

render(options: Options) {
this.search.render(options);
const autocomplete = new AutocompleteWrapper(options);
instances.push(autocomplete);

// Wait for DOM initialization, then render
const render = () => {
autocomplete.render();
};
if (['complete', 'interactive'].includes(document.readyState)) {
render();
} else {
document.addEventListener('DOMContentLoaded', render);
}
}

AlgoliasearchNetlify.instances = [];

export { AlgoliasearchNetlify };
export { algoliasearchNetlify };
Loading

0 comments on commit 1f93199

Please sign in to comment.