diff --git a/README.md b/README.md
index e27b5789f..df01f3259 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ When it receives a build hook, the Algolia Crawler processes your website asynch
You can find information about your current crawler in the [Netlify deploy logs](https://docs.netlify.com/monitor-sites/logs/#deploy-log).
> Note: by default, we only build the `master` branch. We can however create one crawler (targeting one Algolia index) per Git branch, so that you can have, for example, a production index on `master` and development index on `develop`. You need to configure the [`branches` plugin input](./plugin#available-parameters) to enable this feature.
+> If you're using our front-end library, you'll also need to [pass the correct branch](./frontend#using-multiple-branches) to the library parameters.
diff --git a/frontend/README.md b/frontend/README.md
index 890ea35b0..2605e175d 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -12,7 +12,8 @@ It's designed to be compatible with the index structure extracted by the [plugin
algoliasearchNetlify({
appId: '',
apiKey: '',
- indexName: 'netlify__',
+ siteId: '',
+ branch: ''
});
```
@@ -24,19 +25,43 @@ Here's the full list of options with their default value.
```js
algoliasearchNetlify({
// Mandatory
- appId: '', // Application ID (Can be found in https://www.algolia.com/api-keys)
- apiKey: '', // Search api key (Can be found in https://www.algolia.com/api-keys)
- indexName: 'netlify__', // Index name (Can be found in https://www.algolia.com/indexes)
+ appId: '', // Application ID (Can be found in https://www.algolia.com/api-keys)
+ apiKey: '', // Search api key (Can be found in https://www.algolia.com/api-keys)
+ siteId: '', // Netlify Site ID (Can be found in https://crawler.algolia.com/admin/netlify)
+ 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.
// Optional
- analytics: true, // Enable search analytics
+ analytics: true, // Enable search analytics
autocomplete: {
- hitsPerPage: 5, // Amount of results to display
- inputSelector: 'input[type=search]', // CSS selector of your search input(s)
+ 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)
- poweredBy: true, // Controls displaying the logo (mandatory with our FREE plan)
+ color: '#3c4fe0', // Main color
+ debug: false, // Debug mode (keeps the autocomplete open)
+ poweredBy: true, // Controls displaying the logo (mandatory with our FREE plan)
+});
+```
+
+## Using multiple branches
+
+If you've setup the plugin to index multiple branches using the `branches` plugin input, each configured branch has a dedicated index.
+You'll also need to pass the information of which index you want to search in using the `branch` parameter of the integration.
+
+To get access to the currently building branch, you can configure your build tool to forward the `HEAD` environment variable.
+For instance, with [`webpack`'s environment plugin](https://webpack.js.org/plugins/environment-plugin/) configured to forward `HEAD`, you could simply pass `branch: process.env.HEAD`.
+
+If you've configured your plugin to index only specific branches, you'll need to duplicate the logic here so that it picks the correct branch only when appropriate.
+For instance, with `branches = ['main', 'develop', 'feat/*']`, and using webpack's environment plugin to inject `HEAD`, here's how the snippet could look like:
+
+```js
+const currentBranch = process.env.HEAD; // Injected by your build tool
+let targetBranch = 'main';
+if (currentBranch === 'develop' || currentBranch.startsWith('feat/')) {
+ targetBranch = currentBranch;
+}
+algoliasearchNetlify({
+ // ...
+ branch: targetBranch,
});
```
diff --git a/frontend/src/AlgoliasearchNetlify.ts b/frontend/src/AlgoliasearchNetlify.ts
index 848baa086..7a3accd77 100644
--- a/frontend/src/AlgoliasearchNetlify.ts
+++ b/frontend/src/AlgoliasearchNetlify.ts
@@ -1,7 +1,10 @@
import { AutocompleteWrapper } from './AutocompleteWrapper';
import { Options } from './options';
-const defaultOptions: Omit = {
+const defaultOptions: Omit<
+ Options,
+ 'appId' | 'apiKey' | 'indexName' | 'siteId' | 'branch'
+> = {
analytics: true,
autocomplete: {
hitsPerPage: 5,
@@ -20,11 +23,21 @@ class AlgoliasearchNetlify {
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,
diff --git a/frontend/src/AutocompleteWrapper.ts b/frontend/src/AutocompleteWrapper.ts
index bda6c11c4..aaf72a911 100644
--- a/frontend/src/AutocompleteWrapper.ts
+++ b/frontend/src/AutocompleteWrapper.ts
@@ -33,15 +33,15 @@ const SM_WIDTH = 600;
class AutocompleteWrapper {
// All fields are private because they're just here for debugging
private client: SearchClient;
- private indexName: string;
private index: SearchIndex;
private $inputs: HTMLInputElement[] = [];
private autocompletes: AutocompleteJs[] = [];
- constructor({ appId, apiKey, indexName }: Options) {
+ constructor({ appId, apiKey, siteId, branch }: Options) {
this.client = this.createClient(appId, apiKey);
- this.indexName = indexName;
+ const indexName = this.computeIndexName(siteId, branch);
+ console.log('Index name', indexName);
this.index = this.client.initIndex(indexName);
}
@@ -108,6 +108,14 @@ class AutocompleteWrapper {
this.autocompletes = autocompletes;
}
+ private computeIndexName(siteId: string, branch: string): string {
+ // Keep in sync with crawler code in /netlify/crawl
+ const cleanBranch = branch
+ .replace(/[^\p{L}\p{N}_.-]+/gu, '-')
+ .replace(/-{2,}/g, '-');
+ return `netlify_${siteId}_${cleanBranch}_all`;
+ }
+
private createClient(appId: string, apiKey: string): SearchClient {
const client = algoliasearch(appId, apiKey);
client.addAlgoliaAgent(`Netlify integration ${version}`);
diff --git a/frontend/src/options.ts b/frontend/src/options.ts
index cbe18de13..3e05ec666 100644
--- a/frontend/src/options.ts
+++ b/frontend/src/options.ts
@@ -2,7 +2,11 @@ export interface Options {
// Mandatory
appId: string;
apiKey: string;
- indexName: string;
+
+ // Temporary
+ indexName?: string;
+ siteId: string;
+ branch: string;
// Optional
analytics: boolean;
diff --git a/plugin/README.md b/plugin/README.md
index a5b261c7c..4e7c0003f 100644
--- a/plugin/README.md
+++ b/plugin/README.md
@@ -12,7 +12,7 @@ Plugin inputs can be set in `netlify.toml`. They're all optional.
- `branches` - _Default: `['master']`_ - List of branches the crawler should build.
By default, we only build your main branch, but this can be used to build multiple branches.
Each of those will have a dedicated Algolia index, named `netlify___all`.
- To target the right branch, you will need to inject the `HEAD` environment variable in your front-end code.
+ You will need to [target the right branch](../frontend#using-multiple-branches) in your front-end code.
Accepts star patterns too, like so:
- `*`: matches all branches
- `feat/*`: matches all branches starting with `feat/`
diff --git a/public/1.html b/public/1.html
index af57d0b37..ad7dd3265 100644
--- a/public/1.html
+++ b/public/1.html
@@ -2,6 +2,7 @@
First test page
+
First test page
diff --git a/public/2.html b/public/2.html
index d077773f9..3183e4d04 100644
--- a/public/2.html
+++ b/public/2.html
@@ -2,6 +2,7 @@
Second test page
+
diff --git a/frontend/README.md b/frontend/README.md
index 890ea35b0..2605e175d 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -12,7 +12,8 @@ It's designed to be compatible with the index structure extracted by the [plugin
algoliasearchNetlify({
appId: '